jQuery helps a lot in order to bind events to the control across the browser. But when using the Asp.Net Ajax UpdatePanel, there are some issues doing that.
Here is a sample code of document.ready function in jQuery which helps to bind he events to the controls
$(document).ready(function() {
// put all your jQuery goodness in here.
});
Consider using a updatepanel in your webform, and you have a button in that.
Suppose you have a div element in your webform, and you want to keep it hiding until is asked to show. <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id='rightSide'>Some content.......</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
You can use the following code for above use: $(document).ready(function() {
$('div#rightSide').hide();
});
This code will hide the div until a partial postback is happened from the updatepanel. This is because, the content inside the update panel will get refreshed in each partial rendering. And at that time the document.ready function will not be executed.
So how we maintain the context...
You can add the following code within the updatepanel
Sys.Application.add_load(<function>);
That is :
redesign your document.ready function to the following one: function BindEvents(){
$(document).ready(function() {
$('div#rightSide').hide();\
});
}
and then add this function in the load of the application, that is: <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<script>Sys.Application.add_load(BindEvents);</script>
<div id='rightSide'>Some content.......</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
This is make the document.ready fire each time when the partial rendering within the updatepanel happens. And thus solves the problem.
