Ways to restart script following Ajax call when additional search results are loaded

Question

Ways to restart script following Ajax call when additional search results are loaded

Implementing Klevu's search results page has been a manageable task so far. However, I encountered an issue where the search results page is displaying an Add to Cart button that should not be there, as confirmed by Klevu themselves. Their suggestion was to hide it using CSS, which led me to write this script:

<script>
window.addEventListener("load", () =>{
document.querySelectorAll('.kuProdAdditional').forEach(item => item.parentNode.removeChild(item));
})
</script>

Initially, this script worked flawlessly. But then, I was tasked with adding their infinite scrolling script into the head section, which was straightforward. However, now a new problem arises - the infinite scrolling feature triggers an Ajax call that loads subsequent pages along with the initial results. As a result, all results, including the original ones, display the Add to Cart button again. Essentially, I require assistance in ensuring that my script runs each time the Ajax call is completed.

The challenge lies in the fact that I lack the ability to modify the Ajax call to execute my script afterwards. Is there a method to detect when the page reloads so that I can run my script? While I am not a developer, I have been tasked with this IT-related assignment.

javascript ajax

Answer 1

Answer №1

To monitor changes in the DOM, you can utilize a MutationObserver that observes the container for any modifications in its list of children.

const parentContainer = document.getElementById('parentContainer');
const addButton = document.getElementById('addButton');

addButton.addEventListener('click', () => {
  const newChild = document.createElement('div');
  newChild.innerHTML = 'New Child → <span class="kuProdAdditional">remove me</span> ← removed';
  parentContainer.appendChild(newChild);
});

const mutationCallback = (mutationsList, observer) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      parentContainer.querySelectorAll('.kuProdAdditional').forEach(item => item.remove())
    }
  }
};

const observer = new MutationObserver(mutationCallback);

observer.observe(parentContainer, {
  childList: true
});

.kuProdAdditional {
  /* ideally: 
  display: none;
  */
  background: red;
}

<div id="parentContainer">
  <div>Child 1</div>
  <div>Child 2</div>
</div>

<button id="addButton">Add Child</button>

Answer 2

To monitor changes in the DOM, you can utilize a MutationObserver that observes the container for any modifications in its list of children.

const parentContainer = document.getElementById('parentContainer');
const addButton = document.getElementById('addButton');

addButton.addEventListener('click', () => {
  const newChild = document.createElement('div');
  newChild.innerHTML = 'New Child → <span class="kuProdAdditional">remove me</span> ← removed';
  parentContainer.appendChild(newChild);
});

const mutationCallback = (mutationsList, observer) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      parentContainer.querySelectorAll('.kuProdAdditional').forEach(item => item.remove())
    }
  }
};

const observer = new MutationObserver(mutationCallback);

observer.observe(parentContainer, {
  childList: true
});

.kuProdAdditional {
  /* ideally: 
  display: none;
  */
  background: red;
}

<div id="parentContainer">
  <div>Child 1</div>
  <div>Child 2</div>
</div>

<button id="addButton">Add Child</button>

Ways to restart script following Ajax call when additional search results are loaded

Answer №1

Similar questions

Can $event be transferred from cshtml to Vue.component?

Encountering an issue with a Discord bot causing it to malfunction and deviate from its intended

What is the best way to retrieve all objects from this data model?

How to trigger the submission of a form within the submission event of another form using jQuery

Encountering an error when trying to parse JSON response in an AJAX request, showing as

Deciphering the intricacies of the http request

Updating the $_GET parameter using JQuery when a button is clicked

Enhancing the nested set structure by dynamically incorporating additional child nodes

Understanding the scope within a .when .done function in jQuery

A guide on determining the return type of an overloaded function in TypeScript

Continuing to use a function multiple times may lead to a type error as it is not a

Error: Node requires the use of 'import' to load ES modules

When utilizing PHP and MySQL, the responses of Ajax requests consistently result in zero

Creating a JavaScript/jQuery array containing values from multiple input fields

What is the best way to fetch the title property from my Campaign Contract for displaying it in the render method?

Creating dynamic div elements using jQuery

What is the reason behind JavaScript events causing a page refresh?

Retrieve the weekday dates for a specific year, month, and relative week number using Javascript or Typescript

save function ajax failure

Retrieve data from a REST API in a dynamic manner without manually specifying the table structure in the HTML code