Why wasn't my request updating? #4678

sedronbyron · 2025-09-19T05:06:32Z

sedronbyron
Sep 19, 2025

Howdy ya'll, just started playing around with alpine + htmx and I think they work pretty cool together. I was struggling with something earlier today that I think would be helpful for other new people. Feel free to make suggestions or improvements if you wish.

The Goal

Make a pagination feature that sends a request for the next page of data when the next button is clicked. I would like for the only thing going over the network is the list of data, and for alpine to store client side state.

Initial Try:

Yay! HTMX is correctly updating the calls as the plus/minus buttons are pressed! But wait, the count seems to be 1 request behind? It is requesting page 0 when i want to request page 1.

<body>
    <div x-data="{count: 0}">
        <button x-on:click="--count; $dispatch('call')">
            minus
        </button>
        <button x-on:click="++count; $dispatch('call')">
            plus
        </button>
        <span x-text="count">
        </span>
        <button hx-get="/endpoint.html" hx-target="#target"
            hx-trigger="call from:body, click" x-bind:hx-vals='`{"count": ${count}}`' type="">submit</button>
        <div id="target">
            target
        </div>

    </div>
</body>

Final try:

I read that Alpine makes updates to the DOM Async, so the reason why the counter was increasing but the requests were a count behind was because the request got sent before alpine finished updating the parameter. Moving the dispatch event after htmx has updated state or using $nextTick fixed this.

<body>
    <div x-data="{count: 0}">
        <button x-on:click="--count">
            minus
        </button>
        <button x-on:click="++count">
            plus
        </button>
        <span x-text="count">
        </span>
        <button x-init="$watch('count', () => {$dispatch('click')})" hx-get="/endpoint.html" hx-target="#target"
            hx-trigger="click" x-bind:hx-vals='`{"count": ${count}}`' type="">submit</button>
        <div id="target">
            target
        </div>
    </div>
</body>

Another solution I got to work was this:

<body>
    <div x-data="{count: 0}">
        <button x-on:click="count--; $nextTick(()=>$dispatch('call'))">
            minus
        </button>
        <button x-on:click="count++; $nextTick(()=>$dispatch('call'))">
            plus
        </button>
        <span x-text="count">
        </span>
        <button hx-trigger="call from:body, click" hx-get="/endpoint.html" hx-target="#target"
            x-bind:hx-vals='`{"count": ${count}}`' type="">submit</button>
        <div id="target">
            target
        </div>
    </div>
</body>

I think the two key points that I got from this were:

Alpine makes updated to the DOM async, therefore you must make sure that any events you want to trigger after this update has happened. This goes into using $watch and $nextTick.
Using x-bind on hx-vals. This syntax was foreign to me so it was good to understand that alpine can interpolate under ${} syntax.

ekwoka · 2025-09-20T11:29:44Z

ekwoka
Sep 20, 2025

the bind will only update the attribute on the microtask queue, but the dispatch was causing it to trigger before that happened.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Why wasn't my request updating? #4678

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Why wasn't my request updating? #4678

Uh oh!

sedronbyron Sep 19, 2025

The Goal

Initial Try:

Final try:

Replies: 1 comment

Uh oh!

ekwoka Sep 20, 2025

sedronbyron
Sep 19, 2025

ekwoka
Sep 20, 2025