https://htmx.org logo
Powered by
# htmx-general
  • m
    i believe that will work
  • b
    thanks for your help
  • m
    🍻
  • m
    it sounds like you might be able to just move the 
    hx-include
    down onto the save
  • m
    another option, not sure what the rest of your code looks like though
  • b
    I will also test that. But not today 🙂
  • b
    I just searched the docs for "unset". I only found it in the https://htmx.org/docs/#inheritance section. Do you maybe want to mention it in the hx-include page?
  • g
    maybe something like 
    This attribute can be [unset](/docs/#unset).
  • r
    Hello dear people, I have been wondering how would be the best to do the following: given a form that is submitted via js, if all the conditions are met checked by JS code: htmx.trigger(htmx.find('#my_form'), "testTrigger"); This works well; however, in some cases, I'd like to submit the form as a regular form and have a full page refresh, so not just swapping html sections of the page with HTMX. Is it possible to do this based on conditions with JS code? E.g. if a specific toggle is on -> HTMX refresh, if it is off -> regular full page refresh. Thanks a lot! 🙂
  • e
    d3js
  • m
    If you add a condition to the 
    hx-trigger
    you should be able to check whatever you want
  • p
    Is there an example out there somewhere? I'm having a tough time figuring out how to use hx-retarget on successful form submission.
  • p
    Actually scratch that -- I get it now -- it's just a response header. Next Q: I feel like I'm missing something because all I really want to do is redirect to the index page after a successful new-item submission. I can issue a 'HX-Redirect' header but I think that wipes out the whole DOM, resets client-side state, etc -- is there any way to redirect with hx-boosted behavior?
  • c
    Hello, I'm not sure my question is about pure HTML or if HTMx can help let say I have an html page with: 1) a select and/or a input test in form1 2) a button in form2, I need this button the hx-post. How can I get the value of the select, and post this value when clicking on the button ?
  • c
    here is the code of the select
    Copy code
    <FORM METHOD="POST" style="display: inline;" id="sel_wishlist" action="/buildsetr" name="sel_wishlist">
    <select id="wishlist" name="wishlist"><option value="1">Default</option><option value="9">list1</option><option value="12">list2</option><option value="31">list3</option><option value="33">list4</option></select>
    <input id="submit1" name="submit1" type="submit" value="Update current">
</FORM>
    and way farther in the page I have a list of part in a table, where I have this button
    Copy code
    <td style="text-align:center;">
                <form id="form-{{part.invid.data}}"" hx-get=" /addtowish" hx-target="#addqt-{{part.invid.data}}"  hx-vals='{ "test": wishlist }'>
                    {{ part.partidh }}
                    {{ part.colid }}
                    {{ part.tobuy(style="width:55px; text-align: center;",oninput="this.value=
                    ['','-','+'].includes(this.value) ? this.value : this.value|0") }}
                    <br>
                    <button>Add to wishlist</button>
                    <br><span id="addqt-{{part.invid.data}}"></span>
                </form>
            </td>
    My goal is to pass the value of the selected
    Copy code
    <select id="wishlist" name="wishlist">
    in the
    Copy code
    <button>Add to wishlist</button>
  • c
    I tried with hx-vals, but I'm sure I'm missing something 🙂
  • c
    I think I have it working with this. Any comment is welcome !
    Copy code
    <td style="text-align:center;">
                <form id="form-{{part.invid.data}}"" hx-get=" /addtowish" hx-target="#addqt-{{part.invid.data}}"  hx-vals='js:{ "wishlist": document.getElementById("wishlist").value }'>
                    {{ part.partidh }}
                    {{ part.colid }}
                    {{ part.tobuy(style="width:55px; text-align: center;",oninput="this.value=
                    ['','-','+'].includes(this.value) ? this.value : this.value|0") }}
                    <br>
                    <button>Add to wishlist</button>
                    <br><span id="addqt-{{part.invid.data}}"></span>
                </form>
            </td>
  • r
    Thank you for the reply! I am sorry but I don't understand exactly what you meant by "add a condition to the hx-trigger". To this part: hx-trigger="testTrigger"? I experimented and if I simply use: document.getElementById("my_form").submit(); instead of htmx.trigger(htmx.find('#my_form'), "testTrigger"); It seems the form is being submitted without using HTMX and there is a full page refresh. Is that the right way to go about it?
  • c
    Hi guys! Is it possible to receive triggering HTML event in the htmx events? For example in beforeRequest I'd like to know which input change triggered the form to change.
  • m
    if you look in the data for that event, there should be a 
    requestConfig
    which, internally, should contain the 
    triggeringEvent
    which should contain the original triggering element.
  • l
    Hi folks, Loving HTMX, it's made developing my Django SaaS much more powerful. Question: If I have a select dropdown, that has a HTMX POST E.G. 
    <select name="test_name" class="select" hx-post="/hx_test_url/" hx-target="#test_targer">
    This will post when the user makes a selection, but I'd like to manually trigger this via an event in javascript. Is it even possible to trigger a HTMX POST via an event rather than from an element on the page?
  • t
    Use the 
    hx-trigger
    attribute
  • m
    yep, hx-trigger is what you want thank you @User
  • m
    you can specify multiple events if you want 
    change, my-custom-event
  • c
    thank you, I was blind to that 😅
  • m
  • m
    demo
  • m
    button triggers by sending an event (using the htmx js API for convenience), drop down still triggers on change
  • m
    Copy code
    html
<script src="https://demo.htmx.org"></script>

<select id="select" name="opt" 
        hx-get="/demo" 
        hx-target="#output" 
        hx-trigger="change, myEvent">
  <option>Option1</option>
  <option>Option2</option>
  <option>Option3</option>
</select>

<br/>

<button onClick="htmx.trigger('#select', 'myEvent')">
  Send Request
</button>

<br/>

<output id="output">
</output>

<script>
  var request = 0;
</script>

<template url="/demo">
  Request: ${request++} value: ${opt}
</template>
  • m
    i sure love demo.htmx.org folks
1...634635636...1146Latest