Stop page processing unitl button on dialog clicked

Question

I'm still a newb when it comes to MVC, Ajax and JavaScript. I have an application where I have to make a change. Right now, when a change is made and the Save, the spinner displays as the info saves and the page loads. The code for the Save looks like this:

$('#SaveButton').on('click', function () {
    navParams.isDirty = false;
});

HTML looks like this:

<input type="submit" value="Save" class="btn btn-block btn-primary user-action" name="action:Save" id="SaveButton" />

Just a note there multiple buttons on the screen so it is using the "Multiple Button" solution from How do you handle multiple submit buttons in ASP.NET MVC Framework?

The following code was added:

 $('#SaveButton').on('click', function () {
    navParams.isDirty = false;
    displaySavePromptMessage();
});
function displaySavePromptMessage() {
    if (isModalOpen == false) {
        bootbox.dialog({
            closeButton: false,
            title: "",
            message: "<strong>Warning: </strong>Changes have been made, ensure corresponding dates have been updated on the screen",
            buttons: {
                success: {
                    label: "Ok",
                    callback: function () {
                        navParams.userAction = false;
                    }
                }
            }

        });
    }
}

Now what's happening is the save button is clicked, the spinner starts running, the dialog box loads, but before the OK button is clicked the dialog button closes and the spinner stops. The changes are saved. What needs to happen is the spinner starts, the dialog box loads and everything stays as is until the user clicks OK. Then the processing continues. I'm not sure how to make this happen. Any thoughts?

Where is the code that saves everything? From what I see it should be in `callback`. — tcooc, Sep 16 '15 at 19:43

score 2 · Answer 1 · answered Sep 16 '15 at 19:46

Basic concept. You need to listen to submit event and prevent it:

$('.some-form').on('submit', function(submitEvent) {
  submitEvent.preventDefault();
});

Then in your handler, you need to submit your form on success:

// Inside your success handler
$('.some-form').get(0).submit();

score 0 · Answer 2 · edited Mar 17 '16 at 20:03

0

You have input type="submit" which will submit the form when this button is clicked. Either change this to type="button" or as @Lesha Ogonkov said

$('#yourFormID').on('submit', function (e) {
e.preventDefault();//it will stop loading page on form submission
});

in ajax inside you success handler function

$('.myFromID').get(0).submit();

edited Mar 17 '16 at 20:03

Jay Blanchard

34,243
16
77
119

answered Sep 16 '15 at 21:28

Saeed Ansari

455
8
16

Thanks for the answers! I tried changing the type to button and it did keep the dialog box open until I the OK button was clicked. However the data wasn't saved. – rsford31 Sep 17 '15 at 18:54
For the other option, my form id is InputForm. Would I add the $('#yourFormID').on('submit', function (e) { e.preventDefault(); in addition to the $('#SaveButton').on('click', function () { navParams.isDirty = false; displaySavePromptMessage(); }); – rsford31 Sep 17 '15 at 19:10

Stop page processing unitl button on dialog clicked

2 Answers2