Jquery event handler does not fire after Visualforce table refresh

Question

I am using the Datatables library together with visualforce to create a funky table but I am having "funky" issues to get it running properly.

Basically I have a button that will query the Salesforce database for Pricebookentries and refresh the table with the new results (this is because I try to limit as much as possible the number of items returned to maximize performance, users would want ALL products listed, over 10k!).

When the pageblocktable is refreshed the column filter function on the .keyup event of the "th header" (created via apex:facet) element does not work anymore. I tried changing the event handler function to use .live('keyup', function { BUT no luck, it still does not work. I AM A VERY VERY INEXPERIENCED NOOB IN JS and jQuery, so please mind my mistakes and assist if you would like to.. below is the script that is not working:

<script type="text/javascript" charset="utf-8">
var theTable;
$j = jQuery.noConflict(); 
$j(document).ready(function() {
    theTable = loadDataTables();

$j("th input").live('keyup', function () {
        /* Filter on the column (the index) of this element */
        theTable.fnFilter( this.value, $j("th input").index(this)+1 );
    });

} ); 

function loadDataTables() {
    var vTable = $j("table[id$='ProductsTable']").dataTable({
    "bSort": false,
    "bJQueryUI": true,
    "bPaginate": true,
    "bScrollCollapse": false
    });
    $j("div[id$='_info']").hide();
    return vTable;
}

IT works just fine before I click on the UI button and repopulate the table, after that the filter function no longer does anything.

Answer 1

You haven't included your page-side code to show exactly how you're doing the re-render, but you describe a very common problem with event listeners and rerenders.

The initial binding of the event listener to the table element occurs on page load. Usually, what happens after a rerender is that the actual elements your listeners are bound to (in this case your th elements linked to your keyup handler) are destroyed in the DOM, and the returned data from the rerender is used to create brand new, listener-less elements.

There are a few ways to fix this. My general approach, which should work for you, would be to add a post-rerender method that re-binds your listeners. Assuming that your page is using a commandButton with a rerender attribute, you usually can just refer to a JS function in the oncomplete attribute, e.g.

<apex:commandButton action="{!loadMyTable}"
    value="Load the data" rerender="myTable"
    oncomplete="someJavascriptThatRebindsMyListeners();" />