https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • f
  • f
    I got inspiration from this website. I figured I could replicate this but using MongoDB as my database.
  • g
    The hx-put button doesn't include the inputs because they're not in a form together. You can use 
    hx-include
    to fix this.
  • g
    Some unrelated things I noticed: You have an XSS vulnerability -- if I make a book named "Hypermedia alert("hacked!") Systems" PUT and DELETE should use the URL of whatever they're updating or deleting instead of separate update and delete URLs
  • g
    Investigating further, I ve found out that the triggerEvent() function of htmx is indeed receiving the 'messages' event and it does dispatch the event and retiurns the eventResult as true. Everything seems to be fine at least within this function. So I am assuming that the event is emitted properly, so why is my handler not responding to it?
  • f
    Thanks for the feedback!! How do I protect myself against XSS attacks?? Never really thought about that.
  • g
    I have a code snippet hold on
  • g
    Copy code
    js
function htmlEscape(string) {
    return string
        .replaceAll("&", "&")
        .replaceAll("<", "<")
        .replaceAll(">", ">")
        .replaceAll("\"", """)
        .replaceAll("'", "'")
}

function html(stringParts, ...interpolatedParts) {
    return String.raw(stringParts, ...interpolatedParts.map(htmlEscape))
}

// Usage

const userInput = "Hypermedia <script>alert('hacked!')</script> Systems"

console.log(html`<h1>${userInput}</h1>`)
// Output: <h1>Hypermedia <script>alert('hacked!')</script> Systems</h1>
  • s
    saving that, will come usefull
  • f
    Thanks a bunch!! I’ll definitely be using this.
  • g
    A question: if a modal is the target of a header's HX_Trigger event, and the modal is deleted from the DOM, does the event die off , or dies it bubble up to the body?
  • g
    Success! Here is what was happening. The event was reaching my modal but the modal was deleting itself earlier than it should have. I changed it to delete itself on 
    htmx:afterRequest
    and this solved it. The event got time to reach the modal and then bubble upto the body. And now message toasts are being shown. At least this is what I think was happening. Wow, a full day went at this. Well! what can you do?
  • s
    Hi all, is there a way to refresh the page when someone clicks on the back button in HTMX?
  • l
    One thing that HTMX encourages is to not think so much in terms of how HTMX works, but how the browser works. So in this case, you really want to know how to tell the browser that it should always refresh a page. Was curious about this myself, I think this should answer it: https://stackoverflow.com/questions/49547/how-do-we-control-web-page-caching-across-all-browsers
  • l
    it looks like this is a little ambiguous in the spec, so play around with it for your use-case, but you can also set 
    htmx
    to load certain elements when the page is created, with 
    hx-trigger=load
    . That may or may not be suitable
  • s
    Thanks for the response. I used:
    Copy code
    response["Cache-Control"] = "no-cache, no-store, must-revalidate" # HTTP 1.1.
response["Pragma"] = "no-cache" # HTTP 1.0.
response["Expires"] = "0" # Proxies.
    From the stack overflow link you sent. Now when I do CTRL+Back button, the page opens in a new window, refreshes and is rendered correctly (which it did not do previously). But I use HX-Boost all my links, and when I simply click the back button the page does not refresh with this technique :/
  • s
    Found this extention: https://htmx.org/extensions/restored/ Now when I click back it works, but if I click on any link, the page refreshes as well
  • s
    Found a workaround:
    Copy code
    $(document).ready(function() {
    window.onpopstate = function (event) {
        location.reload();  
    };
});
    It seems to work as it should, is this a dirty workaround? Or a proper simple solution?
  • l
    It really depends on how your application works, and what aspect of the state you are trying to preserve. This is a personal preference, but I actually to not use HX Boost, especially for links, because I think it makes the page a lot easier to work with (no implicit state). If your page is fast enough, modern browsers are smart enough not to reload identical parts of your page (i.e. your header) and it will look just as smooth as if you had used HX boost
  • s
    little question , how would i have multiple select fields that join values? i have this
    Copy code
    html
<div>
    <select name="sort" hx-get="/posts" hx-target="#postlist">
        <option value="id">id</option>
        <option value="date">date</option>
    </select>
    <select name="order" hx-get="/posts" hx-target="#postlist">
        <option value="asc">ascending</option>
        <option value="desc">descending</option>
    </select>
</div>

<div hx-get="/posts" hx-swap="outerHTML" hx-trigger="load"></div>
    which works fine but they dont work well together
  • s
    is it required to use a form?
  • s
    and if yes, how would i make the form kind of autosubmit on change? since its required to have a submit option to push the query right?
  • m
    wrap the selects in a 
    <form/>
    tag and both values will be submitted together for each
  • s
    all right?
  • s
    if i wrap everything in a form and add 
    hx-get="/posts" hx-target="#postlist"
    to it. i still need a submit button
  • s
    i fould just trigger the submit on change state for one of the select options but im trying to figure out if there a way to do this without extra javascript
  • s
    ofc i can just
    Copy code
    js
<script>
    document.getElementById("postform").addEventListener("change", ({ target }) => target.form.submit());
</script>
    but this reload the whole page
  • m
    The selects will still submit on their own
  • m
    the form tag would just tell any non-GET to include all other elements in the form for the submission
  • m
    so the two selects would include one another's value
1...108010811082...1146Latest