Jquery Dialog - div исчезает после инициализации - PullRequest
Новая
       19

Jquery Dialog - div исчезает после инициализации

5 голосов
/ 16 февраля 2010

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> удаляется из разметки! У меня была похожая проблема ранее, но я не могу использовать это решение здесь. На этой странице я могу иметь несколько всплывающих окон.

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

Ответы [ 5 ]

5 голосов
/ 16 февраля 2010

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

3 голосов
/ 16 февраля 2010

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

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

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

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

  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
    });


});

    }

2 голосов
/ 21 сентября 2013

в моем случае простое возвращение «ложь»; в функции щелчка сделал трюк: 

  $("#buttonIdThatOpensTheDialogWhenClicked")
         .button()
         .click(function () {
                $("#myDialog").dialog("open");
                return false;
         });
  });
0 голосов
/ 12 июля 2012

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

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

и его не было после первого щелчка.

Теперь я использую идентификатор прямо: 

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

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

0 голосов
/ 16 февраля 2010

Вы уверены, что один и только один div имеет идентификатор "подтверждение"? Дублирующиеся идентификаторы не допускаются.

...