Search code examples
.netjavascriptjquery-uiupdatepanelasynchronous-postback

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


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.


Solution

  • 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: Run javascript after form submission in update panel? and 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 ( 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