I am developing a SpecialPage extension. I have a large table on my page, and I would like to provide a link at the top of the page that hides certain rows within the table. I can do this by inserting JavaScript directly into the HTML:
$this->getOutput()->addHTML( Html::element("a", array("href" => "#", "onclick" => "$('.my-table-row-class').hide(); return false;"), "Click to hide") )
This is working for me. However, I would prefer to keep my JavaScript separate from my PHP (partly because I plan to make it more complex), so I would like to move this JavaScript into a function in a file that is loaded by the ResourceLoader. I already have a JavaScript file which I know is being loaded successfully (it successfully attaches jQuery UI datepickers to form input fields).
My problem is this: When I take the naive approach and just create a new JavaScript function in my resource file, I can't successfully attach it to my "Click to hide" link. The JavaScript looks like this,
function hideTableRows() { $('.my-table-row-class').hide(); return false; }
and the PHP becomes
$this->getOutput()->addHTML( Html::element("a", array("href" => "#", "onclick" => "hideTableRows()"), "Click to hide") )
This isn't working for me. When I click the link, my browser's web console reports ReferenceError: hideTableRows is not defined
. I am guessing that I cannot define functions in the global space like this, or that my function is automatically stored inside some other object such that I would access it as obj.hideTableRows()
.
I have spend the last couple hours looking for examples or documentation for this type of thing, but I can't find anything. Perhaps I've just missed it, in which case, I apologize. Any help you can provide will be greatly appreciated.
Thanks in advance!