Triggering event on clicking OK button in Jquery Modal dialog box

Question

I am trying to display a dialog box with just an OK button on response of an ajax call. When the user clicks OK, it should reload the page. But now page reload is immediately happening after the dialog box is popped up. It is not waiting for the user to click OK. FYI I am using Jquery Modal dialog box.

Simple browser alert() does the job for me, but I don't like the appearance of alert().

Any help is highly appreciated!

$.ajax({
    url: "modules/mymod/save.php", 
    type: "POST",
    data: $('#requestForm').serialize(),
    statusCode: {404: function () {alert('page not found');}},
    success: function (data) {
        // alert(data);
        modal({type: 'alert', title: 'Alert', text: data});
        window.location.href = window.location.href;
    }
});

Answer 1

You can pass the dialog modal buttons attributes, each with a registered event, like this:

$.ajax({
    url: "modules/mymod/save.php", 
    type: "POST",
    data: $('#requestForm').serialize(),
    statusCode: {404: function () {alert('page not found');}},
    success: function (data) {

        $("#dialog-confirm").dialog({
          resizable: false,
          height: 200,
          modal: true,
          buttons: {
              Proceed: function() {
                 window.location.href = window.location.href;
              },
              Cancel: function() {
                 // Cancellation code here
              }
           }
       });
    }
});

Answer 2

Because your reload runs irrespectively of what is clicked. If you want to assign a callback function to the modal window:

jQuery UI dialog with boolean return - true or false

Also, there is no need to make location.href equal itself (or use the window object). location.reload() works just as well.

Answer 3

Simple browser alert() does the job for me because alert() is an blocking call. If you omit the alert then your code is not bind with any event to check whether user clicked on a button or not, that's why the code block executes immediately and page reloads.

So bind the following code:

window.location.href = window.location.href;

inside some button click, to resolve the issue.

Answer 4

Reference:

            $.ajax({
                url: "modules/mymod/save.php", 
                type: "POST",
                data: $('#requestForm').serialize(),
                statusCode: {404: function () {alert('page not found');}},
                success: function (data) {
                    // alert(data);
                    modal({
                        type: 'alert',
                        title: 'Alert',
                        text: data,
                        buttons: [{
                                text: 'OK', //Button Text
                                val: 'ok', //Button Value
                                eKey: true, //Enter Keypress
                                addClass: 'btn-light-blue btn-square', //Button Classes 
                                onClick: function() {
                                    window.location.href = window.location.href;
                                }
                            }, ],
                        center: true, //Center Modal Box?
                        autoclose: false, //Auto Close Modal Box?
                        callback: null, //Callback Function after close Modal (ex: function(result){alert(result);})
                        onShow: function(r) {
                            console.log(r);
                        }, //After show Modal function
                        closeClick: true, //Close Modal on click near the box
                        closable: true, //If Modal is closable
                        theme: 'xenon', //Modal Custom Theme
                        animate: true, //Slide animation
                        background: 'rgba(0,0,0,0.35)', //Background Color, it can be null
                        zIndex: 1050, //z-index
                        buttonText: {
                        ok: 'OK',
                        yes: 'Yes',
                        cancel: 'Cancel'
                    },
                    template: '<div class="modal-box"><div class="modal-inner"><div class="modal-title"><a class="modal-close-btn"></a></div><div class="modal-text"></div><div class="modal-buttons"></div></div></div>',
                    _classes: {
                    box: '.modal-box',
                    boxInner: ".modal-inner",
                    title: '.modal-title',
                    content: '.modal-text',
                    buttons: '.modal-buttons',
                    closebtn: '.modal-close-btn'
                      }
                    });
                   }
            });

Answer 5

dont use window.location function in success.instead open the modal with ok button at success(how to do that, I think you know already) and assign some id to that button let say id="loction_btn" . then use just this

$('document').on('click','#location_btn',function(){
   window.location.href = window.location.href;
});