CODEWITHSUNDEEP
javascriptajaxlaravellaravel-livewirepjax
Matěj Černý
Matěj Černý

Reputation: 70

Laravel livewire click is not executing after pjax realoded container

I am using pjax in my application. Recently I added livewire and I don't know how to make them work together. My problem:

I have a grid with products and with infinity scroll on a button click, which calls specific URL for data.

<div>
    <button wire:click="loadMore" class="bg-blue-500">Show more</button>
</div>

Everything works perfectly unit I click on some filters (for example "sort by desc"). My container reloads (with pjax) and when I click on "Show more" button, it doesn't call anything.

Here is 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 have no idea where could be a problem. Thanks for your help.

Upvotes: 1

Views: 642

Answers (2)

Matěj Čern&#253;
Matěj Čern&#253;

Reputation: 70

I've finally found a solution.

You have to rescan all livewire components after pjax end with this command:

window.livewire.rescan()

Upvotes: 2

Ariel Vicente
Ariel Vicente

Reputation: 36

Try adding the script jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Upvotes: 0

Related Questions