2010-02-16 3 views
5

JQuery Dialog дает мне много боли в последнее время. У меня есть следующий 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 
    }); 

}); 

И диалог «open'ed по

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 удаляется; поэтому я больше не могу видеть всплывающее окно.

+0

Вы посмотрели на консоль в firebug, чтобы узнать, есть ли какие-либо ошибки? – Samuel

+0

Нет ошибок, отображаемых на консоли – Zuber

+0

Почему бы вам просто не использовать jquery ui – ant

ответ

3

Хорошо. Кажется, я прикрепил его с помощью вас, ребята.

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

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

    }

0

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

+0

Работает ли JQuery Dialog только на ID? Не можем ли мы сделать что-то вроде диалога $ ('div.popup'). ({..})? На данный момент я уверен, что на странице было одно «подтверждение» – Zuber

5

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

+0

Спасибо. Я просто это понял. Я думаю, проблема в том, что я снова ищу div в моем «actionContext». Но JQuery переместил этот div вне рамки. Итак, это ID, единственный способ открыть диалог? – Zuber

0

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

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

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

Теперь я буду с помощью ID direcly:

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

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

2

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

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