Question

I have a question concerning functions with jQuery. I have a function that once the browser is ready the function finds a specific table and then adds hover & click functionality to it.

I am trying to call this function from code behind in an asp .net page due to the fact that once someone adds to the database the update panel fires and retrieves a gridview (the table that has been affected by the function at document.ready). When it comes back it is the plain table again.

Here is the original functions:

$('#GridView1').find('tr').click(function(e) {                 var row = jQuery(this)                 //var bID = row.children('td:eq(0)').text();                 $('#tbHiddenBatchID').val(row.children('td:eq(0)').text());                 //Took out repetitive code, places values from table into modal                     e.preventDefault();                 $('#modalContentTest').modal({ position: ['25%', '5%'] });                 //row.addClass('highlight');                 //$('#tbEdit').val(bID);             });  //here is the function that adds hover styling $('#GridView1').find('tr').click(function() {             return $('td', this).length && !$('table', this).length         }).css({ background: 'ffffff' }).hover(             function() { $(this).css({ background: '#C1DAD7' }); },             function() {                 $(this).css({ background: '#ffffff' });              }); 

OK, what I tried to do is create a function, call it on document.ready and also in the code behind when after the database has been updated.

Here’s what I did:

function helpGrid() {             $('#GridView1').find('tr').click(function(e) {                 var row = jQuery(this)                 //var bID = row.children('td:eq(0)').text();                 $('#tbHiddenBatchID').val(row.children('td:eq(0)').text());                 //                 e.preventDefault();                 $('#modalContentTest').modal({ position: ['25%', '5%'] });                 //row.addClass('highlight');                 //$('#tbEdit').val(bID);             });  //Haven't even tried to add the hover stlying part yet; can't get this to work.         } 

When I try to call helpGrid(); I get an error that’s it not defined…

Obviously I’m a jQuery newb but I do have jQuery in Action & I’m scouring it now looking for an answer…

Please help..

Thanks!!!

Answer 1

Since you are using an update panel, the entire page does not postback and the document.ready stuff never gets hit… Below is where you can add a function to run at the end of the update, so resetMyTableStuff(); is where you’ll want to do your magic…

Try adding something like this…

function pageLoad() {     if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);         Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initializeRequest);     } }  function endRequestHandler(sender, args) {      resetMyTableStuff(); }  function initializeRequest(sender, args) {       //just in case you need to do it... }