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

Question

У меня проблема с 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(); }, 
    }); 
}); 

Благодаря

Answer 1

Привет, ребята, мне удалось это решить.

Я использовал функцию 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' }); 
}); 

Answer 2

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

EDIT: Чтобы уточнить, при закрытии события click вы удаляете #terms div из DOM, поэтому его не возвращают. Вам просто нужно скрыть это.

Answer 3

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

работает!

Answer 4

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

Answer 5

Я считаю, что вы можете только инициализировать диалог один раз. Приведенный выше пример пытается инициализировать диалог каждый раз, когда нажимается #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' }); 
}); 

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

Answer 6

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

Answer 7

Документация JQuery имеет ссылку на эту статью «Basic usage of the jQuery UI dialog» , который объясняет эту ситуацию и как ее устранить.

Answer 8

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

диалоговое окно может быть закрыто нажатием на 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(); 
       } 
}); 

Answer 9

Я использую диалог как диалоговый файловый браузер и пользователь, то я переписать код, как этого

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

все кажется, отлично работает.

Answer 10

У меня была такая же проблема с диалоговым окном jquery-ui overlay - он работал бы только один раз, а затем останавливался, если я не перезагружу страницу. Я нашел ответ в одном из своих примеров:
Несколько накладок на одной странице
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); 
     } 
    }); 

    } 

} 

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

надеюсь, что это поможет кому-то ОКТЯБРЬ

Answer 11

<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> 

Answer 12

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

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

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

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

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

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

Тем не менее, только уничтожить или удалить при закрытии, если у вас есть хороший повод.