Comments (3)
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.
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>
from alpine-ajax.
Awesome! Thanks for reaching out. If you have any ideas how we might be able to make x-merge
more clear in the docs I’d be open to a PR.
from alpine-ajax.
Related Issues (20)
- Polling support? HOT 2
- Dynamically assigning a value for x-target not working, but works if assigning it statically. HOT 4
- v.0.6.0 broke the usual x-target behavior HOT 8
- x-target response code modifiers HOT 2
- Question: Fetch and headers HOT 2
- Global event listeners HOT 4
- x-sync deletes div if no matching id in response HOT 1
- Redirect on successful form submission HOT 9
- Website examples are currently not working HOT 2
- Does x-target require a form? HOT 4
- x-target response modifiers & aria-busy HOT 2
- Smooth transition HOT 1
- This Package can use document ?
- Integration with Alpine.js HOT 2
- this.$el points to button instead of x-data element HOT 3
- Programmatically merge elements HOT 3
- Target is removed instead of replaced when using ID generated by backend HOT 2
- Alpine Expression Error: signal is aborted without reason - After Intensive Infinite Scrolling HOT 4
- $ajax example on website: Why use "@change" on div vs. input? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from alpine-ajax.