Refresh Javascript Code on Autopostback Dropdownlist

Question

I have a dropdownlist in my page with autopostback:

     <table>
        <tr>
        <td>
         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                 <asp:DropDownList ID="ddlClients" runat="server" DataValueField="IdClient"                                                DataTextField="Company" AutoPostBack="true" ViewStateMode="Enabled">
                 </asp:DropDownList>
               </ContentTemplate>
         </asp:UpdatePanel>
        </td>
        </tr>
    <tr>

And a checkboxlist:

      <td>
       <div id="lnkShowHideUsers" onclick="ShowHideCheckBoxList();">                                
       <span id="spanUsers"  runat="server">User/s</span> 
  </div>     
   <div id="td_Checkboxlist"  style="display: none" >                           
    <asp:CheckBoxList  ID="ddlUsersForCompany" runat="server" OnClick="ShowHideSpanUsers();"  DataValueField="UserId" DataTextField="UserName" SelectionMode="Multiple"
        ViewStateMode="Enabled" RepeatLayout="OrderedList">                                   
     </asp:CheckBoxList >
    </div>                            
   </td>
    </tr>
        </table>

When I select an option from de dropdownlist for clients, the javascript code for checklist is lost.

I tried to use this code in my view:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
        <script type="text/javascript">
            $(document).ready(function () { 
           Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    ShowHideSpanUsers();

      });    
        </script> 

And this is the javascript function to hide or show the span if there is any checkbox checked or not checked:

 <script type="text/javascript">
        function ShowHideSpanUsers() {

            var cont = 0;
            $(':checkbox').each(function (index, item) {
                if (item.checked == true) {
                    cont = cont + 1
                }
            });

            if (cont == 0) {
                $('table div span').hide();
            }
            else {
                $('table div span').show();
            }
        }    
</script>

The javascript for checkboxlist works correctly until I select and option for dropdownlist. How can I refresh the javascript code again? Thanks.

Answer 1

You need to do something like this, and in prm.add_endRequest you will call the event again

$(document).ready(function() {
    // bind your jQuery events here initially
});

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

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

here is the full description :

jQuery $(document).ready and UpdatePanels?