CODEWITHSUNDEEP
jqueryjquery-dialog
user1144271
user1144271

Reputation: 35

Jquery Modal Dialog Having Old Values

Below is my simple Jquery Dialog. I have the same class 5 times in the page. I am using Iframe to load another page in Dialog.

For the first time, all the fields are empty. Once I select the values and Open for another dialog, it is showing the old values. How to load page with empty values.

   $(document).ready(function () {
        $(".imgSearch").click(function (e) {
            $("#divSearch").dialog({
                open: function () {
                    $(this).closest(".ui-dialog")
                    .find(".ui-dialog-titlebar-close")
                    .removeClass("ui-dialog-titlebar-close");
                },
                title: "Search Employee",
                show: "scale",
                modal: true,
                width: '55%',
                height: 500
            });
        });
    });

Upvotes: 0

Views: 1017

Answers (2)

T McKeown
T McKeown

Reputation: 12857

The dialog will contain the same contents it had from the previous with respect to content. You will need to code to clear out any elements. I would also add a close event handler and destroy the last instance, for example:

$(document).ready(function () {
    $(".imgSearch").click(function (e) {

        //Clear elements here.....

        $("#divSearch").dialog({
            close: function() { $(this).dialog('destroy'); },
            open: function () {
                $(this).closest(".ui-dialog")
                .find(".ui-dialog-titlebar-close")
                .removeClass("ui-dialog-titlebar-close");
            },
            title: "Search Employee",
            show: "scale",
            modal: true,
            width: '55%',
            height: 500
        });
    });
});

When you don't destroy you will get the same dialog over and over as well as any closure'd references to objects. That will result in weird behavior.

To clear all the elements in your div you should do something like before you open the dialog:

$('#divName input').val('');

To load from IFrame try this:

var _dlg = null;   // <- declare this before the $(document).ready(...) code.

Use it here:

if ( _dlg != null ){
   $(_dlg).dialog('destroy');
}
_dlg = $("#divSearch").load('youriFrame.aspx').dialog({
            close: function() { $(this).dialog('destroy'); },
            open: function () {
                $(this).closest(".ui-dialog")
                .find(".ui-dialog-titlebar-close")
                .removeClass("ui-dialog-titlebar-close");
            },
            title: "Search Employee",
            show: "scale",
            modal: true,
            width: '55%',
            height: 500
        });

Upvotes: 1

inoabrian
inoabrian

Reputation: 3800

I have had a similar problem before but it was with bootstraps modals. What I saw to be the problem was that I was using the same instance of my one modal multiple times. You will have to maybe create different ones not reuse one for multiple.

Just going on from my experience.

Upvotes: 0

Related Questions