hx-include cannot get the input value that generate from jquery

[LieuMai]

I have two hidden input and a div like this:

    <input type="hidden" name="latitude" />
    <input type="hidden" name="longitude"  />
    <div class="" id="res-suggestions"
            hx-trigger="load"
            hx-get="{% url 'pages:get-page-list' %}"
            hx-include="[name='latitude'], [name='longitude']"
            hx-target="this" >

    </div>

and inside main.js file I set the value for my input: $("input[name='latitude']").val(lat); $("input[name='longitude']").val(long);

Problem is when htmx make a request, it cannot get the input value. PS:

• I checked in devtool, my input has the jquery value
• I manually set value for my input like this: <input type="hidden" name="latitude" value='a' />, then htmx can get the value

[andryyy]

It’s possible it needs to read the value from the attribute as seen in DOM, try el.attr('latitude', val).

Would be interesting to know if HTMX catches it when you run htmx.process(el) on it after the change.

And checkout _hyperscript. :))

[matiboy]

Hi @LieuMai

It is likely that your issue is about when you set the value via jQuery; this is not mentioned in your issue. In any case, you trigger the htmx on "load" which is very likely happening before jquery sets values.

I've created a codepen to reproduce; if you use "click" on the div or allow for a delay after load e.g. load delay:3s for example, then the data gets sent as expected. If you remove the delay, values are not yet set, and therefore not sent.

Best solution is probably that in your jQuery code, after setting the values, you trigger a custom event which you also put as your hx-trigger value.

Hope this helps.