CODEWITHSUNDEEP
jquery
Mittal Patel
Mittal Patel

Reputation: 848

jQuery: dialog not opening second time properly

I have created one jQuery dialog. Below is the Ajax function where I have created that.

$.ajax({
    url: "/StaffManageCertifications/GetExamCodesAndCategory/",
    type: "Post",
    datatype: "html",
    success: function (data) {
        debugger;
        $('#divExamCodesCategory').html(data);
        $("#divExamCodesCategory").dialog({
            autoOpen: false,
            width: 700,
            height: 610,
            modal: true,
            resizable: false,
            draggable: true,
            title: 'Add Exam Code/Category'
        });
        $("#divExamCodesCategory").dialog("open");
        $('a.ui-dialog-titlebar-close').remove();
        $('#divProcessImage').css({
            "display": "none"
        });
    },
    error: function (req, status, error) {
        ErrorMessageStaff(req.responseText);
        $('#screen').css({
            "display": "block",
            "width": "",
            "height": ""
        });
        $('#divProcessImage').css({
            "display": "none"
        });
    }
});

Now, I have placed two buttons(Ok and Cancel) on that div = divExamCodesCategory.

and written below line of code to destroy this dialog everytime, when I close it.

$("#divExamCodesCategory").dialog("destroy");

now, when I am opening it second time, on first click - it doesn't show dialog. on second click - it does show dialog but without the data. empty dialog.

Also, it is not coming in the center of the screen. It drops down to the bottom of the screen. below is the position style for this dialog. 

.ui-dialog {
    padding: 0em !important;
    position: fixed !important;
}

Any help on this appreciated.

Thanks.

Upvotes: 2

Views: 6525

Answers (4)

Mittal Patel
Mittal Patel

Reputation: 848

I found below Solution to this problem: hope this help someone.. :)

Managed to solve the issue, the issue was that the program was repeatedly creating unnecessary div's whenever $("import_box_dialog").dialog() was called. And since the $ operator returns u all the div's matching a given condition, i.e. ID in this case, hence the content did not become visible, which i think made it confused, there are two ways to solve it:

Remove the Div manually by calling

$("import_box_dialog").remove()

This would however remove all the other Div's inside the dialog div Use a variable to track the div used for the dialog box, since I am using jquery classes, I use it for the static variable. Thus this way, it tracks the dialog, and always creates the dialog on the same div.

I suppose jquery applies a lot of class styles, due to which there is ambiguity in the selection of the proper div, and I guess using a static variable solves it.

Upvotes: 2

vikrant singh
vikrant singh

Reputation: 2111

(Creating one dialog and reusing it) is good approach and vice-versa. //you are creating new dialog every time,check if it already created or not if not, then create and open else open previously created dialog

 if (!$("#divExamCodesCategory").hasClass('ui-dialog')) { //check if alredy created
// it is not initialized yet
        $("#divExamCodesCategory").dialog({ autoOpen: false,
                width: 700,
                height: 610,
                modal: true,
                resizable: false,
                draggable: true,
                title: 'Add Exam Code/Category'

            });
        //initialized
    }
//open dialog
    $("#divExamCodesCategory").dialog("open");// after creation

Upvotes: 0

Alnitak
Alnitak

Reputation: 339816

If you intend to destroy the dialog every time it's closed, that needs to be done in the dialog's close handler:

$(...).dialog({
    ...,
    close: function() {
        $(this).dialog('destroy');
    }
});

As it stands, if your (unshown) destroy call is immediately after this AJAX call as you've described it'll actually happen immediately because the AJAX call is asynchronous and finishes straight away.

p.s. instead of using $.css({'display': 'none'}), just use .hide()

Upvotes: 5

Frederick Lasmana
Frederick Lasmana

Reputation: 21

First. you must move this code outside the ajax call. 

$("#divExamCodesCategory").dialog({ autoOpen: false,
    width: 700,
    height: 610,
    modal: true,
    resizable: false,
    draggable: true,
    title: 'Add Exam Code/Category'

});

Put it in this instead.

$(document).ready(function() {
    $("#divExamCodesCategory").dialog({ autoOpen: false,
        width: 700,
        height: 610,
        modal: true,
        resizable: false,
        draggable: true,
        title: 'Add Exam Code/Category'
    });
});

Change the success call into: 

success: function (data) {
    debugger;
    $('#divExamCodesCategory').html(data);
    $("#divExamCodesCategory").dialog("open");
    $('a.ui-dialog-titlebar-close').remove();
    $('#divProcessImage').css({ "display": "none" });
},

And when you want to close. Do not destroy the object. Just close it

$("#divExamCodesCategory").dialog("close");

For the css. Do not fixed the position of the dialog. It's by default on the center screen. You might want to adjust the height and width, but leave the position.

Upvotes: 0

Related Questions