How to change all links in an ajax driven page?

Question

I have a userscript that modifies the href of all applicable links on an an IP-direct, Google search page:

// ==UserScript==
// @name     _Modify select Google search links
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @include  http://62.0.54.118/*
// ==/UserScript==

var qLinks  = document.querySelectorAll ("a[href*='?q=']");

for (var J = qLinks.length - 1;  J >= 0;  --J) {
    var oldHref = qLinks[J].getAttribute ('href');
    var newHref = oldHref.replace (/\?q=/, "?&q=");

    //console.log (oldHref + "\n" + newHref);
    qLinks[J].setAttribute ('href', newHref);
}

It works fine on the first page, but when I use the pagination links, it stops working -- because the new pages are loaded by AJAX.

@Brock Adams told me to use waitForKeyElements() but I couldn't figure out how to do it.

I have seen a few topics, like stackoverflow.com/questions/10888326/executing-javascript-script-after-ajax-loaded-a-page-doesnt-work, but I can't figure out how to use them.

How can I use that script to change links on an AJAX page like:

http://62.0.54.118/search?&q=42&oq=42&sourceid=chrome&ie=UTF-8&filter=0#filter=0&q=42&start=10

Answer 1

To change static-page code to use waitForKeyElements() you do 3 or 4 easy tasks:

1. Include jQuery and waitForKeyElements with the script's metadata section.
2. Choose the appropriate jQuery selector for waitForKeyElements. It's often the same as what you would use for querySelectorAll().
3. Adapt any loop-driven code for a single node. Leveraging jQuery as appropriate.
4. In this case, Google overwrites links, when you page, rather than use AJAX to place new ones. So have the callback function return true.

Putting it all together, the complete script based on the question code would be:

// ==UserScript==
// @name     _Modify select Google search links
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @include  http://62.0.54.118/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements ("a[href*='?q=']", changeLinkQuery);

function changeLinkQuery (jNode) {
    var oldHref = jNode.attr ('href');
    var newHref = oldHref.replace (/\?q=/, "?&q=");

    jNode.attr ('href', newHref);

    return true;
}