CODEWITHSUNDEEP
javascriptlaravel-livewire
mstdmstd
mstdmstd

Reputation: 3071

How in livewire after clicking on gotoPage method to call JS function?

In laravel 7 with livewire 1.3 I have a listing with pagination and lazy images applied to any item image by calling JS function lazyImagesInit(lazyload 2.0.0-rc.2 is used) when page is loaded. But when I click on pagination link I lose lazy images effect for any new opened items images . Looking into the code of cach file I see that gotoPage method is used :

<?php if(is_array($element)): ?>
    <?php $__currentLoopData = $element; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($page == $paginator->currentPage()): ?>
            <li class="page-item active d-none d-md-block" aria-current="page"><span class="page-link"><?php echo e($page); ?></span></li>
        <?php else: ?>
            <li class="page-item d-none d-md-block"><button type="button" class="page-link" wire:click="gotoPage(<?php echo e($page); ?>)"><?php echo e($page); ?></button></li>
        <?php endif; ?>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<?php endif; ?>

If there is a way after calling of gotoPage to call my lazyImagesInit function?

Thanks!

Upvotes: 4

Views: 7601

Answers (1)

Dan Harrin
Dan Harrin

Reputation: 957

Override the goToPage() method on your component -

public function gotoPage($page)
{
    $this->page = $page;

    $this->emit('goToPage');
}

Now listen for the goToPage event in JavaScript and call the lazyImagesInit function -

<script>
window.livewire.on('goToPage', () => {
    lazyImagesInit();
});
</script>

Upvotes: 6

Related Questions