ScriptManager issue in asp.net on Submit - asp.net

Question

I have following code:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btnSave" runat="server" Text="Submit"/>
<asp:Panel ID="pnlMyView" runat="server">
<asp:GridView Control here...
</Panel>
<asp:Panel ID="pnlInfo" runat="server" Visible="False">
<div>
Some information...
</div>
</Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Update in progress...
</ProgressTemplate>
</asp:UpdateProgress>
<script language="javascript" type="text/javascript">
$(window).load(function() {
$("input:submit[id$='btnSave']").click(function() {
//jQuery code to validate gridview enteries...
})
});
</script>
Steps:
1.Refresh the page Or load page first time and clicked on Submit button to validate the entries in GridView
2.Validation done properly and save changes to database.
3.Made some changes in gridview entries and clicked on Submit button
4.Validation didn't take place and save the entries(i.e. wrong entries) in database.
5.Refresh the page i.e. pressing F5 Now everything working fine.
How to resolve issue at step 4.
-----------------PS----------------
Actually I have two panel pnlMyView and pnlInfo.So on page load I only make visible to pnlMyView and other is invisible.
Once if i move to pnlInfo and come to back on pnlMyView and submit Nothing validation take place.
Thanks

Answer 1

The problem is that your HTML gets reloaded and thus the event handler on the button gets lost.
You could try the following code which assures you that the handler stays in place:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="root">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btnSave" runat="server" Text="Submit"/>
<asp:Panel ID="pnlMyView" runat="server">
<asp:GridView Control here...
</Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Update in progress...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<script language="javascript" type="text/javascript">
$(window).load(function() {
$("input:submit[id$='btnSave']").on("click", ".root", function() {
//jQuery code to validate gridview enteries...
})
});
</script>
What this does is register the handler differently. You need to wrap the UpdatePanel inside a div with class root. Then you register the handler like this:
$("input:submit[id$='btnSave']").on("click", ".root", function() {});
This tells jQuery to registere a handler on an element called root, but only execute it when the input:submit... is executed.
Since the div is not removed, it will still detect the handler even after you have replaced the HTML.
These types of events are called delegated events. You can read a more thorough explanation in the jQuery documentation: http://api.jquery.com/on/

Answer 2

Better use OnClientClick property of Button control:
<asp:Button ID="btnSave" runat="server" Text="Submit" OnClientClick="return validate()" />
function validate(){
//jQuery code to validate gridview enteries...
//if validation isn't succeeded return false, otherwise return true
}

Answer 3

Hey friends I got the solution.I used live event and now everything is working fine.
$("input:submit[id$='btnSave']").live("click", function(event) {
Thanks a all for your response