I am combining both filterable content and infinite scroll (based on your examples, th

Filterable content + infinite scroll: how to set x-merge attribute about alpine-ajax HOT 3 CLOSED

n355 commented on June 24, 2024

Filterable content + infinite scroll: how to set x-merge attribute

from alpine-ajax.

Comments (3)

imacrayon commented on June 24, 2024 1

You could try splitting the two merge strategies across nested containers like this:

<form>…</form>
<div id="posts" x-merge="replace">
   <div id="pages" x-merge="append" class="grid…">
        @foreach ($posts as $post)
            <article class="h-[50vh] border">
                <p>{{ $post->title }}</p>
            </article>
        @endforeach
    </div>
    <div id="pagination">…</div>
</div>

Your filter form would target posts and the pagination would target pages pagination.

from alpine-ajax.

n355 commented on June 24, 2024

Great, it works. Thanks for the quick reply and the example.
Here's the result:

<main>

    {{-- Filter --}}
    <form action="/posts"
        x-target="posts">
        @csrf
        <select name="filter"
            x-on:change="$el.form.requestSubmit()">
            <option value="">All</option>
            <option value="Active">Active</option>
            <option value="Inactive">Inactive</option>
        </select>
    </form>

    {{-- Posts --}}
    <div id="posts"
        x-merge="replace">

        {{-- Pages --}}
        <div id="pages"
            x-merge="append">
            @foreach ($posts as $post)
                <article>
                    <p>{{ $post->title }}</p>
                </article>
            @endforeach
        </div>

        {{-- Pagination --}}
        @if ($posts->currentPage() < $posts->lastPage())
            <div id="pagination"
                x-intersect="$ajax(`/posts?filter={{ $filter }}&page={{ $posts->currentPage() + 1 }}`)"
                x-target="pages pagination">
                Loading...
            </div>
        @endif

    </div>

</main>