Search code examples
jqueryajaxgridviewupdatepanel

asp.NET AJAX call, jQuery no longer works

I hate to ask a question that's already been asked, but none of the answers I've looked at seem to apply to my problem

I'm using the Microsoft UpdatePanel object to update a gridview with AJAX. If I load the gridview on document load, my jQuery works great. The first time I update with AJAX, jQuery doesn't work any more.

From looking at web blogs, I get that the gridview object isn't the same one that existed when the page loaded, and I need to re-acquaint my jQuery with the new DOM object (I think... right...?). Most of the sites I've looked at, including posts on this site, indicate that the .on() jQuery function would help me, but I can't figure out how to use it to solve my problem.

Here's an example of one of my jQuery functions, in case you care:

    //  Select/deselect all checkboxes on gridview
    $("#chkSelectAll").change(function () {
        var isChecked = $('#chkSelectAll:checked').val() ? true : false;
        if (isChecked == true) {
            $(".c_chkItem input").each(function () {
                $(this).prop('checked', true)
            });
        } else {    
            $(".c_chkItem input").each(function () {
                $(this).prop('checked', false)
            });
        }
    });

My question is, when the dot.net object updates my gridview, how can I let my jQuery know about it?

Solution

  • The good folks at StackOverflow couldn't help me, so I tore my hair out for a few more hours. Here's my solution, in case anyone with the same problem hits this page.

    If you have the following jQuery code:

    <script type="text/javascript">

    $(document).ready(function () {
       $('#myControl').val('some value');
    }

</script>

    It will work when the page is first loaded, but if myControl is located in an UpdatePanel object that gets updated by ajax, your jQuery function won't work with it any more.

    To solve the problem, move the jQuery into a separate function outside the document.ready function, and use the following code:

    <script type="text/javascript">

    $(document).ready(function () {
        // Whatever
    }

    function pageLoad(sender, args) {
        if (args.get_isPartialLoad()) {
           $('#myControl').val('some value');
        }
    }

</script>

    Now myControl will respond to your jQuery every time your page is partially reloaded by ajax.

    One more thing, if you have a webform control that needs to see jQuery BEFORE the first ajax call, you'll probably need to also put your jQuery statement in the document.ready function, so that it fires both when the page first loads and again after every ajax call. I don't need to do this and I haven't tested it, but I'm guessing that's correct.