it-swarm.com.ru

диалоговое окно 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(); },
    }); 
});

Спасибо

79
David Bonnici

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

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

$(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
David Bonnici

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

110
Shane Fulmer

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

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

12
Darko Z

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

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

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

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

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

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

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

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

3
crad

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

Диалоговое окно можно закрыть, щелкнув 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
Zilverdistel
$(this).dialog('destroy');

работает!

2
Benedikt

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

1
John

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

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

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

1
edib

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

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

0
Barka