I am currently using the pjax library in my application, and I recently integrated Livewire. However, I am facing difficulties in making them work together. Specifically, my issue is as follows:
In my application, I have a grid displaying products with an infinite scroll feature triggered by a button click, which fetches data from a specific URL.
<div>
<button wire:click="loadMore" class="bg-blue-500">Show more</button>
</div>
Everything functions smoothly until I apply certain filters (such as "sort by desc"). When the container reloads with pjax, the "Show more" button stops working and fails to fetch any new data.
Below is a snippet of my main layout:
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<title>Title</title>
@livewireStyles
</head>
<body>
<div id="pjax-container">
<!-- THIS CONTENT RELOADS -->
<!-- Here I have foreach with data and button "Show more" -->
</div>
</body>
@livewireScripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js></script>
<script>
$(document).pjax("a", '#pjax-container');
</script>
</html>I am unsure of where the issue lies. Any assistance or insights would be greatly appreciated. Thank you.