Run javascript after submitting form in update panel?

Question

It drives me crazy! I read at least 5 questions closely related to my problem, and probably 5 or more pages from googling only. I just do not understand.

I try to open the jqueryui dialog after the user fills out a form that says “Registration has been sent” and then redirects to another page, but I can’t get javascript to work for life, not even one warning.

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> 

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: (Commented on everything I 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 tried:

• Passing variables from server to client via inline <% =%> to the javascript block of the main tag.

• Entering the same code in a script
  inside the update panel.

• Tried to use RegisterClientScriptBlock and
  RegisterStartupScript

• Just execute Response.Write with a script written on it.

• Tried various combinations all jquery.dialog code in registerstartup script, or just trying to change autoOpen
  property or just call "open" on
  he.

I can’t even get a simple warning to work with any of them, so I’m doing something wrong, but I just don’t know what it is.

Here is what I know:

• JQuery binds properly even on async postbacks, because the div container that is the dialog box is always invisible, I saw a similar message saying that this was causing the problem, here it is not.

• Using page_load instead of document.ready, as it is supposed to run on both the asynchronous and the normal postbacks level, so this is not a problem.

• Panel update is updated correctly because <p>Did register Pass? <%= registrationComplete %></p> <p>Did register Pass? <%= registrationComplete %></p> updated to true after I submit the form.

So how can I do this? All I want is → click the “Submit” button inside the update panel → run the code on the server side to check the form and paste into db → if everything worked, the jQuery (modal) dialog box appears saying that it worked.

Answer 1

To register from Codebehind, here is the format :

 ClientScript.RegisterStartupScript(GetType(), "AutoPostBackScript", "alert('hi');", True); 

true at the end reports that it wraps your code in <script> tags, leave it if you want to make tags yourself.

Answer 2

You can check 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 { } }); }