Диалоговое окно пользовательского интерфейса JQuery работает только один раз

У меня есть диалоговое окно пользовательского интерфейса JQuery, которое открывает внутри него другую страницу. После того, как я нажимаю «Отмена» и пытаюсь нажать еще раз, он не открывается. Я искал в Интернете и нашел ответ, в котором говорилось, что мне нужно инициализировать диалог только один раз и просто вызвать его, когда пользователь нажимает кнопку. Я попытался переместить код инициализации в раздел загрузки страницы и сделать только диалог («открыть») для кнопки, но у меня все та же проблема, что и раньше. Как настроить диалоговое окно, чтобы его можно было отменить и снова открыть?

Код инициализации:

var scanDialog = $( "#dialog" ).dialog({
                  height:600,
                          width:800,
                  modal: true,
                          autoOpen:false,
                  buttons: {
                    "Scan": function() {
                         //scanning code 
                    },
                    Cancel: function() {
                                 scanDialog.load("url.html").dialog("close");
                    }
                  }
                });

Код загрузки:

scanDialog.load("url.html").dialog('open');

javascript dialog jquery jquery-ui jquery-ui-dialog
person user2387503    schedule 16.05.2013    source источник
comment
Вы заменяете элемент #dialog при загрузке новой страницы?   -  person Barmar    schedule 16.05.2013
comment
Будет ли это вызывать _destroy() по какой-либо причине? Таким же образом вы можете потерять свое удостоверение личности.   -  person abdkw    schedule 16.05.2013
comment
У меня никогда не было проблем с повторным использованием диалога более одного раза. Я вижу, вы загружаете URL-адрес перед открытием ... Возможно ли, что ваш URL-адрес содержит другой элемент с идентификатором, равным идентификатору вашего диалога, что вызывает конфликты?   -  person Baral    schedule 16.05.2013

Ответы (3)


arrow_upward
1
arrow_downward

Попробуйте уничтожить диалог из DOM

 scanDialog.load("url.html").dialog("destroy");

Чтобы не потерять идентификатор div, вы можете добавить идентификатор диалога к его родительскому имени DOM.

     var DialogParent = $(this).parents("div:eq(0)");
      var Diag = myParent.attr('id') + 'Diag';

      var scanDialog = $( "#" + Diag ).dialog({
                  height:600,
                          width:800,
                  modal: true,
                          autoOpen:false,
                  buttons: {
                    "Scan": function() {
                         //scanning code 
                    },
                    Cancel: function() {
scanDialog.load("url.html").dialog("destroy");// Destroy, not close
                    }
                  }
                });

Затем,

 $("#" + Diag).dialog('open');
person Hariprasad    schedule 16.05.2013

arrow_upward
0
arrow_downward

Возможно, это неправильный ответ, но несколько месяцев назад у меня была аналогичная проблема, и это было из-за свойства «modal: true». Мне пришлось удалить модальное свойство, чтобы кнопка работала. Я думаю, что это ошибка в jquery.

person Arian    schedule 16.05.2013

arrow_upward
0
arrow_downward

Это казалось излишне надоедливой проблемой. Использование «автофокуса» сработает только один раз. Некоторые исправления работали в IE, но не в Chrome. Поэтому для исправления мне потребовалось несколько шагов, частью которых было добавление «.dialog(‘destroy’)», упомянутого выше. Я добавлял фокус к кнопке «Да» во всплывающем диалоговом окне.

Во-первых, я добавил функцию open с вызовом focus(). В нашей системе для этого потребовалась оболочка «setTimeout»:

open: function()
{
    setTimeout(function() {
        $('#yesDialog').focus();
    }, 100);
},

Добавьте «id»:

}, id: 'yesDialog'

И решающим, ключевым шагом было изменение диалога «закрыть» на диалог «уничтожить»:

Итак, из:

$(this).dialog('close');

To:

$(this).dialog('destroy');

Если вынуть наш конкретный пух и собрать все вместе, это выглядит примерно так:

var prompt = 'Are you sure?';
$('<p>'+prompt+'</p>').dialog({
    autoOpen: true,
    draggable: false,
    modal: true,
    title: 'Save Data',
    dialogClass: 'no-close',
    open: function() {
        setTimeout(function() {
            $('#yesDialog').focus();
        }, 100);
    },
    buttons: [{
        text: 'Yes',
        click: function() {
            $(this).dialog('destroy');
            //...our fluff
        }, id: 'yesDialog'
    }, {
        text: 'No',
        click: function() {
            $(this).dialog('destroy');
        }
    }]
});
person Crazy Cat    schedule 14.08.2018