Run javascript after form submission in update panel?
This is driving me crazy! I have read at least 5 questions on here closely related to my problem, and probably 5 or so more pages just from googling. I just don't get it.
I am trying to have a jqueryui dialog come up after a user fills out a form saying 'registration submitted' and then redirecting to another page, but I cannot for the life of me get any javascript to work, not even a single al开发者_运维问答ert.
Here is my update panel:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="upForm" runat="server"
UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
'Rest of form'
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
<p>Did register Pass? <%= registrationComplete %></p>
</ContentTemplate>
</asp:UpdatePanel>
The Jquery I want to execute: (Right now this is sitting in the head of the markup, with autoOpen set to false)
<script type="text/javascript">
function pageLoad() {
$('#registerComplete').dialog({
autoOpen: true,
width: 270,
resizable: false,
modal: true,
draggable: false,
buttons: {
"Ok": function() {
window.location.href = "someUrl";
}
}
});
}
</script>
Finally my code behind: ( Commented out all the things I've tried)
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnSubmit.Click
'Dim sbScript As New StringBuilder()'
registrationComplete = True
registrationUpdatePanel.Update()
'sbScript.Append("<script language='JavaScript' type='text/javascript'>" + ControlChars.Lf)'
'sbScript.Append("<!--" + ControlChars.Lf)'
'sbScript.Append("window.location.reload()" + ControlChars.Lf)'
'sbScript.Append("// -->" + ControlChars.Lf)'
'sbScript.Append("</")'
'sbScript.Append("script>" + ControlChars.Lf)'
'ScriptManager.RegisterClientScriptBlock(Me.Page, Me.GetType(), "AutoPostBack", sbScript.ToString(), False)'
'ClientScript.RegisterStartupScript("AutoPostBackScript", sbScript.ToString())'
'Response.Write("<script type='text/javascript'>alert('Test')</script>")'
'Response.Write("<script>windows.location.reload()</script>")'
End Sub
I've tried:
Passing variables from server to client via inline <%= %> in the javascript block of the head tag.
Putting that same code in a script
tag inside the updatePanel.Tried to use
RegisterClientScriptBlock and RegisterStartUpScriptJust doing a Response.Write with the script tag written in it.
Tried various combinations of putting the entire jquery.dialog code in the registerstartup script, or just
trying to change the autoOpen property, or just calling "open" on it.
I can't even get a simple alert to work with any of these, so I am doing something wrong but I just don't know what it is.
Here is what I know:
The Jquery is binding properly even on async postbacks, because the div container that is the dialog box is always invisible, I saw a similiar post on here stating that was causing an issue, this isn't the case here.
Using page_load instead of
document.ready since that is supposed to run on both async and normal postbacks, so that isn't the issue.The update panel is updating correctly because
<p>Did register Pass? <%= registrationComplete %></p>
updates to true after I submit the form.
So how can I make this work? All I want is -> click submit button inside an update panel -> run server side code to validate form and insert into db -> if everything succeeded, have that jquery (modal) dialog pop up saying hey it worked.
You may checkout the endRequest event:
function pageLoad() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, e) {
// this function will be executed after the update panel finished
// the AJAX request, so here you may open your jQuery dialog
if (e.get_error()) {
} else {
}
});
}
To register from the Codebehind, here's the format:
ClientScript.RegisterStartupScript(GetType(), "AutoPostBackScript",
"alert('hi');", True);
The true
on the end tells it to wrap your code in <script>
tags, leave it off if you want to do the tags yourself.
精彩评论