jQuery UI Dialogfeldschaltfläche Text als Variable

Question

Kann mir jemand sagen, wie kann ich eine Variable für Schaltfläche Text in jQuery UI-Dialog verwenden? Ich möchte einen dynamischen Button-Namen machen.

Answer 1

var buttonName = "something"; 
$('#button-id').attr('value', buttonName); 

Answer 2

Dies wird nicht wegen der Art und Weise arbeitet jQuery die Namen der Schaltfläche behandelt (mit oder ohne Anführungszeichen gesetzt werden kann)

Dies funktioniert:

var button_name = 'Test'; 
var dialog_buttons = {}; 
dialog_buttons[button_name] = function(){ closeInstanceForm(Function); } 
dialog_buttons['Cancel'] = function(){ $(this).dialog('close'); } 
$('#instanceDialog').dialog({ buttons: dialog_buttons }); 

Answer 3

Das Problem hierbei ist, dass die dialog plugin weist seinen Buttons keine ID zu, so dass es sehr schwierig ist, sie direkt zu ändern.

Stattdessen initialisieren Sie den Dialog wie gewohnt, suchen Sie die Schaltfläche nach dem darin enthaltenen Text und fügen Sie eine ID hinzu. Die Taste kann dann direkt zugegriffen werden, um den Text zu ändern, Formatierung aktivieren/deaktivieren, usw.

