Run javascript after form submission in update panel?

Question

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 alert.

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
  RegisterStartUpScript

• Just 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.

Answer 1

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.

Answer 2

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 {

        }
    });
}