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

How do I go about showing every character on a separate line using a for loop?

Optimal approach for managing numerous modals containing map data in Next.js

Is there a way for me to store the output of an AJAX call?

Creating a form submission event through Asp.net code behind

It seems that Firefox is ignoring the word-wrap style when the class of a child element is changed

Troubleshooting my HTML5 local storage issues for optimal functionality

Exploring the Variance between 'npm run serve' and 'npm run dev' Commands in Vue.js Development

I encountered an issue with adding a console log in the getStaticProps() function that resulted in the error: SyntaxError: Invalid Unicode escape sequence at eval (<anonymous>

Is it possible to identify the form triggering the ajax call within a callback function?

Breaking up an array into smaller chunks with a slight twist

Error encountered: Attempting to render an object as a react component is invalid

how to transfer data from backend servlet to frontend javascript

Conceal the .dropdown-backdrop from bootstrap using solely CSS styling techniques

Can someone assist me with navigating through my SQL database?

Images not showing in Vue.js

Relaunch node.js in pm2 after a crash

How to effectively pass custom props or data to the Link component in Next JS

Achieve uninterrupted deployment of node.js applications by utilizing naught for zero downtime implementation

Webpack has successfully built the production version of your ReactJS application. Upon review, it appears that a minified version of the development build of React is being used

Steps to ensure that a particular tab is opened when the button is clicked from a different page