https://htmx.org logo
Powered by
# htmx-general
  • m
    your move, young man
  • g
    i removed the button
  • m
    the only way to win... is not to play
  • g
    Does anyone have experience loading a google map from a htmx call?
  • s
    Yes. Integrated with a CMS module, but the gist of it is like this:
    Copy code
    js
htmx.onLoad(() => {
  let markupGoogleMapsElts = htmx.findAll('.MarkupGoogleMap');
  markupGoogleMapsElts.forEach((elt) => {
    // Call a custom function here to initialise a map on `elt` with custom options (e.g. from data-* attrs)
    // Function contains this to prevent multiple initialisations:
    if (elt.getAttribute('loaded')) return;
    // And when the map loads:
    elt.setAttribute('loaded', true);
  });
});
  • g
    Thanks Craig. But that makes no sense to me
  • s
    If your map element comes in via htmx, you will need some separate javascript to initialise the map. using 
    htmx.onLoad()
    is a good place to do that.
  • s
    let markupGoogleMapsElts = htmx.findAll('.MarkupGoogleMap');
    = look for all elements that have the class "MarkupGoogleMap" on them - these are the elements where maps will be. Put these elements in the list 
    markupGoogleMapsElts
  • s
    markupGoogleMapsElts.forEach((elt) => {
    = function process each map element that was found
  • s
    within this function, this is where you would call your typical google maps init code: 
    new google.maps.Map(elt, { zoom: 10, center: {} });
  • s
    the getAttribute() and setAttribute() calls are there to ensure it only gets loaded once
  • g
    And that worked like a charm
  • g
    Thanks for explaining that to me
  • s
    Excellent! No problem 🙂
  • b
    Evening all. I'm playing with SSE again. For some reason the following isn't working:
    Copy code
    html
<div hx-sse="connect:get-logs/?logs={{queryId}}">LOGS ARE STARTED
  <table>                                                                                            
    <thead>                                                                                            
      <tr>
        <th>Time</th>
        <th>Message</th>
      </tr>
    </thead>                                                     
    <tbody hx-sse="swap:log" hx-swap="afterbegin">                                                      
      <tr>
        <td> </td>
        <td> </td>
      </tr>                                                            
    </tbody>                                                                                           
  </table>                                                                                           
</div>
    The SSE events look like this:
    Copy code
    html
<tr>
  <td>2022-04-26 19:27:18.309</td>
  <td>Message</td>
</tr>
    It feels like it should work...
  • b
    It's the swap that's not working. The rows are being replaced rather than added to.
  • e
    It looks like you aren't using the htmx sse extension. Maybe using the extension will help? https://htmx.org/extensions/server-sent-events/. I think that's what's recommended now.
  • b
    I’ll give that a go. Thought I’d get away with it until 2.0
  • b
    hmm - switched to the extension but still just getting the content replaced. Looks like 
    hx-swap
    isn't supported though? https://github.com/bigskysoftware/htmx/issues/844
  • i
    Hey all, I've got some basic javascript functionality on my site and I want to use it to trigger a hx-get. I cannot for the life of me figure it out. Any help would be amazing! Thanks
  • s
    where are you getting blocked? could you show some code?
  • i
    Hey elabx, I've created a button that calls the following function. It checks all the checkboxes in a form. The form has hx-trigger="change delay:500ms", and usually calls hx-get when any checkbox is checked/unchecked. But it seems the change coming from this JS function isn't recognised
    Copy code
    js
function checkAll() {
        var categories = document.getElementsByClassName('category');
        for(var i=0; i < categories.length; i++) {
            categories[i].checked = true;
        }
    }
  • m
    programmatic changes don't trigger events, you'll need to trigger the request manually (which you probably want anyway because you don't want to trigger an event for every checkbox)
  • m
    Copy code
    js
function checkAll() {
        var categories = document.getElementsByClassName('category');
        for(var i=0; i < categories.length; i++) {
            categories[i].checked = true;
        }
        htmx.trigger("#whateverTheTargetIdIs", "change");
    }
  • i
    Ah! Amazing!! Thank you. I got as far as 
    htmx.trigger("#whateverTheTargetIdIs")
    but was missing the change.
  • p
    I noticed that using 
    hx-boost
    , my title tag gets updated even though only the body is being replace (which is great!). My question is, why does this happen?
  • m
  • p
    Okay, I figured it must be something like that. But I think this means that only the title tag gets swapped out leaving other tags like the meta description unchanged. This would effectively be a show-stopper for anyone who wants to use 
    hx-boost
    but also cares about SEO and a11y. Please tell me I'm wrong about this. 😬
  • m
    Yep as of right now only title gets swapped.
  • p
    Oh wow. That really is a show-stopper. Gutted. 😭
1...648649650...1146Latest