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

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

Спасибо

14.12.2008 19:09:21
12 ОТВЕТОВ

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

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

12
14.12.2008 19:37:11
РЕШЕНИЕ

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

Вместо этого я использовал функцию уничтожения (это не имеет никакого смысла), но это сработало!

$(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' });
});
14
14.02.2009 07:58:05
Destroy будет работать, если вы используете этот метод, но чтобы заставить close () работать, сначала создайте экземпляр диалогового окна, затем используйте dialog.show (), чтобы показать его, затем dialog.close (), чтобы закрыть его, и он откроется снова без проблем. ,
RaeLehman 6.01.2009 15:28:06
Почти. Вы правы в том, что инициализируете его сначала, но после этого это .dialog («открыть») и .dialog («закрыть»)
rdworth 7.01.2009 04:27:15
$(this).dialog('destroy');

работает!

2
13.04.2009 22:29:53

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

110
13.04.2009 22:43:16
Это работает отлично. Документы пользовательского интерфейса jQuery здесь не очень понятны. Но идея, что dialogфункция предназначена для инициализации, показа и скрытия, имела для меня смысл. Спасибо.
Steve Cooper 20.06.2009 22:52:23
Если вы загружаете это диалоговое окно из HTML, которое может динамически изменяться, очень не понятно, почему оно не работает. У кого-нибудь есть хорошие решения, которые могут быть применены в общем случае в таких ситуациях?
Milimetric 17.08.2011 20:14:04
@Milimetric Вы всегда можете использовать $ (this) .remove (); Функция в конце каждой из кнопок вашего диалога, таким образом, весь диалог будет полностью переделан с нуля при повторном вызове. Обратите внимание, что эта функция действует не так, как $ (this) .dialog ("destroy"); так как он только устанавливает диалог в его состояние перед инициализацией, не разрушая объект.
Jeff Noel 26.07.2012 18:36:43

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

$(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' });
});

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

9
27.10.2009 23:40:29

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

1
28.01.2010 14:50:52

В документации jQuery есть ссылка на эту статью « Основное использование диалогового окна jQuery UI », которая объясняет эту ситуацию и способы ее решения.

0
10.12.2011 06:32:42

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

Диалоговое окно можно закрыть, щелкнув X в диалоговом окне или нажав «Осторожно». Я добавляю (произвольный) идентификатор, потому что мне нужно быть уверенным, что каждый бит 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
6.09.2011 11:50:51

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

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

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

1
27.09.2010 13:42:23

У меня была та же проблема с диалоговым окном наложения 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);
        }
    });

  }

}

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

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

О.

1
10.12.2011 06:59:50
 <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
7.12.2012 11:22:40

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

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

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

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

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

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

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

3
23.10.2013 16:57:42