Диалоговое окно jQuery UI - не открывается после закрытия

79

У меня проблема с файлом jquery-ui dialog box.

Проблема в том, что, когда я закрываю диалоговое окно, а затем нажимаю ссылку, которая его запускает, оно не появляется снова, пока я не обновлю страницу.

Как мне вызвать диалоговое окно, не обновляя фактическую страницу.

Ниже мой код:

$(document).ready(function() {
    $('#showTerms').click(function()
    {
        $('#terms').css('display','inline');
        $('#terms').dialog({
            resizable: false,
            modal: true,
            width: 400,
            height: 450,
            overlay: { backgroundColor: "#000", opacity: 0.5 },
            buttons:{ "Close": function() { $(this).dialog("close"); } },
            close: function(ev, ui) { $(this).remove(); },
    }); 
});

благодаря

javascript jquery jquery-ui modal-dialog jquery-ui-dialog Дэвид Бонничи
источник

Ответы:

110

На самом деле вы должны использовать его $("#terms").dialog({ autoOpen: false });для его инициализации. Затем вы можете использовать, $('#terms').dialog('open');чтобы открыть диалоговое окно и $('#terms').dialog('close');закрыть его.

Шейн Фулмер
источник
1
Это прекрасно работает. Документы пользовательского интерфейса jQuery здесь не очень понятны. Но идея о том, что dialogфункция предназначена для инициализации, отображения и скрытия, имела для меня смысл. Благодарю.
Стив Купер,
Если вы загружаете это диалоговое окно из HTML, который может динамически изменяться, очень не интуитивно понятно, почему он не работает. У кого-нибудь есть хорошие решения, которые можно применить в целом к ​​этим ситуациям?
Milimetric
@Milimetric Вы всегда можете использовать $ (this) .remove (); функции в конце каждой из кнопок вашего диалога, таким образом весь диалог будет полностью переделан с нуля, когда вы вызовете его снова. Обратите внимание, что эта функция действует иначе, чем $ (this) .dialog ("destroy"); так как он только возвращает диалог в его состояние до инициализации, не разрушая объект.
Джефф Ноэль
14

Я решил это.

Я использовал функцию destroy вместо функции close (это не имеет никакого смысла), но она сработала.

$(document).ready(function() {
$('#showTerms').click(function()
{
    $('#terms').css('display','inline');
    $('#terms').dialog({resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
        close: function(ev, ui) { $(this).close(); },
    });         
});   
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
Дэвид Бонничи
источник
4
Destroy будет работать, если вы используете этот метод, но для того, чтобы close () работал, сначала создайте экземпляр диалога, затем используйте dialog.show (), чтобы показать его, затем dialog.close (), чтобы закрыть его, и он снова откроется без проблем. .
RaeLehman 06
6
Почти. Вы правы в том, что сначала инициировали его, но после этого это .dialog ("open") и .dialog ("close")
rdworth
12

в последней строке не $(this).remove()используйте $(this).hide()вместо этого use .

РЕДАКТИРОВАТЬ: Чтобы уточнить, при закрытии события щелчка вы удаляете #termsdiv из DOM, поэтому он не возвращается. Вместо этого вам просто нужно скрыть это.

Darko Z
источник
9

Я считаю, что вы можете инициализировать диалог только один раз. В приведенном выше примере выполняется попытка инициализировать диалоговое окно при каждом нажатии #terms. Это вызовет проблемы. Вместо этого инициализация должна происходить вне события щелчка. Ваш пример, вероятно, должен выглядеть примерно так:

$(document).ready(function() {
    // dialog init
    $('#terms').dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons: { "Close": function() { $(this).dialog('close'); } },
        close: function(ev, ui) { $(this).close(); }
    });
    // click event
    $('#showTerms').click(function(){
        $('#terms').dialog('open').css('display','inline');      
    });
    // date picker
    $('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

Я думаю, что как только вы это проясните, он должен исправить описанную вами проблему «открытие по ссылке».

26дизайн
источник
3

Для меня такой подход работает:

Диалог можно закрыть, щелкнув X в диалоговом окне или щелкнув «Bewaren». Я добавляю (произвольный) идентификатор, потому что мне нужно быть уверенным, что каждый бит html, добавленный в dom, впоследствии будет удален.

$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
        title: 'Opdracht wijzigen',
        show: 'clip',
        hide: 'clip',
        minWidth: 520,
        width: 520,
        modal: true,
        buttons: { 'Bewaren': dossier_edit_form_opslaan },
        close: function(event, ui){ 
                                  $(this).dialog('destroy'); 
                                  $('#dossier_edit_form_tmp_id').remove();
               }
});
Зильвердистель
источник
3 
 <button onClick="abrirOpen()">Open Dialog</button>

<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
       title: "Dialogo de UI",
       autoOpen: false,
       close: function(ev, ui){
               $(this).dialog("destroy");
       }
 function abrirOpen(){
       $dialogo.dialog("open");
 }
});

//**Esto funciona para mi... (this works for me)**
</script>
Джоанна Авалос
источник
3

Это очень старая ветка, но поскольку в ответе даже написано: «Это не имеет никакого смысла», я подумал, что добавлю ответ ...

В исходном посте использовалась $ (this) .remove (); в обработчике закрытия это фактически удалит div диалога из DOM. Попытка снова инициализировать диалог не сработает, потому что div был удален.

Использование $ (this) .dialog ('destroy') вызывает метод destroy, определенный в объекте диалога, который не удаляет его из DOM.

Из документации:

уничтожить ()

Полностью удаляет функциональность диалога. Это вернет элемент обратно в его >> состояние до инициализации. Этот метод не принимает никаких аргументов.

Тем не менее, уничтожайте или удаляйте только близко, если у вас есть для этого веская причина.

колыбель
источник
2 
$(this).dialog('destroy');

работает!

Бенедикт
источник
1

.close () является более общим и может использоваться по отношению к большему количеству объектов. .dialog ('close') можно использовать только с диалогами

Джон
источник
1

Я использую диалог как браузер и загрузчик диалоговых файлов, а затем переписываю код следующим образом

var dialog1 = $("#dialog").dialog({ 
              autoOpen: false, 
              height: 480, 
              width: 640 
}); 
$('#tikla').click(function() {  
    dialog1.load('./browser.php').dialog('open');
});

вроде все отлично работает.

Edib
источник
1

У меня была такая же проблема с диалоговым окном наложения jquery-ui - он работал только один раз, а затем останавливался, если я не перезагружаю страницу. Я нашел ответ в одном из их примеров -
несколько оверлеев на одной странице
flowplayer_tools_multiple_open_close
- кто бы мог, правда? :-) -

важная настройка оказалась 

oneInstance: false

Итак, теперь у меня это так - 

$(document).ready(function() {

 var overlays = null;

 overlays = jQuery("a[rel]");

 for (var n = 0; n < overlays.length; n++) {

    $(overlays[n]).overlay({
        oneInstance: false, 
        mask: '#669966',
        effect: 'apple',
        onBeforeLoad: function() {
            overlay_before_load(this);
        }
    });

  }

}

и все работает нормально

надеюсь, это кому-то поможет

О.

Олег Иванов
источник