CODEWITHSUNDEEP
javascriptjqueryjquery-ui
fatarms
fatarms

Reputation: 543

jquery ui dialog closed unexpectedly

I intend to implement interactive Cancel button dialog using jquery-ui. When the user click Cancel, it display pop up confirm dialog. When the user click yes, it will respond based on the response status. Here is how I implemented the code.

function refreshPage() {
window.location.reload(true);
}

$(function() {
setTimeout(refreshPage,30000);

var cancelJob = function(e) {
    e.preventDefault();
    $('.hiddenCancelPopup').dialog({
        modal: true,
        buttons: {
            "Yes": function() {
                var bookingJobNo = $('.cancelButton').attr("rel");
                var channel = $('.cancelButton').attr("channel");
                var deviceId = $('.cancelButton').attr("deviceId");
                if(readCookie("mbtx_session_id") == null) {
                    $(".invalidId").dialog({});
                    return;
                }
                jQuery.get('/rest/v2/booking/cancel/'+  bookingJobNo + "?channel=" + channel + "&deviceId=" + deviceId,  function(result) {
                    if(result.status == 501) {
                        $(".hiddenCancelledPopup").dialog({
                            modal: true,
                            buttons: {
                                "OK": function() {
                                    alert("OK");
                                    window.location.reload(true);
                                    //$( this ).dialog( "close" );
                                }
                            }
                        });
                    } else {
                        $(".hiddenFailedCancelPopup").dialog({
                            modal: true,
                            buttons: {
                                "OK": function() {
                                    $( this ).dialog( "close" );
                                }
                            }
                        });
                    }
                });
             },
            "No": function() {
                $(this).dialog("close");
            }
        }
    });
}

$(".cancelButton").on('click',cancelJob);

$("body").on({
    ajaxStart: function(cancelJob) {
        $(this).addClass("loading");
    },
    ajaxStop: function(cancelJob) {
        $(this).removeClass("loading");
        refreshPage();
    }
});

The problem with this implementation is that upon displaying $(".hiddenCancelledPopup").dialog , the dialog closed unexpectedly even before the user clicks OK button. It was shown for a short while before disappears.

I realize that setTimeout(refreshPage,30000); (which means refresh every 30 seconds) may cause the problem but I observed that the dialog closed much shorter before 30 seconds interval. Any ideas on how to resolve this problem? Thanks.

Upvotes: 0

Views: 355

Answers (1)

Rohit416
Rohit416

Reputation: 3496

By having a glimpse at your code, I suspect the issue is when ajax call stops i.e. in the following section of your code.

$("body").on({

    ajaxStart: function(cancelJob) {
        $(this).addClass("loading");
    },
    ajaxStop: function(cancelJob) {
        $(this).removeClass("loading");
        refreshPage();    //page refreshes after any ajax call stops after executing.
    }

});

Quite possibly, when UI dialog with class hiddenCancelledPopup appears the code inside ajaxStop function executes and it refreshes the page as you have called refreshPage() inside it, so your popup disappears before any user interaction.

I don't know your requirement but my advice would be to call refreshPage() at some other place if possible. Let me know how did it go.

Upvotes: 1

Related Questions