Run script after additional page content is loaded via Ajax

Question

I have a script that replaces text node content. It works great on initial page load, but when I navigate to another tab that opens up more content that needs to be replaced, it does not work. I need to figure out a way to re-run the script function to replace text after clicking on the new tab and loading that extra content. Preferably, I would also need to wait for the new content to load before running the function or else it will not replace node content everywhere needed.

Here is the replace script finalized here: Replace non-code text on webpage

var getTextNodesIn = function(el) {
    return $(el)
    .find(":not(iframe, script, style)")
    .andSelf()
    .contents()
    .filter(function() {
        return this.nodeType == 3;
    });
};

function changeText() {
    var re = new RegExp(/^\$(\d+)/);
    getTextNodesIn($('div')).each(function() {
        if (re.test($(this).text().trim()) === true) {
            var txt = $(this).text().trim();
            txt = txt.replace(re,"%$1");
            $(this).replaceWith(txt);
        }
    });
}

$(document).ready(function() {
    changeText();
});

The button HTML that is clicked to load new tab content looks like this:

<a href="#" id="m_id0:Form_id45" name="m_id0:Form_id45" onclick="getTabSwitchId('78396'); if(!verifyRChange()) return false; saveTextBeforeReset();if(window != window.top){var f = document.getElementById('m_id0:Form');f.action += (f.action.indexOf('?') == -1 ? '?' : '&amp;');};A4J.AJAX.Submit('m_id0:Form',event,{'similarityGr‌oupingId':'m_id0:For‌m_id45','oncomplete'‌:function(request,ev‌ent,data){checkRequi‌red('','Tab 1');},'parameters':{'tabId':'78396','appID':'54362','id':'53‌4','m_id0:Form_id45'‌:'m_id0:Form_id45'} ,'status':'m_id0:Form:m_id21:5:tabSwitch'} );return false;">Second Tab</a>

Is there something that can be used in that code to listen to and run changeText() function when the new content is loaded? Note that I probably would not want to use any Ids from the button because this has to apply to multiple buttons that may have different Ids.

Also, it does not even have to be a change specific to the button, just anything that would trigger the function if the HTML changes. For example, I tried the following option but it caused "Maximum call stack size exceeded" error and well as other issues because it does not wait for all the changes to complete.

$(document).bind("DOMSubtreeModified",function(){
    changeText();
});

score 0 · Accepted Answer · answered Nov 09 '17 at 19:13

I think I solved the problem with this piece of magic: https://stackoverflow.com/a/27363569

(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        console.log('request started!');
        this.addEventListener('load', function() {
            console.log('request completed!');
            console.log(this.readyState); //will always be 4 (ajax is completed successfully)
            console.log(this.responseText); //whatever the response was
        });
        origOpen.apply(this, arguments);
    };
})();

Note that I couldn't simply use the following because my page is not using $.ajax() or any jQuery ajax method for actually loading content. But it's a nice quick solution for anyone that is.

$(document).ajaxComplete(function() {
  alert("ALL current AJAX calls have completed");
});

Run script after additional page content is loaded via Ajax

1 Answers1