Диалог JQuery - div исчезает после инициализации

В последнее время JQuery Dialog доставляет мне много боли. У меня есть следующий div, который я хочу вывести. (Не обращайте внимания на то, что классы не показывают двойные кавычки в синтаксисе)

TABLE class=widget-title-table border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
    <TD class=widget-title><SPAN class=widget-title>Basic Info</SPAN></TD>
    <TD class=widget-action>
    <DIV id=edit-actions jQuery1266325647362="3">
        <UL class="linkbutton-menu read-mode">
            <LI class="control-actions">
                <A id="action-button" class="mouse-over-pointer linkbutton">Delete this                 stakeholder</A> 
            <DIV id="confirmation" class="confirmation-dialog title=Confirmation">
                Are you sure you want to delete this stakeholder? 
            </DIV>

</LI></UL></DIV></TD></TR></TBODY></TABLE>

JQuery для этого ...

$(document).ready(function() {

$('#confirmation').dialog({
    bgiframe: true, modal: true, autoOpen: false, closeOnEscape: false,
    draggable: true, position: 'center', resizable: false, width: 400, height: 150
    });

});

И диалог открывается

var confirmationBox = $('#confirmation',actionContent);
if (confirmationBox.length > 0) {


    //Confirmation Needed
    $(confirmationBox).dialog('option', 'buttons', {
        'No': function() {
            $(this).dialog('close');
        },
        'Yes': function() {
            $('ul.read-mode').hide();
            $.post(requestUrl, {}, ActionCallback(context[0], renderFormUrl), 'json');
            $(this).dialog('close');
        }            
    });

    $(confirmationBox).dialog('open');

}

Проблема начинается в самой инициализации. Когда документ загружается, <div #confirmation> удаляется из разметки! У меня была аналогичная проблема раньше, но я не могу использовать это решение здесь. На этой странице у меня может быть несколько блоков PopUp.

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


jquery modal-dialog jquery-ui-dialog
person Zuber    schedule 16.02.2010    source источник
comment
Вы смотрели консоль в firebug, чтобы узнать, есть ли ошибки?   -  person Samuel    schedule 16.02.2010
comment
На консоли нет ошибок   -  person Zuber    schedule 16.02.2010
comment
Почему бы вам просто не использовать jquery ui   -  person ant    schedule 16.02.2010
comment
Я использую JQuery UI; по крайней мере, я так думаю. .dialog () находится в структуре JqueryUI.   -  person Zuber    schedule 16.02.2010

Ответы (5)


arrow_upward
5
arrow_downward

Причина, по которой вы видите, что он удаляет #confirmation, заключается в том, что $("#foo").dialog() переместит #foo из любого места в DOM в нижнюю часть документа внутри элементов оболочки, которые создают стиль диалога, который изначально скрыт. Понятно, что диалоги скрыты, пока не откроются.

person Sam Hasler    schedule 16.02.2010
comment
Спасибо. Я только что это понял. Я думаю, проблема в том, что я снова ищу div в своем «actionContext». Но Jquery переместил этот div за пределы области видимости. Итак, является ли идентификатор единственным способом открыть диалоговое окно? - person Zuber; 16.02.2010

arrow_upward
3
arrow_downward

Хорошо. Думаю, я добился этого с помощью вас, ребята.

Некоторые "самоопределяемые" факты о диалоге, которые я знаю сейчас (исправьте, если я ошибаюсь):

  1. Когда <div> инициализируется как диалог, он удаляется из исходного положения и перемещается в элемент <body> в <div class="ui-dialog">. Так что это «естественно» исчезает.

  2. Чтобы выбрать диалог, теперь вам нужен уникальный идентификатор. В большинстве случаев это может быть id или другие атрибуты этого div, которые делают его уникальным на странице.

  3. Разметка диалога создается каждый раз при инициализации диалога. Таким образом, в случае вызовов AJAX, если инициирован уже существующий диалог, вы получите всплывающее окно более одного раза (столько раз, сколько раз оно было повторно инициализировано). Чтобы решить эту проблему, я удалил существующие диалоговые разметки перед повторной инициализацией. Мне пришлось это сделать, потому что в моем ответе AJAX могут быть некоторые диалоги, которые необходимо запустить.

    function InitializeConfirmationDialog() {
    $('div.confirmation-dialog').each(function() {
    var id = $(this).attr("id");
    if ($('div.ui-dialog-content[id="' + id + '"]').length > 0) {
        $('div.ui-dialog-content[id="' + id + '"]').parents('div.ui-dialog:first').html("").remove();                
    }
    $(this).dialog({
        bgiframe: true, modal: true, autoOpen: false, closeOnEscape: false,
        draggable: true, position: 'center', resizable: false, width: 400, height: 150
    });


});

    }

person Zuber    schedule 16.02.2010

arrow_upward
3
arrow_downward

в моем случае простое «return false»; в функции щелчка сделали свое дело:

  $("#buttonIdThatOpensTheDialogWhenClicked")
         .button()
         .click(function () {
                $("#myDialog").dialog("open");
                return false;
         });
  });
person user88243    schedule 20.09.2013

arrow_upward
0
arrow_downward

Вы уверены, что у одного-единственного div есть "подтверждение" идентификатора? Повторяющиеся идентификаторы не допускаются.

person kgiannakakis    schedule 16.02.2010
comment
Диалог JQuery работает только с идентификаторами? Разве мы не можем сделать что-то вроде $ ('div.popup'). Dialog ({..})? На данный момент я уверен, что на странице было единственное подтверждение - person Zuber; 16.02.2010

arrow_upward
0
arrow_downward

Утвержденный ответ у меня тоже сработал. Я использовал:

$('.myLink').click(function(){
    $(this).next().dialog(...)
});

и его не было после первого нажатия.

Теперь я использую ID напрямую:

$("#myId").dialog(...)

и, очевидно, независимо от того, куда диалог перемещает его на странице, он его найдет.

person sigmapi13    schedule 12.07.2012