https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • l
    document.body.addEventListener('htmx:beforeCleanupElement', function(evt) { evt.preventDefault();} The above do I need to add to index.html?
  • m
    Copy code
    html
<script>
  htmx.on("htmx:beforeCleanupElement", function(evt){
    console.log("here", evt.target);
    evt.preventDefault();
  })
</script>
  • m
    add that at the top of the test page
  • m
    along w/ the modification above
  • m
    and try w/ 
    evt.preventDefault()
    commented out and then with it in, and see if the number of "here" printed goes way, way down
  • m
    (sorry this is so janky)
  • m
  • l
    I tried this code by commenting evt.preventDefault(). But it does not print anything on the console. Am I missing something?
  • m
    Mmmm
  • l
    htmx htmx.on("htmx:beforeCleanupElement", function (evt) { console.log("here", evt.target); // evt.preventDefault(); }) Click me
  • m
    Ah, you need it in a new script tag.
  • m
    You can't have a script w/ a 
    src
    attribute as well as code in it.
  • l
    oh okay. I tried the following still no luck htmx htmx.on("htmx:beforeCleanupElement", function (evt) { console.log("here", evt.target); // evt.preventDefault(); })
  • l
    Sorry my bad I haven't removed the bubble code. Now it printing all the entries. I tried w/ and w/o evt.preventDefault(). But prints all the entries in the console.log
  • a
    Hey 🙂 should i be able to run
    Copy code
    if (typeof variable !== 'undefined') {
    // the variable is defined
}
    in a being swapping in via HTMX? I am getting a htmx js error saying 'cannot access 'variable' before initialization'
  • a
    but the whole point of that is to check if its initialized
  • f
    Hi. Please help me. How i can show json responce by key ? Example I get response {'result': false, 'html-code': 'Test'} I select target to show answer like html hx-target='#div_id' Butt he show all json. How can i show only json['html-code'] ?
  • m
  • m
    you are going to need to transform the response to plain HTML this is complicated given what it looks like you are trying to do could you just return the HTML itself, without the JSON?
  • m
    no good reason that shouldn't work 🤔
  • m
    OK, for your case and for now, I would say just comment that event out. I think I threw it in as a nice to have, but if there are perf issues it should at least sit behind an option
  • l
    okay I will comment that out for now. If you think of any other better solution please share with me. Thank you for great support !!!
  • l
    I think you can do 
    variable === undefined
    without requiring JS to run 
    typeof
    on it, to accomplish the same result. (I could also be wrong, though; YMMV and all that...)
  • g
    Copy code
    js
if ('variable' in window)
    ?
  • f
    Yes you are right. I just need to return the html and generate the result in the backend. Help with another question please. HТМХ Allows you to change block style by ID ? For example div style I want to change it to or replace . How to do it ?
  • m
    if it is purely client side (you don't want to make a server request) then scripting is the right thing. Vanilla js, alpine.js and hyperscript are popular options for htmx users.
  • f
    i want use request but i dont undestand what responce i must return for change div style
  • m
    if you are replacing the div just render it with the new style
  • m
    it sounds like you might want to use 
    hx-swap="outerHTML"
    if you are targeting that div specifically, and re-render the entire div.
  • f
    Thanks a lot. The last question, is it possible in this way to replace not one but several separate blocks with one answer?
1...938939940...1146Latest