Tuesday, September 3, 2013

Jquery Events are not working in UpdatePanel after Postback

If we bind button ( i.e. if button in inside updatepanel )  "onclick" event using jquery in aspx page then it will work perfectly on first pageload.But this "onclick" function won't execute after postback .Because

1.When ever UpdatePanel updates the content then new HTML will be rendered into the client browser then all existing event handler will be destroyed.So, to overcome this issue we need to re-bind event handler

We can re-bind event handler in many ways those are

sample jquery:

function TestRebind()
{
$('#divid').show();
}

1. By simply calling below script after body tag in aspx page

<scritpt>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(TestRebind); 
</script>

2. By adding below script in UpdatePanel after inside ContentTemplate

<asp:UpdatePanel>
<asp:ContentTemplate>       
           <script>
                Sys.Application.add_load(TestRebind);
            </script>
</asp:ContentTemplate>
</asp:UpdatePanel>

3. By adding below script in aspx PreRender method

Protected override void Page_OnPreRender(object sender,EventArgs e)
{
ScriptManager.RegisterStartupScript(this,gettype(),"Reloadfn","function pageload(){TestRebind()} ;",true);
}
Here pageload() is the javascript in-built function.

Have a nice Day :)

No comments:

Post a Comment