2010-02-16 21 views
5

JQuery Dialog gibt mir in letzter Zeit viele Schmerzen. Ich habe das folgende div, das ich auftauchen möchte. (Ignorieren Sie, dass die Klassen zeigen nicht die doppelten Anführungszeichen in der Syntax)Jquery Dialog - Div verschwindet nach der Initialisierung

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> 

Die JQuery hierfür sind ...

$(document).ready(function() { 

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

}); 

Und der Dialog ‚open'ed von

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

} 

Das Problem beginnt in der Initialisierung selbst. Wenn das Dokument geladen wird, wird <div #confirmation> aus dem Markup gelöscht! Ich hatte ein ähnliches Problem früher, aber ich kann diese Lösung hier nicht verwenden. Auf dieser Seite kann ich mehrere PopUp divs haben.

Als ich die Initialisierung direkt vor dem Öffnen hinzugefügt habe; Das Formular tauchte auf. Aber nachdem ich es geschlossen habe, wird das div entfernt; Daher kann ich das Popup nicht mehr sehen.

+0

Haben Sie die Konsole in Firebug angeschaut, um zu sehen, ob es irgendwelche Fehler gibt? – Samuel

+0

Keine Fehler auf der Konsole – Zuber

+0

Warum verwenden Sie nicht nur jquery UI – ant

Antwort

3

Okay. Ich denke, ich habe es mit der Hilfe von euch genagelt.

Einige „selbstdefinierten“ Fakten über Dialog, die ich jetzt weiß (Bitte korrigieren, wenn ich falsch bin):

  1. Wenn ein <div> als Dialog initialisiert wird, es von seinem ursprünglichen Standort entfernt wird und in ein <body> Element in einem <div class="ui-dialog"> verschoben. So ist es 'natürlich' verschwindet.

  2. Um den Dialog auszuwählen, benötigen Sie nun eine eindeutige Kennung. Es kann die id in den meisten Fällen sein, oder einige andere Attribute auf diesem div, die es auf der Seite einzigartig macht.

  3. Das Dialogfeld Markup wird jedes Mal erstellt, wenn das Dialogfeld initialisiert wird. Im Fall von AJAX-Aufrufen, wenn ein bereits vorhandener Dialog initiiert wird, erhalten Sie das Popup mehr als einmal (so oft es neu initialisiert wurde). Um dies zu beheben, löschte ich die vorhandenen Dialogmarkierungen vor der Reinitialisierung. Ich musste dies tun, weil meine AJAX-Antwort einige Dialoge haben könnte, die initiiert werden müssen.

    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

Sind Sie sicher, dass ein und nur ein Div ID "Bestätigung" hat? Doppelte IDs sind nicht erlaubt.

+0

Funktioniert der JQuery-Dialog nur mit IDs? Können wir nicht etwas wie $ ('div.popup') .dialog ({..}) machen? Ab sofort bin ich sicher, dass die Seite eine einzige "Bestätigung" – Zuber

5

Der Grund, warum Sie sehen, #confirmation zu entfernen, ist, weil $("#foo").dialog() #foo von wo auch immer sich im DOM befindet, nach unten in das Dokument innerhalb von Wrapper-Elementen verschiebt, die das Dialog-Styling erzeugen, die anfangs verborgen sind. Es versteht sich, dass Dialoge bis zum Öffnen verborgen sind.

+0

Vielen Dank hatte. Das habe ich gerade erkannt. Ich denke, das Problem ist, dass ich das div wieder in meinem 'actionContext' suche. Aber Jquery hat dieses div jetzt außerhalb des Bereichs verschoben. Also, ist ID die einzige Möglichkeit, den Dialog zu öffnen? – Zuber

0

Die zugelassene Antwort arbeitete auch für mich. Ich benutzte:

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

und es war nicht da nach dem ersten Mal klicken.

nun die ID Ich bin mit direcly:

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

und natürlich, ganz gleich, wo Dialog bewegt er sich auf der Seite, wird dies es finden.

2

in meinem Fall eine einfache 'Rückkehr false;' in der Klick-Funktion hat der Trick:

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