jQuery Function Question

Question

Hello,

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...
}