jQuery UI botón de diálogo texto como una variable

Question

¿Alguien me puede decir cómo puedo usar una variable para el texto del botón en el diálogo de la interfaz de usuario jQuery? Quiero hacer un nombre de botón dinámico.

Answer 1

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

Answer 2

Esto no funcionará debido a la forma jQuery maneja el nombre del botón (puede ser con o sin comillas)

Esto funcionará:

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

El problema aquí es que el el complemento de diálogo no asigna una identificación a sus botones, por lo que es bastante difícil modificarlos directamente.

En su lugar, inicie el diálogo como de costumbre, ubique el botón por el texto que contiene y agregue una identificación. A continuación, el botón se puede acceder directamente a cambiar el texto, formato, activar/desactivar, etc.

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

Esto funcionará $($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");

Answer 5

y no se olvide

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

Answer 6

Tal vez Me falta el punto, pero ¿no sería la forma más fácil de usar el colocador?

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

asigne una clase al botón. El texto del botón estará en un lapso con una clase llamada ui-button-text dentro de su clase definida. Así que si usted da a su botón de la clase .contacts-dialog-search-button entonces el código para acceder al texto será:

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

aquí es el código que estoy usando para mis proyectos actuales botones, para dar un ejemplo.

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

Sí totalmente posible con el comportamiento en línea:

1. Crear clase de diálogo con dos método setter, setYesButtonName() y 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. Crear objeto de la clase ConfirmDialog. Método de llamada

   this.CONFIRM_DIALOG = new ConfirmDialog(); 
   

2. en cualquier caso, digamos onclick() Hecho

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

trabajo !!

Answer 9

Lo que puede hacer es asignar el botón en el cuadro de diálogo de una ID y luego manipularlo utilizando jQuery estándar.

$("#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 botón de texto:

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

Answer 10

1. The button option en el diálogo jQuery UI acepta objetos y matrices.
2. Los botones son instancias del button widget. Use la API en lugar de manipular los botones usted mismo.

$(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

Esto se puede hacer en los pasos siguientes:

1. En JavaScript puede crear matriz de botones.
2. Establezca la propiedad de botones en la matriz de botones.

El siguiente ejemplo explica los pasos anteriores.

1. Dos botones se definen en btnArray de la siguiente manera;

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

Una función personalizada displayConfirmDialog_Dynamic() está escrito que accpets, cabecera de diálogo, texto de diálogo, el botón de matriz. La llamada a esta función es la siguiente:

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

La función displayConfirmDialog_Dynamic es como sigue:

//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"); 
} 

El Confirmar diálogo de plantilla se define como etiqueta DIV como sigue. Tenga en cuenta que title y el contenido de la etiqueta <p> se cambian dinámicamente por código JavaScript.

<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> 

La captura de pantalla cuadro de diálogo mostrado por el código de seguridad de se muestra a continuación: