Chaining jquery dialogs: Second dialog not in center

Question

I'm trying to open several dialogs one after another.(1st dialog opens and makes an ajax request. If success show the 2nd dialog) The problem is, the first dialog opens correctly in the middle of the screen but when I close it the second dialog opens at the top of the page not in the center.

I have all the jquery ui dependencies in place since I used the build page and selected everything.

I tryed all of these: 1 2 and 3 with no success.

The project is big, so I'm creating some make up code close to the one I'm using.

First, open the dialog

$(".btblock").click(function (event) {

    event.preventDefault();

    var btn = $(this);

    var id= btn.attr('id');

    $("#divDialog1").dialog({
        dialogClass: 'notitle',
        modal: true,
        zIndex: 10002,
        resizable: false,
        closeOnEscape: false,
        open: function (event, ui) {
            $(".ui-dialog-titlebar-close").hide();
        },
        buttons: {

            "Ok": function () {
                //Here I call another function which is an ajax call.
                //when the ajax call is completed (success or not) I call 
                //another function which creates the second dialog with results

                $(this).dialog("close");
            }
        }
    });
});

//Function called after ajax call. creats a result dialog
//This Dialog doesn't show in the middle of the screen

function customAlertMessage(title, message) {

var div = '<div style="text-align:center;" title="' + title + '">' + message + '</div>'
$(div).dialog({
    resizable: false,
    dialogClass: 'notitle',
    modal: true,
    buttons: {
        "Ok": function () {
            $(this).dialog("close");
        }
    }
});
}

maybe you could post some code? – mituw16 Apr 01 '14 at 16:37 — mituw16, Apr 01 '14 at 16:37
Edited with some example code. – jpgrassi Apr 01 '14 at 16:48 — jpgrassi, Apr 01 '14 at 16:48

jpgrassi · Answer 1 · 2014-04-03T16:38:33.377

Ended up resolving this myself.

In my case I believe what I was doing wrong was that I was opening different dialogs without closing the previous ones. After I did this the problem was solved. Not sure though why this happens. Any other explanations or solutions are welcome.

$(".btblock").click(function (event) {

event.preventDefault();

var btn = $(this);

var id= btn.attr('id');

$("#divDialog1").dialog({
    dialogClass: 'notitle',
    modal: true,
    zIndex: 10002,
    resizable: false,
    closeOnEscape: false,
    open: function (event, ui) {
        $(".ui-dialog-titlebar-close").hide();
    },
    buttons: {

        "Ok": function () {

            //Close First!
            $(this).dialog("close");

            //Than call functions that open others dialogs                
        }
    }
});
});

Chaining jquery dialogs: Second dialog not in center

1 Answers1