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

Дякую

Ви насправді повинні використовувати його $("#terms").dialog({ autoOpen: false });для ініціалізації. Потім ви можете використовувати, $('#terms').dialog('open');щоб відкрити діалогове вікно та $('#terms').dialog('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' });
});

в останньому рядку не використовуйте $(this).remove()use$(this).hide() замість цього .

РЕДАКТУВАТИ: щоб пояснити, під час закриття події ви видаляєте #termsdiv з DOM, тому він не повертається. Натомість потрібно просто приховати це.

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

Я думаю, що як тільки ви це зрозумієте, це має вирішити проблему "відкрити за посиланням", яку ви описали.

Для мене такий підхід працює:

Діалогове вікно можна закрити, натиснувши 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();
               }
});

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

Це надзвичайно стара тема, але оскільки у відповіді навіть сказано: "Це не має ніякого сенсу", я думав додати відповідь ...

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

Використання $ (this) .dialog ('знищити') викликає метод знищення, визначений у діалоговому об'єкті, який не видаляє його з DOM.

З документації:

знищити ()

Повністю видаляє функціональність діалогового вікна. Це поверне елемент назад у його попередній стан >> >>. Цей метод не приймає жодних аргументів.

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

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

працює!

.close () є загальним і може використовуватися для посилання на більше об'єктів. .dialog ('закрити') можна використовувати лише з діалоговими вікнами

Я використовую діалогове вікно як браузер і завантажувач діалогових файлів, після чого я переписую код таким чином

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

все, здається, працює чудово.

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

  }

}

і все працює просто чудово

сподіваюся, це комусь допоможе

О.

Документація jQuery містить посилання на цю статтю „ Основне використання діалогового вікна інтерфейсу jQuery ”, яке пояснює цю ситуацію та способи її вирішення.