Can't find code for an <a> tag

Question

I'm trying to work with mytablegrid.

There is a working example here

On the bottom of the grid, there is a small subtable called the "pager" which allows the user to navigate between pages.

The html is like this :

<a class="mtgPagerCtrl" id="mtgFirst1">
   <img height="16" width="16" border="0" mtgfirstpage="" class="" src="../images/mtg/first-disabled.gif">
</a>

I just can't figure out what happens when I click that link. I'm used to href or onclick tags, I just don't get where I can see the code that executes to have the tablegrid actually change content.

Answer 1

The onclick events are probably getting attached through JavaScript. That means if you're just viewing source on this, you won't see anything useful as far as that goes.

Using Chrome's "Inspect Element" context menu, I see that there is a click event listener attached to the paging <a>s.

Answer 2

There is a JavaScript function assigned to the hyperlink which asynchronously queries the next data page and finally once the result comes back to the browser it renders it inside the grid. I'd look inside the JavaScript.

UPDATED:

On line 1559 of the MyTableGrid.js file look at the _addPagerBehavior : function(). That is where the next page is initiated from.

Answer 3

it is in this file <script type="text/javascript" src="../scripts/mtg/MyTableGrid.js"></script> if you use FireFox you can install FireBug and figure things like this out very easily. If you search in the MyTableGrid.js file, you can see where they are adding all the click events using JavaScript code. Search that file for mtgFirst.