How to use waitForKeyElements to display information after select images?

Question

I wrote a script that adds the number, contained in the image source URL, to the page. It works great!

But, I also want it to run on a page that has AJAX-driven tabs.
I've tried playing around with waitForKeyElements but I can't figure out how to make it work, and I don't understand jQuery.

When I use #dolls it puts all contents of all tabs on the page... when I use div.dolls it disables the button to load the dolls.

// ==UserScript==
// @name        Dex# of Pokedolls
// @namespace   http://trueidiocy.us
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=collection
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=giveaway
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=regional
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=shop
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=local&market=sell*
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=local&market=buy*
// @include     http://www.thepikaclub.co.uk/adopt/trainercard.php?trainer=*
// @version     1
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       none
// ==/UserScript==

 waitForKeyElements (
 "div.dolls"           //also tried #dolls
, showdexno
);

function showdexno (jNode) {
var imgs = document.getElementsByTagName('img');     

for (var i = imgs.length - 1; i >= 0; i--) {
  if (imgs[i].src.indexOf('overworld') > -1) {
     var textNode = document.createElement('b');

var numtext=imgs[i].src.match(/\d+/g)

  textNode.innerHTML = numtext;    
  imgs[i].parentNode.appendChild(textNode, imgs[i]);     
 }
} 
}

I'm probably just not using the right syntax or something, but I'm totally lost.

I'm testing the script on this page, and it needs to trigger when the Load Pokédolls button is clicked on the Pokédolls tab.

You can view that target page without having to login.

I'm assuming that after I get this working I would just throw everything into an if statement:

 If location is trainer card wait for tab
 else just run the code

So, what am I doing wrong? How do I use waitForKeyElements for this? Or is there another way?

ETA: one more problem... On one page this shows the numbers right next to the pictures which is perfect - BUT - on other pages that have text under the images it adds it to the existing text. How do I make it be right next to the picture every time?

Answer 1

Okay, I think I see what you are trying to do. But first, the question code has two big problems:

1. The script uses jQuery, but the target page also uses jQuery. So, when the script operates in @grant none mode, either the script will crash, or the page will crash, or both. Defaulting to @grant none was a colossal mistake by the lead GM dev and, even if you are not using jQuery, you would be wise to avoid that mode. Otherwise, your script will crash, it's just a matter of what future change does it in.
2. Fixed: waitForKeyElements is passed a callback function named showdexno, but there is no showdexno defined in the script! (or on the page that I checked.)

waitForKeyElements() operates by looking for elements that match the selector and then feeding those elements, one at a time, to the callback function. This means that things like getElementsByTagName or seldom needed in the callback.

For example, if you wanted to act on a bunch of images like this:

You would determine the HTML structure, paying attention to any id or class attributes. In this case, it looks like:

<div id="dolls">
  <center>
    <table>
      <tr>
        <td>
          <img class="attached" title="Quantity = 5" src="http://www.thepikaclub.co.uk/dex/images/icon/overworld/1.png">
        </td>
        <td>
          <img class="attached" title="Quantity = 18" src="http://www.thepikaclub.co.uk/dex/images/icon/overworld/2.png">
        </td>
... ...

And you apparently want only those images that have overworld in the src.

So, a good CSS/jQuery selector to choose might be #dolls td > img.attached[src*='overworld'].

The jNode passed to your waitForKeyElements callback would then be the image itself. Images are passed in one at a time.

Putting it all together, a script to append the png file number would be like:

// ==UserScript==
// @name        Dex# of Pokedolls
// @namespace   http://trueidiocy.us
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=collection
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=giveaway
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=regional
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=shop
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=local&market=sell*
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=local&market=buy*
// @include     http://www.thepikaclub.co.uk/adopt/trainercard.php?trainer=*
// @version     1
// @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 (
    "#dolls td > img.attached[src*='overworld']", 
    appendImageNumber
);

function appendImageNumber (jNode) {
    var numtext = jNode.attr ("src").match (/\d+/g);

    jNode.after ('<b>' + numtext + '</b>');
}

---

Eliminate the .attached if you want more (¿all?) of the images.

Reference:

• jQuery selectors
• jQuery .after()