Search code examples
asp.net-mvcjqueryimpromptu

Keep impromptu "up" while performing a jquery Ajax/MVC post


Is there a way to keep the impromptu dialog box displayed during a post?
Here's the javascript code

$('#linkPostTest').click(function() {        
      openprompt();
});

function openprompt() {
    var temp = {
        state0: {
            html: 'Are you sure you want to post?<br />',
            buttons: { Yes: true, No: false },
            focus: 1,
            submit: function(v, m, f) {
                if (v) {
                    var form = $('frmPostTest');
                    $.ajax(
                            {
                                type: 'POST',
                                url: '/Path/TestPost',
                                data: form.serialize(),
                                success: function(data) {
                                            // I realize I could check "data" 
                                            // for true...just have not 
                                            // implemented that yet....
                                    $.prompt.goToState('state1');
                                    //$.prompt('Test was successful!');
                                },
                                error: function() {
                                    $.prompt.goToState('state2');
                                    //$.prompt('Test was not successful.');
                                }
                            }
                        );

                    return true;
                }
                else {
                    //$.prompt.goToState('state1'); //go forward
                    return false;
                }
            }
        },
        state1: {
            html: 'Test was successful!',
            buttons: { Close: 0 },
            focus: 0,
            submit: function(v, m, f) {
                if (v === 0) {
                    $.prompt.close();
                }
            }
        },
        state2: {
            html: 'Test was not successful.<br />',
            buttons: { Close: 0 },
            submit: function(v, m, f) {
                if (v === 0) {
                    $.prompt.close();
                }
            }
        }
    };
    $.prompt(temp);
}

The controller does this

[AcceptVerbs(HttpVerbs.Post)]
    public bool TestPost()
    {            
        // runs some code that saves some data...
        // this works fine
        bool updated = functionThatSavesCode();
        return updated;
    }

After I click Yes when the 'Are you sure you want to post?' impromptu dialog is displayed... it disappears...How can I make it stay displayed?


Solution

  • OK got it to work...I'm really impressed with the impromptu plug-in and jQuery! Two of the things I did differently to get this to work was to add the two

    return false;
    

    statements under the state0 block and...

    to set the the ajax call to

    async: false,
    

    Here's the new javascript:

    $('#linkTestPost').click(function() {
        TestPost();
    });
    
    function TestPost() {
        var temp = {
            state0: {
                html: 'Are you sure you want to post?<br />',
                buttons: { Yes: true, No: false },
                focus: 1,
                submit: function(v, m, f) {
                    if (v) {
                        if (PostView() === true) {
                            $.prompt.goToState('state1');
                            // the line below was missing from my original attempt
                            return false;
                        }
                        else {
                            $.prompt.goToState('state2');
                            // the line below was missing from my original attempt
                            return false;
                        }
                    }
                    else {                        
                        return false;
                    }
                }
            },
            state1: {
                html: 'Test Post was successful!',
                buttons: { Close: 0 },
                focus: 0,
                submit: function(v, m, f) {
                    if (v === 0) {
                        $.prompt.close();
                    }
                }
            },
            state2: {
                html: 'Test Post was not successful',
                buttons: { Close: 0 },
                submit: function(v, m, f) {
                    if (v === 0) {
                        $.prompt.close();
                    }
                }
            }
        };
        $.prompt(temp);
    }
    
    function PostView() {
        var form = $('frmTestPost');
        var postSuccess = new Boolean();        
        $.ajax(
        {
            type: 'POST',
            url: '/Path/TestPost',
            data: form.serialize(),
            // the line below was missing from my original attempt
            async: false,            
            success: function(data) {
                postSuccess = true;
            },
            error: function() {
                postSuccess = false;
            }
        });        
        return postSuccess;
    }