wake-up-neo.com

jQuery-UI-Dialogschaltflächentext als Variable

Kann mir jemand sagen, wie ich eine Variable für Schaltflächentext im jQuery-UI-Dialogfeld verwenden kann? Ich möchte einen dynamischen Schaltflächennamen erstellen.

jqueryjquery-uivariablesjquery-ui-dialog
56
Nishima

Dies funktioniert nicht, da jQuery den Namen der Schaltfläche verarbeitet (mit oder ohne Anführungszeichen). 

Das wird funktionieren:

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 });
92
W. van Kuipers

Sie können der Schaltfläche im Dialogfeld eine ID zuweisen und diese dann mit Hilfe von Standard jQuery bearbeiten.

$("#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
    }
});

Schaltflächentext einstellen:

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

Das Problem hierbei ist, dass das Dialog-Plugin seinen Schaltflächen keine ID zuweist. Daher ist es ziemlich schwierig, diese direkt zu ändern. 

Initialisieren Sie den Dialog stattdessen wie gewohnt, suchen Sie die Schaltfläche anhand des darin enthaltenen Textes und fügen Sie eine ID hinzu. Auf die Schaltfläche kann dann direkt zugegriffen werden, um den Text zu ändern, zu formatieren, ihn zu 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')
7
David Toy

Vielleicht fehlt mir der Punkt - aber wäre der Setter nicht der einfachste Weg? 

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

        $("#dialog_box").dialog("option", "buttons", { "Close": function() { $(this).dialog("close"); } });
2
Danny
  1. Das Schaltflächenoption im jQuery UI-Dialogfeld akzeptiert Objekte und Arrays.
  2. Die Schaltflächen sind Instanzen des Schaltflächen-Widget . Verwenden Sie die API, anstatt die Schaltflächen selbst zu bearbeiten.
$(function() {
  // using textbox value instead of variable
  $("#dialog").dialog({
    width: 400,
    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.get());

    $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");

    $("#dialog").dialog("open");
  });
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://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>
2
Salman A

Dies kann in folgenden Schritten erfolgen: 

  1. In JavaScript können Sie ein Array von Schaltflächen erstellen.
  2. Legen Sie die Eigenschaft buttons auf das Array von Buttons fest.

Das folgende Beispiel erläutert 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');
      }
    }
  ];

Es wird eine benutzerdefinierte Funktion displayConfirmDialog_Dynamic () geschrieben, die den Header des Dialogs, den Dialogtext und die Schaltfläche Array enthält. Der Aufruf dieser Funktion lautet 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 lautet 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");  
}

Die Confirm Dialog Template wird wie folgt als DIV-Tag definiert. Beachten Sie, dass title und der Inhalt des <p>-Tags 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 des Dialogfelds, das mit dem obigen Code angezeigt wird, ist unten dargestellt:

 enter image description here

1
Rahul Varadkar

Und vergiss es nicht 

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

Das wird funktionieren $($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");

1
Egor Pavlikhin
var buttonName = "something";
$('#button-id').attr('value', buttonName);
0
Jeff Ober

warum nicht ein One-Liner ...

$("span.ui-button-text:contains('OLD BUTTON NAME')").html('NEW BUTTON NAME');
0
Treffor

weisen Sie der Schaltfläche eine Klasse zu. Der Schaltflächentext befindet sich in einem Bereich mit einer Klasse mit dem Namen ui-button-text in Ihrer definierten Klasse ..__ Wenn Sie also Ihrer Schaltfläche die Klasse .contacts-dialog-search-button geben, lautet der Code zum Zugriff auf den Text

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

hier ist der Code, den ich für meine aktuellen Projektschaltflächen verwende, um Ihnen 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"
            }
            ]
0
Daithí

Ja bei Inline-Verhalten durchaus möglich:

  1. Erstellen Sie eine Dialog-Klasse mit der 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 der ConfirmDialog-Klasse erstellen.

     this.CONFIRM_DIALOG = new ConfirmDialog();

  2. Rufen Sie die Methode bei jedem Ereignis auf, sagen wir onclick ().

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

Job erledigt!!

0
Ash