Okno dialogowe jquery - div znika po inicjalizacji

JQuery Dialog ostatnio sprawia mi wiele bólu. Mam następujące div, które chcę być pojawiały się. (Ignore że klasy nie wykazują cudzysłowów w składni)Okno dialogowe jquery - div znika po inicjalizacji

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 za to jest ...

$(document).ready(function() { 

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

});

A dialogowe „open'ed przez

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

}

Problem zaczyna się w samej inicjalizacji. Po załadowaniu dokumentu, <div #confirmation> jest usuwany ze znaczników! Miałem podobny problem wcześniej, ale nie mogę użyć tego rozwiązania tutaj. Na tej stronie mogę mieć wiele elementów div PopUp.

Po dodaniu inicjalizacji tuż przed otwarciem; formularz pojawił się. Ale po jego zamknięciu, div jest usuwany; więc nie mogę ponownie zobaczyć wyskakującego okienka.

Źródło

2010-02-16 Zuber

Czy obejrzałeś konsolę w firebugie, aby zobaczyć, czy są jakieś błędy? – Samuel

Brak błędów na konsoli – Zuber

Dlaczego po prostu nie użyjesz jquery ui – ant

OK. Myślę, że przybiłem go z pomocą was.

Niektóre „self-defined” faktów o oknie, które teraz wiem (proszę poprawić jeśli się mylę):

Kiedy <div> jest inicjowany jako dialog, jest on usuwany z pierwotnej lokalizacji i przeniesiono do elementu <body> w postaci <div class="ui-dialog">. Tak więc "naturalnie" znika.
Aby wybrać okno dialogowe, potrzebny jest teraz unikalny identyfikator. W większości przypadków może to być id lub inne atrybuty tego elementu div, co czyni go unikalnym na stronie.

Znaczniki dialogowe są tworzone przy każdym zainicjowaniu okna dialogowego. Tak więc, w przypadku wywołań AJAX, jeśli zostanie zainicjowane już okno dialogowe, otrzymasz popup więcej niż raz (tyle razy, ile zostało ono ponownie zainicjowane). Aby rozwiązać ten problem, usunąłem istniejące znaczniki dialogowe przed ponownym wprowadzeniem. Musiałem to zrobić, ponieważ moja odpowiedź AJAX może mieć kilka dialogów, które należy zainicjować.

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


});

}

Źródło

2010-02-16 13:51:16 Zuber

Czy jesteś pewien, że jeden i tylko jeden element div ma identyfikator "potwierdzenie"? Zduplikowane identyfikatory są niedozwolone.

Źródło

2010-02-16 12:59:26 kgiannakakis

Czy okno dialogowe JQuery działa tylko na identyfikatorach? Czy nie możemy zrobić czegoś takiego jak okno dialogowe $ ("div.popup"). ({..})? Od teraz jestem pewien, że strona miała jedno "potwierdzenie" – Zuber

Powód, dla którego go widzisz, usuwa #confirmation, ponieważ $("#foo").dialog() przeniesie # foo z dowolnego miejsca w DOM na spód dokumentu wewnątrz elementów opakowania, które utworzą styl okna dialogowego, który jest początkowo ukryty. Rozumie się, że dialogi są ukryte, dopóki nie zostaną otwarte.

Źródło

2010-02-16 13:34:18

Dzięki. Właśnie to sobie uświadomiłem. Myślę, że problem polega na tym, że ponownie szukam div w moim "actionContext". Ale Jquery przeniósł ten element teraz poza zakresem. Czy identyfikacja jest jedynym sposobem na otwarcie okna dialogowego? – Zuber

Zatwierdzona odpowiedź pracował dla mnie. Używałem:

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

i nie było go po kliknięciu za pierwszym razem.

Teraz używam identyfikator direcly:

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

i oczywiście bez względu na to gdzie dialogowe przenosi go na stronie, to będzie go znaleźć.

Źródło

2012-07-12 18:18:01 sigmapi13

w moim przypadku prosty "return false;" w funkcji kliknięcia udało się:

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

Źródło

2013-09-20 23:56:06 user88243

Okno dialogowe jquery - div znika po inicjalizacji

Odpowiedz

Powiązane problemy