0

I have 1 page which has 1 updatepanel which contains 1 user control(lets call it user.ascx) and 2 buttons.

My user.ascx has some checkboxes which can disable/enable other controls. I am doing it in javascript added to user.ascx, but when updatepanel updates( async postback after clicking 1 of those 2 buttons) my javascript events for checkboxes (click or change) arem't fired. I know I can just wrapp $().ready() with function pageLoad(sender,args) and it works perfect but according to that page http://blog.dreamlabsolutions.com/post/2009/03/25/jQuery-live-and-ASPNET-Ajax-asynchronous-postback.aspx it is better to use live() function.

Unfortunately all available ways to bind event like .click(), .change(), .bind(), .live() and .on() work after postback can't after asynchronus postback.

Sample of code which doesn't work:

<script type="text/javascript">
         $().ready(function () {
    var ddlAge= $("#<%= ddlAge.ClientID %>");
    var cboxFirst= $("#<%= cboxFirst.ClientID %>");
    var cboxSecond= $("#<%= cboxSecond.ClientID %>");


          $(document).on("change", cboxFirst, function () {
                if (cboxFirst.is(":checked")) {
                    ddlAge.attr("disabled", "disabled");
                    ddlAge.val("");
                }
                else { ddlAge.removeAttr("disabled");  }
            });

          cboxSecond.live('change',function () {
                if (cboxSecond.is(":checked")) {
                    ddlAge.attr("disabled", "disabled");
                    ddlAge.val("");
                }
                else { ddlAge.removeAttr("disabled");  }
            });

});
</script>

Both checkboxes work only after postbacks. What may I do wrong? Does anyhone have such problem? I am using Jquery 1.7.1 and I am not getting any js errors.

I will be grateful for any help.

Kostrzak
  • 161
  • 4
  • 19
  • 1
    Relevant: http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels – jrummell Aug 20 '12 at 14:45
  • Thx John, simple var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function () { BindEvents(); }); solves the problem :) However, I am still curious why my code doesn't work. – Kostrzak Aug 20 '12 at 14:59

1 Answers1

1

I'm surprised that the .on works at all. According to the documentation http://api.jquery.com/on/ it's second parameter should be a selector string and not a jquery object.

I would try something like this:

$(document).on("change", "#<%= cboxFirst.ClientID %>", function () {
    if ($(this).is(":checked")) {
         ddlAge.attr("disabled", "disabled");
         ddlAge.val("");
    }
    else { ddlAge.removeAttr("disabled");  }
});

As long as the ClientID stays the same the event will still work even when the UpdatePanel replaces all its content.

Also, .live has been deprecated in favor or .on

Nal
  • 2,741
  • 20
  • 14
  • Thanks. The problem was rather with objects like ddlAge, cboxFirst.. which weren't recreated after async postback. After I changed for direct refences like $("#<%= ddlAge.ClientID %>").attr("disabled", "disabled"); it started working. – Kostrzak Aug 21 '12 at 09:23