Question 69624 in Ajax Question posted in
You can find the official documentation here.

Run jQuery function on AJAX load except for initial page load – Jquery ajax

I have a filterable list that uses AJAX to update results. I am trying to add a simple JQuery function to scroll to the first item when a filter is applied. It works fine, except the scroll function runs on initial page load as well as after AJAX filtering. How can I run this only when the filters are updated?

jQuery( document ).ajaxComplete(function( event, request, settings ) {
  jQuery('html, body').animate({
        scrollTop: (jQuery('#td-top-of-list').offset().top - 200)
    }, 500);
});

Here is the page: https://galvestondiet.com/galveston-diet-recommended-physicians/

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for the help @benoit. The plugin author provided me with the completed AJAX event. Here is the working snippet...

        jQuery(document).ready(function( $ ){
        $( document ).on( 'jet-filter-content-rendered', function() {  // Completed event
            if($(window).width() > 767) { // Only scroll on tablet & desktop
                $([document.documentElement, document.body]).animate({
                    scrollTop: $("#top-of-physician-list").offset().top - 200
                }, 1000);  
            }
        });
    });

  2. 0

    This is on every ajax completed request on your page.
    You need to grab the completed event from the call when you load the list.

    $.ajax({
    url: "https://app.asana.com/-/api/0.1/workspaces/",
    type: 'GET',
    dataType: 'json', // added data type
    success: function(res) {
        fillYourList(res);
        jQuery('html, body').animate({
            scrollTop: (jQuery('#td-top-of-list').offset().top - 200)
        }, 500);
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search