Detect ajaxPager event

Need Help
#1

Hy

I use ajaxPager for pagination and i want to go to the top of the page after after moving from one page to another page.
I tested with document.addEventListener(‘ajax:done’,… but it not working.

Any idea ?

Thanks

#2

Hi @ridha82,

Your idea using “ajax:done” makes sense! When you say it’s not working, what do you mean exactly?

#3

Hi @apinard

i did this

 addEventListener('ajax:promise', function(event) {
      console.log('ajax:promise');
    });
    addEventListener('ajax:done', function(event) {
      console.log('ajax:done');
    });

‘ajax:promise’ is executed but not ‘ajax:done’

Thanks

#4

Does ajax:success work?

#5

hy @daft

no, only ajax:promise work.

Thanks

#6

@ridha82 so then, maybe the ajax request is failing? what is the http code of the response in the Network tab? if you do something like this:

addEventListener('ajax:fail', function(event) {
    console.log('ajax:fail', event);
});

do you see something?

#7

Hi @apinard

ajax:fail is not called. I don’t think the query failed, because the pagination works well, I go from page 1 to page 2 without problem.

This is how i call the partial “{% ajaxPartial ‘products/list’ %}” and this is how i call the pager inside the partial “{{ ajaxPager(products) }}”

Thanks

#8

There is a difference between document.addEventListener and window.addEventListener. The documentation outlines which element it is called on, and sometimes the events don’t bubble (blocked by another script)

#9

Hi @ridha82 @apinard

I think I know why this may happen. If you bind to an element that is removed from the DOM as part of the AJAX update, the event will not fire.

Try using the ajax:before-request and ajax:request-complete events instead. That will tigger on the FORM tag instead.