Javascript code stopped working inside a ASP.NET user control with Update Panel

Question

I have a Javascript code that is used for a full gridview row clicking to check a checkbox in the same row. (Placed in an external file)

  $(document).ready(function () {
                $('tr.dataRow').on('click', function () {
                    var checked = $(this).find('input[id*=chkBusinessSelected]').prop('checked');
                    $(this).find('input[id*=chkBusinessSelected]').prop('checked', !checked);

                });
        });

        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_endRequest(function () {
            $('tr.dataRow').on('click', function () {
                var checked = $(this).find('input[id*=chkBusinessSelected]').prop('checked');
                $(this).find('input[id*=chkBusinessSelected]').prop('checked', !checked);

            });
        });

In the code behind of the User Control

  protected void grdBusiness_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.CssClass = "dataRow";
        }
    }

Take note that they are enclosed in an Update Panel to avoid full Postback. The function is for multiple selecting an item in a gridview. Everything worked well as is, until I used the User control in a parent page where in, that page has an Update Panel usage also.

Using the gridview row clicking functionality and click another button outside the user control to process something. Upon using or repeating the function again, I cannot click the checkbox already. The Javacript code stopped working.

I tried removing the UpdatePanel on the parent page, and it worked. But I needed to put Update panel both in the User Control and the Parent page.

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

For jQuery 1.7+ you can attach an event handler to a parent element using .on(), and pass the a selector combined with 'dataRow' as an argument.

See http://api.jquery.com/on/

So instead of...

$('tr.dataRow').click( function() {
    // do something
});

You can write...

$('body').on('click', 'tr.dataRow', function() {
    // do something
});

Not you can write it outside the $(document).ready(function () { also.
If you are using older version you can use .live() method of jQuery.

More detail Event binding on dynamically created elements?

edited May 23 '17 at 11:58

Community

1
1

answered Aug 12 '15 at 08:52

शेखर

17,412
13
61
117

What about sir, when it is enclosed on one update panel only, I mean there is no user control? Because I have another page when it is the case. after updating my code based on your suggestion, that page stopped working. I am sorry for this additional question. – rickyProgrammer Aug 12 '15 at 09:20

Javascript code stopped working inside a ASP.NET user control with Update Panel

1 Answers1