Ich arbeite an einer Web-App, die die jQuery-Benutzeroberfläche verwendet und eine Menge Dialoge erstellt. Die Dialoge sind alle unterschiedlich, und die Schaltfläche zum Schließen des Dialogs kann dazu führen, dass mehrere Divs in den Dialog eingebettet werden.

Ich möchte eine Funktion, die den enthaltenen Dialog immer schließt.

Nehmen Sie zum Beispiel das folgende HTML:

<div id="demoDialog">
   <div>
      <div id='demoDialogSubmit'>
         <input type='submit' onClick='selfCloseDialog();' value='Ok' style='margin-top:10px' />
      </div>
   <div>
<div>

Irgendwo in meinem js-Code habe ich dies als Dialog initialisiert:

$( "#demoDialog" ).dialog( params );

Jetzt für den On-Click habe ich ein paar nicht so gute Möglichkeiten. Ich könnte darauf bestehen, dass die Schaltfläche zum Schließen die ID des Dialogs kennt. Z.B. mach so etwas wie:

onclick="$( '#demoDialog' ).dialog( 'close' );"

Aber ich hätte lieber generischen Code, anstatt immer die ID des Dialogs herumtragen zu müssen, damit ich ihn an ein Widget senden kann, das ihn möglicherweise schließt.

Oder ich kann mich erinnern, wie viele Schichten ich unten bin:

function selfCloseDialog() { $(this).parent().dialog( 'close' ); }

Aber ich möchte wirklich, dass selfCloseDialog () nur die Ebenen von Elementen aufspürt, die nach dem zu schließenden Dialogobjekt suchen. Wie mache ich das?

@Aktualisieren:

Also habe ich es zum Laufen gebracht. Vielen Dank an alle für ihre Vorschläge. Das Problem hatte tatsächlich zwei Probleme.

Das erste Problem war hier:

<input type='submit' onClick='selfCloseDialog();' value='Ok'/>

Es sollte sein:

<input type='submit' onClick='selfCloseDialog(this);' value='Ok'/>

Das Schaltflächenelement wird nicht als "this" -Argument an die Funktion übergeben. Was jetzt offensichtlich scheint.

Und die folgende direkte Methode JAAulde funktioniert und scheint die sauberste zu sein:

function selfCloseDialog( caller ) {
   $(caller).closest( ".ui-dialog-content" ).dialog('close');
}

Es gab mehrere Antworten mit dem nächsten und einem Selektor - aber ich sehe keinen Grund, etwas anderes als den von ihm vorgeschlagenen einfachen Klassenselektor zu verwenden.

1
Rafael Baptista 10 Okt. 2012 im 04:10

5 Antworten

Beste Antwort

Fügen Sie beim Erstellen Ihres Dialogfelds eine Schaltfläche zum Schließen hinzu:

var params = {
    //whatever you already had in there
    buttons: {
        // In the buttons object, the "key" will be the button text, the function
        // will be executed on click of the button in scope of the dialoged element
        Close: function () {
            $(this).dialog('close');
        }
    }
};

$( "#demoDialog" ).dialog( params );

Führen Sie aus dem Code, der im Bereich eines beliebigen untergeordneten Elements des Dialogelements ausgeführt wird, Folgendes aus:

$(this).closest('.ui-dialog-content').dialog('close');
2
JAAulde 10 Okt. 2012 im 12:42

Ich bin mir nicht sicher, ob ich genau verstehe, was Sie fragen, aber es scheint der einfachste Weg zu sein, allen Ihren Dialogen eine Standardklasse hinzuzufügen und dann Code wie folgt zu haben:

$(this).closest('.dialog-class').dialog('close');

Next () ist hier definiert:

http://api.jquery.com/closest/

1
matthew.tuck 10 Okt. 2012 im 00:17

Ich würde vorschlagen, eine Klasse zu verwenden, anstatt Inline-Funktionsaufrufe zu schreiben, aber das liegt bei Ihnen.

Hier ist meine hackige Lösung mit Ereignisdelegierung, bei der durch Klicken auf ein Element mit der Klasse selfclose der Vorgängerdialog geschlossen wird:

$(document).on('click', '.selfclose', function() {
    $(this).parents().each(function() {
        try {
            $(this).dialog('close');
        } catch(e) {}
    });
});

Geige

Wie DefyGravity bereits erwähnt hat, ist die Verwendung des Selektors :ui-dialog eine viel sauberere Lösung:

$(document).on('click', '.selfclose', function() {
    $(this).closest(":ui-dialog").dialog("close");
});

Geige

0
Fabrício Matté 10 Okt. 2012 im 00:37

* aktualisiert, um den Ajax-Teil des Dialogs wiederzugeben. * aktualisiert, um Kommentare wiederzugeben

<div id="soemthing.random.ui.dialog.makes">
.... your content....
<a class='custom-close' href="#Close">Custom Close</a>
.... 
</div>

$(function(){
  $("your selector").dialog();
  var selector = ":ui-dialog";
//developers choice.  ".ui-dialog-content" is faster, ":ui-dialog" is guaranteed
  $(selector ).on({
   "click":function(event){
     event.preventDefault();
     $(this).closest(selector).dialog("close");
   }
  },"a.custom-close",null);

})
1
DefyGravity 10 Okt. 2012 im 16:07

Überprüfen Sie dies: http://jsfiddle.net/Wqh4Y/3/

function closeParentDialog(closeButton)
{
closeButton.parents('.ui-dialog').eq(0).find('a.ui-dialog-titlebar-close').eq(0).click();

}

$(function() {


    $( "#dialog" ).dialog();

});​

Sie können es so verwenden:

     <div id="dialog" title="Basic dialog">
        <p>This is the default dialog which is useful for displaying information. The dialog   window can be moved, resized and closed with the 'x' icon.

          <span> <a class="close-dialog" onclick="closeParentDialog($(this))">selfclose</a>  </span>
        </p>
     </div>
-1
ygaradon 10 Okt. 2012 im 00:48