$("#dialog_box").dialog({ 
buttons: { 
    'ButtonA': function() { 
     //... configure the button's function 
    } 
}); 
$('.ui-dialog-buttonpane button:contains(ButtonA)').attr("id","dialog_box_send-button");    
$('#dialog_box_send-button').html('Send')  

Answer 4

Diese arbeiten $($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");

Answer 5

Und vergessen Vielleicht nicht

$($("button", $(".info_dialog").parent())[1]).html("<span class='ui-button-text'>Button text here.</span>"); 

Answer 6

Ich vermisse den Punkt - aber wäre es nicht der einfachste Weg, den Setter zu benutzen?

 $("#dialog_box").dialog({ 
     buttons: { 
     [ 
      text:"OK", 
      click: function() { 
       //... configure the button's function 
      } 
     ] 
     }); 

     $("#dialog_box").dialog("option", "buttons", { "Close": function() { $(this).dialog("close"); } }); 

Answer 7

weisen Sie der Schaltfläche eine Klasse zu. Der Schaltflächentext befindet sich in einer Spanne mit der Klasse ui-button-text innerhalb Ihrer definierten Klasse. Also, wenn Sie Ihre Taste der Klasse geben .contacts-dialog-search-button dann den Code der Text zugreifen wird:

$('.ui-button-text','.contacts-dialog-search-button').text(); 

hier ist der Code ich für meine aktuellen Projekte Tasten verwenden, können Sie ein Beispiel zu geben.

buttons : [ 
      { 
       text : 'Advanced Search', 
       click : function(){ 
        if($(this).dialog("option", "width")==290){ 
         $('#contacts-dialog-search').show(); 
         $(this).dialog("option", "width", 580); 
         $('.ui-button-text','.contacts-dialog-search-button').text('Close Search'); 
        } 
        else{ 
         $('#contacts-dialog-search').hide(); 
         $(this).dialog("option", "width", 290); 
         $('.ui-button-text','.contacts-dialog-search-button').text('Advanced Search'); 
        } 
       }, 
       "class" : "contacts-dialog-search-button" 
      } 
      ] 

Answer 8

Ja durchaus möglich, mit Inline-Verhalten:

1. Erstellen Dialog-Klasse mit zwei Setter-Methode, setYesButtonName() und setNoButtonName.

---

 function ConfirmDialog() { 
      var yesButtonName = "Yes"; 
      var noButtonName = "No"; 
      this.showMessage = function(message, callback, argument) { 
       var $dialog = $('<div></div>') 
        .html(message) 
        .dialog({ 
         modal: true, 
         closeOnEscape: true, 
         buttons: [ 
          { 
           text:yesButtonName, 
           click: function() { 
            if (callback && typeof(callback) === "function") { 
             if (argument == 'undefined') { 
              callback(); 
             } else { 
              callback(argument); 
             } 
            } else { 
             $(this).dialog("close"); 
            } 
           } 
          }, 
          { 
           text:noButtonName, 
           click: function() { 
            $(this).dialog("close"); 
           } 

          } 
         ] 
        }); 
       $dialog.dialog("open"); 
      }; 

      this.setYesButtonName = function(name) { 
       yesButtonName = name; 
       return this; 
      }; 

      this.setNoButtonName = function(name) { 
       noButtonName = name; 
       return this; 
      }; 
     } 

---

1. Objekt von ConfirmDialog Klasse erstellen.

   this.CONFIRM_DIALOG = new ConfirmDialog(); 
   

2. Anruf auf jeden Fall Methode, sagen wir mal Onclick()

   OK_DIALOG.setYesButtonName('Wana Marry').showMessage('Worst Idea!!'); 
   

Arbeit erledigt !!

Answer 9

Was Sie tun können, ist die Schaltfläche im Dialogfeld eine ID zuweisen und dann mit Standard-jQuery manipulieren.

$("#dialog_box").dialog({ 
    autoOpen: false, 
    modal: true, 
    resizable: false, 
    buttons: [{ 
     text: "Ok", 
     "id": "btnOk", 
     click: function() { 
      //okCallback(); 
     }, 

    }, { 
     text: "Cancel", 
     click: function() { 
      //cancelCallback(); 
     }, 
    }], 
    close: function() { 
     //do something 
    } 
}); 

Set-Taste Text:

var newLabel = "Updated Label"; 
$("#btnOk").html('<span class="ui-button-text">'+ newLabel +'</span>') 

Answer 10

1. The button option im Dialog jQuery UI-Objekte und Arrays akzeptiert.
2. Die Schaltflächen sind Instanzen der button widget. Verwenden Sie die API, anstatt die Schaltflächen selbst zu bearbeiten.

$(function() { 
 
    // using textbox value instead of variable 
 
    $("#dialog").dialog({ 
 
    buttons: [ 
 
     { text: $("#buttonText0").val(), click: function() { $(this).dialog("close"); } }, 
 
     { text: $("#buttonText1").val(), click: function() { $(this).dialog("close"); } } 
 
    ] 
 
    }); 
 
    $("#updateButtonText").on("click", function() { 
 
    var $buttons = $("#dialog").dialog("widget").find(".ui-dialog-buttonpane button"); 
 
    console.log($buttons, $buttons.eq(0), $buttons.eq(1)); 
 
    $buttons.eq(0).button("option", "label", $("#buttonText0").val()); 
 
    $buttons.eq(1).button("option", "label", $("#buttonText1").val()); 
 
    // few more things that you can do with button widget 
 
    $buttons.eq(0).button("option", "icons", { primary: "ui-icon-check" }); 
 
    $buttons.eq(1).button("disable"); 
 
    }); 
 
});

@import url("http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 

 
<div id="dialog" title="Sample Dialog"> 
 
    <p>Proceed?</p> 
 
</div> 
 

 
<p style="text-align: center;"> 
 
    <input type="text" id="buttonText0" value="OK"> 
 
    <input type="text" id="buttonText1" value="Cancel"> 
 
    <input type="button" id="updateButtonText" value="Update Button Text"> 
 
</p>

Answer 11

Dies kann in folgenden Schritten erfolgen:

1. In JavaScript Sie Array von Schaltflächen erstellen können.
2. Setzen Sie die buttons -Eigenschaft auf das Array von Schaltflächen.

Folgendes Beispiel erklärt die obigen Schritte.

1. Zwei Schaltflächen sind in btnArray wie folgt definiert;

var btnArray = [ 
    { text: "Add Entry", 
     click: function(){ 
     this.retVal = true; 
     addRowIntoTemplateManifest(); 
     $(this).dialog('close'); 
     } 
    }, 
    { text: "Cancel", 
     click: function(){ 
     this.retVal = false; 
     $(this).dialog('close'); 
     } 
    } 
    ]; 

Eine benutzerdefinierte Funktion displayConfirmDialog_Dynamic() steht geschrieben, dass accpets, Dialog-Header, Text im Dialog, Schaltfläche Array. Der Aufruf dieser Funktion ist wie folgt:

displayConfirmDialog_Dynamic("Add Template Manifest Entry?", "Do you want to add following Cuboid Entry to Template Manifest?\nCuboidNane: '" + json.cuboidName + "' CuboidId: " + json.cuboidId + "\non Server:" 
+ json.serverUrl , btnArray); 

Die Funktion displayConfirmDialog_Dynamic ist wie folgt:

//Confirmation dialog Dynamic Buttons 
function displayConfirmDialog_Dynamic(dlgTitle, message, btnArray) 
{ 
    var retVal; 
    $("div#dialog-confirm").find("p").html(message); 

    var confirmDlg = $("#dialog-confirm").dialog({ 
      resizable: false, 
      height: "auto", 
      width: 400, 
      modal: true, 
      title: dlgTitle, 
      buttons: btnArray, 
      show:{effect:'scale', duration: 700}, 
      hide:{effect:'explode', duration: 700} 
    }); 

    confirmDlg.dialog('option', 'buttons', btnArray); 
    confirmDlg.prev(".ui-dialog-titlebar").css({"background":"#ffc000", "color":"#ffffff", "font-size":"13px", "font-weight":"normal"}) ; 
    confirmDlg.dialog("open"); 
} 

Der Confirm Dialog Vorlage wird als DIV-Tag wie folgt definiert. Beachten Sie, dass der title und der Inhalt des Tags <p> dynamisch durch JavaScript-Code geändert werden.

<div id="dialog-confirm" title="Empty the recycle bin?" style="display:none;"> 
    <p>These items will be permanently deleted and cannot be recovered. Are you sure?</p> 
</div> 

Der Screenshot von oben Code angezeigt Dialogfeld ist unten dargestellt: