Experience not loading on initial page load on 2nd page but does if refresh the page

[MelBe1]

We have a test running to hide some elements on a search results page

The experiment is set to load on all pages that contain 'search-results' in the url

Experience loads on 1st page of search results ok but is not loading on  the 2nd search result page

If I refresh the page it will load on 2nd page ok

Code for experiment:

<script type="text/javascript">

var callOnceElLoaded = function(d, f) {
var alt_cnt = 0;
var elLoaded = setInterval(function () {
var alt = 100;
var el = document.querySelectorAll(d);

if (el.length > 0 || alt_cnt >= alt) {
clearInterval(elLoaded);
if (el) {
f(el);
}
} else {
alt_cnt++;
}
}, 200);
}

callOnceElLoaded(".cabinicon", function(els) {
els.forEach(element => {
element.style.display = "none";
});
});

callOnceElLoaded(".seatnote", function(els) {
els.forEach(element => {
element.style.display = "none";
});
});

callOnceElLoaded(".refundableBadge", function(els) {
els.forEach(element => {
element.style.display = "none";
});
});

</script>

I am not a developer so any help, please bear that in mind.

[alexbishop · Accepted solution]

I'm guessing that navigating to the 2nd page of search results doesn't cause the page to refresh, which would mean that Target isn't aware that the content has changed since the initial page load.

If you're using the at.js 2.x Target library (latest version is 2.11.0) then you can ask the development team to implement the triggerView method. So, for example, each time a new results page is displayed they call triggerView('resultsPagePagination'), which will notify Target that content has changed and then re-apply any relevant Experience/Offer code again.