Menu
I'm trying to stop postback on form submit if my custom jQuery validation returns false.
Is there any way to prevent the __doPostback() function finishing from within the submit() function?
I'd assumed:
$('#aspnetForm').submit(function () { return false; });
would do the trick, but apparently that's not the case: does anyone have a suggestion?
The submit() function does block the postback (it won't postback if you pause at a breakpoint in firebug), but I can't seem to stop the event happening after the submit() function is complete!
Cheers, Ed
EDIT
OK, I had a quick mess about and discovered that the fact that the button I'm using to cause the postback is tied to an updatepanel as an asyncpostbacktrigger seems to be the problem: If I remove it as a trigger (i.e. cause it to product a full postback), the is no problem preventing the postback with return false;
Any ideas why the async postback would not be stoppable using return false?
914
You have to use the client side PageRequestManager to properly handle AJAX submit events. (e.g. prevent an async postback.)
If you are not in total control of the page, there can be JavaScript on the page that just calls __doPostBack() without going through any page logic.
In this case - in addition to the above -, you have to store the old window.__doPostBack() and provide your own - as @tucaz mentioned in his comments.
(...and as you mentioned, it can get quite perplexing with chaining.)
For regular submits (non-AJAX), you can provide an event handler as others have pointed out.
This page might be of help and has some code samples that use PageRequestManager. In particular:
initialize : function()
{
...
this._onSubmitHandler = Function.createDelegate(this, this._onSubmit);
this._onPartialUpdateEnd = Function.createDelegate(this, this._onUpdateEnd);
if (typeof(Sys.WebForms)!== "undefined" && typeof(Sys.WebForms.PageRequestManager)!== "undefined")
{
Array.add(Sys.WebForms.PageRequestManager.getInstance()._onSubmitStatements, this._onSubmitHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(this._onPartialUpdateEnd);
}
else
$addHandler(document.forms[0], "submit", this._onSubmitHandler);
},
Edit:
Following the above, this, for example works fine for me (.Net 3.5 SP1, Button1 is trigger in the updatepanel, etc...):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.js" charset="utf-8"
type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
</form>
<script type="text/javascript">
(function($, undefined) {
var submitHandler = function(e) {
return false;
}
if (typeof (Sys.WebForms) !== "undefined" && typeof (Sys.WebForms.PageRequestManager) !== "undefined") {
Array.add(Sys.WebForms.PageRequestManager.getInstance()._onSubmitStatements, submitHandler);
} else {
$("form").submit(submitHandler);
}
})(jQuery);
</script>
</body>
</html>
$('#yourPostButton').click(function(){
return false;
});
This should do!
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
