Drupal 8/9 Ajax with jQuery on Views Infinite Scroll

Drupal Ajax allows you to load new content without refreshing the page, but how do you use jQuery with it? Refer to this article for the tricky solution.

The default action of loading jQuery is, it will load only once when a web page is loaded. In Drupal, considering the website's performance and the load of the site, developers will always choose ajax load. When it comes to Drupal view pages, infinite scroll is added to the pages to load more content without reloading the page and this helps to reduce the weight of a website.

So when some content is loading without reloading the page, obviously, the jQuery code will not apply to the upcoming content. Let’s see the practical experience.

Note: If you are a beginner, please download the views infinite scroll module here. 

Drupal views are the place where infinite scroll functionality has been integrated, here is a screenshot of selecting infinite scroll in views.

And this is my view just for your reference, where exactly the ajax call is enabled.

Let us have a look at the result page.

Here I’m writing some CSS with jQuery and it completely depends on user requirements. Click here to know How to use jQuery in drupal. Below is a very simple code that I have used to show the difference between the before and after of the infinite scroll happened.

script.js

jQuery(".views-row").css({
    "border":"1px solid #e8e4e4",
    "border-radius":"0.5rem",
    "background-color":"#afd9ff3d",
    "padding":"2rem",
    "margin":"0 0 1rem 0",
    "font-size":"17px",
    "font-weight":"bold"
})

Let us see the results page and here it is,

So all the CSS that has been written via jQuery is reflected in the above image.

Note: I have just written CSS within jQuery as a kind of example, and the same functionality will apply for any kind of requirement in this combo (loading of jQuery code on infinite scroll where ajax call is enabled in drupal views).

Problem

The actual problem is, whatever code is written in jQuery is loaded at the first load of a web page in the server, and when it comes to the next load content jQuery is not loading here is the screenshot that shows the difference.

After the first scroll, the jQuery is not loading as per the above screenshot, and when the scroll is continued the jQuery is not loading because we are loading the content on the same page without reloading.

Refer to the below gif for practical experience.

Solution

So, if we do analyze the issue carefully, we can sense that the Ajax call is a blocker here, which is the reason for not loading the jQuery, and here is the solution. Along with the ajaxstop function, we also need to write the general code for an initial load.

script.js

jQuery(".views-row").css({
    "border":"1px solid #e8e4e4",
    "border-radius":"0.5rem",
    "background-color":"#afd9ff3d",
    "padding":"2rem",
    "margin":"0 0 1rem 0",
    "font-size":"17px",
    "font-weight":"bold"
})

jQuery( document ).ajaxStop(function() {
    jQuery(".views-row").css({
    "border":"1px solid #e8e4e4",
    "border-radius":"0.5rem",
    "background-color":"#afd9ff3d",
    "padding":"2rem",
    "margin":"0 0 1rem 0",
    "font-size":"17px",
    "font-weight":"bold"
    })
});

Results:

Check the below gif, which is jQuery code is loading after multiple scrolls as well.