jQuery UI modaler Dialog: Schaltflächensymbole werden nicht angezeigt

Question

Mein modaler Dialog funktioniert einwandfrei (dh ich kann jede Option anpassen), außer dass die Schaltflächensymboloption keine Auswirkung hat. Hier ist der Code, den ich benutze, um den Dialog zu generieren:

$('#alert_div') 
    .attr("title", "Delete all instances?") 
    .text("Are you sure you want to delete all instances of this event between the specificed dates? This cannot be undone.") 
    .dialog({ 
     modal: true, 
     draggable: false, 
     position: { my: "top", at: "center", of: window }, 
     buttons: [ 
      { 
       text: "No", 
       icons: { primary: "ui-icon-check" }, 
       click: function() { 
        $(this).dialog('close'); 
        console.log('Clicked no.'); 
       } 
      }, 
      { 
       text: "Yes", 
       click: function() { 
        $(this).dialog('close'); 
        console.log('Clicked yes'); 
       } 
      } 
     ] 
    }); 

Ich habe jede relevante Stack Overflow Frage, die ich finden konnte - z. this one. Abgesehen davon, dass ich ein Element an den offenen Knopf anschließe, weiß ich nicht, wie ich das lösen soll. Wenn ich Elemente an anderer Stelle im Dokument erstelle und ihnen die richtige Klasse gebe, erscheinen die Symbole richtig.

Hier ist die HTML jQuery für die Schaltfläche erzeugt, wenn der Dialog geöffnet wird:

<div class="ui-dialog-buttonset"><button type="button" icons="[object Object]" class="ui-button ui-corner-all ui-widget">OK</button></div> 

ich dort gehe davon sollte als etwas anderes sein ‚[object Object] in den Symbolen zuzuordnen. Warum passiert dies? Ich benutze jQuery UI v. 1.12.0 und jQuery v. 3.0.0., Und ich verwende kein Bootstrap.

Answer 1

jQuery UI 1.12 eingeführt eine new syntax for button icons, die ich behebt dieses Problem bestätigt (siehe this jsFiddle). Derzeit akzeptiert es die veralteten Optionen nicht. a PR has been submitted, um das zu beheben. Details finden Sie unter my bug report. Der folgende Code funktioniert mit jQuery UI 1.12 und jQuery 3.1.0:

$("#alert_div") 
.attr("title", "Error") 
.text("Please choose a calendar and enter both start and end dates.") 
.dialog({ 
    modal: true, 
    draggable: false, 
    resizable: false, 
    position: { my: "top", at: "top", of: window }, 
    buttons: [{ 
     text: "OK", 
     icon: "ui-icon-check", 
     click: function() { 
      $(this).dialog("close"); 
     } 
    }] 
}); 

Answer 2

Anscheinend ist das Problem ein Fehler in jquery-ui 1.12.0. Wenn Sie 1.11.4 für 1.12.0 in Ihrer Geige ersetzen, verschwindet das Problem.

Ich habe Ihren Code (den Code, den Sie oben veröffentlicht, nicht den Code in Ihrer Geige) in meiner eigenen Testumgebung, und alles hat gut funktioniert. (Ich habe 1.11.4 im Mai heruntergeladen, als es die letzte stabile Version war.) Es scheint, dass die Methode button() nicht aufgerufen wird, wenn dialog() aufgerufen wird. Wie Sie richtig vermuten, sollte es kein object Object im icons Element geben. Mein Knopfcode sieht so aus:

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icons" role="button"> 
    <span class="ui-button-icon-primary ui-icon ui-icon-check"></span> 
    <span class="ui-button-text">No</span> 
    <span class="ui-button-icon-secondary ui-icon ui-icon-circle-check"></span> 
</button> 

Sieht aus wie das ist vielleicht ein "echter echter Fehler" in jQuery-UI 1.12.0. :)

Bearbeiten: sieht aus wie dies tatsächlich ist ein "echtes echtes Feature" in jQuery-UI 1.12.0, zusammen mit einer Vielzahl anderer Änderungen, von denen einige die Kompatibilität mit früheren Versionen brechen. Siehe Harpo's Link "neue Syntax". Jeder, der Menüs (vor allem Menüs, alte Menüs) nicht mehr benutzt, Radiobuttons/Checkboxen oder ein paar andere Dinge, wird es lesen wollen.

Um zwei Symbole auf einer Schaltfläche zu erhalten, ist es immer noch mit der neuen Syntax möglich, aber Sie können es nicht mit dem buttons Parameter in der dialog() Methode. Stattdessen müssen Sie die Schaltfläche auf die übliche Weise ausführen, indem Sie für die Symbole Bereiche hinzufügen. (Das Upgrade-Dokument besagt, dass Sie einfach den zweiten Symbolbereich in das Markup einfügen und den Parameter icon für das primäre Symbol verwenden können. Dies konnte ich jedoch in diesem Kontext nicht ausführen.) für das Markup:

<div id="alert_div"> 
    <button id="okButton"> 
     <span class="ui-icon ui-icon-check"></span> 
     Ok 
     <span class="ui-icon ui-icon-circle-check"></span> 
    </button> 
</div> 

Und dann:

$('#alert_div').dialog({ 
    open: function(e, ui) { 
     $('#okButton') 
     .button() 
     .on('click', function() { 
      $(this).dialog('close'); 
     }); 
    } 
}); 

Answer 3

Bitte sehen Sie dies für das Beispiel ist, können wir jede Sache, es zu tun ..

Verwendung Stil zu Änderungen in sie macht ...

Danke ... :)