Force Postback from code behind? Or reload JavaScript from an Asynchronous Postback?

Question

Hi all,

I've got a Jquery UI dialog that pops up to confirm the creation of an item after filling out a form. I have the form in an update panel due to various needs of the form, and especially because I want validation being done on the form without reloading the page.

JavaScript appears to not reload on an asynchronoous postback. This means when the form is a success and I change the variable 'formSubmitPass' to true, it does not get passed to the Javascript via <%= formSubmitPass %>. If I add a trigger to the submit button to do a full postback, it works. However I don't want the submit button to do a full postback as I said so I can validate the form within the update panel.

How can I have this so my form validates asynchronously, but my javaScript will properly reload when the form is completed successfully and the item is saved to the database?

Javascript:

    var formSubmitPass = '<%= formSubmitPass %>';
var redirectUrl = '<%= redirectUrl %>';

function pageLoad() {

    $('#formPassBox').dialog({
        autoOpen: false,
        width: 400,
        resizable: false,
        modal: true,
        draggable: false,
        buttons: {
            "Ok": function() {
                window.location.href = redirectUrl;
            }
        },
        open: function(event, ui) {
            $(".ui-dialog-titlebar-close").hide();
            var t = window.setTimeout("goToUrl()", 5000);
        }
    });

    if(formSubmitPass == 'True')
    {
        $('#formPassBox').dialog({
            autoOpen: true
        });
    }

So how can I force a postback from the code behind, or reload the JavaScript on an Asynchronous Postback, or do this in a way that will work such that I can continue to do Async form validation?

Edit: I change formSubmitPass at the very end of the code behind:

If errorCount = 0 Then
            formSubmitPass = True
            upForm.Update()
        Else
            formSubmitPass = False
        End If

So on a full postback, the value does change.

Answer 1

Not exactly sure what you're trying to do. <%= formSubmitPass %> is certainly not going to be re-evaluated because that is a server-variable that is set only upon page reload. Even if you'd execute the javascript again, the value wouldn't change.

However, you can also pass a succes callback to the .dialog() method:

$('#formPassBox').dialog({
  // ...
  success: function(){ 
    // do something, e.g.
    $("#formPassBox").dialog({autoOpen:false});
  }
});

Answer 2

I sounds more like the html is being replaced by the update panel and your jQuery selectors are not being bound to the new elements.

Try using .Live for all your events, or rebinding after an ajax update (you can use UpdatePanel plug-in for this)

Answer 3

I figured this out, what worked for me is first putting the dialog javascript in the page_load to just have a the auto open property set to false like so:

function pageLoad() {

    $('#formPassBox').dialog({
        autoOpen: false
     });
}

Then create a totally separate function like so:

function formSubmitPass() {
    $('#formPassBox').dialog({
        autoOpen: true,
        width: 400,
        resizable: false,
        modal: true,
        draggable: false,
        buttons: {
            "Ok": function() {
                window.location.href = redirectUrl;
            }
        },
        open: function(event, ui) {
            $(".ui-dialog-titlebar-close").hide();
            var t = window.setTimeout("goToUrl()", 10000);
        }
    });
}

Then use RegisterStartupScript as indicated by these questions: http://stackoverflow.com/questions/2794850/run-javascript-after-form-submission-in-update-panel and http://stackoverflow.com/questions/2294039/what-is-wrong-with-scriptmanager-registerstartupscript

My code:

ScriptManager.RegisterStartupScript(Me, upForm.GetType(), "AutoPostBackScript", "formSubmitPass();", True)

NOTE: Make sure to use ScriptManager NOT ClientScript, also for the second parameter use GetType() on the update panel.

Instead of using a stringbuilder ( http://stackoverflow.com/questions/789292/efficient-use-of-the-asp-net-registerstartupscript-method ) on the code behind, which I felt was unwieldy to put javaScript on the code behind, I just make the separate function and called that, which worked great