Cambiar dinámicamente el texto del botón del cuadro de diálogo jQuery UI

3 minutos de lectura

Estoy usando el cuadro de diálogo jQuery UI para enviar formularios ajax. Quiero cambiar el texto de mi botón Guardar para esperar, cuando el usuario haga clic en él y volver a Guardar cuando se complete la llamada ajax. por favor ayúdame

  • Si pudiera elegir la mejor respuesta para esta pregunta, sería esta de ManojRK. Bien hecho, Manoj.

    – csifo

    10 de julio de 2013 a las 19:08


Aunque la pregunta es muy antigua, encuentro que la respuesta es muy simple y no se ha dado aquí.

  • Puede establecer una identificación para el botón y usarlo.
  • Todos los botones de diálogo son botones jQuery UI, por lo tanto, puede usar $().button() función para modificar el botón.

El código JavaScript es:

$('#dialog').dialog({
    buttons:[{
        id: 'buttonId',
        click: function() {
            // your function
        }]
});
$('#buttonId').button('option', 'label', 'Please wait...');

  • Consulte también esta respuesta para obtener una sintaxis más simple (sin matriz). Funciona muy bien junto con esta respuesta.

    – csifo

    10 de julio de 2013 a las 19:33

Suponiendo que está utilizando .dialog() con la opción de botones, puede asignar una clase personalizada al botón de envío y luego apuntar al texto del botón interno a través de la clase que está asignada al intervalo (texto del botón de la interfaz de usuario):

    $("#dialog-test").dialog({
        title: "My dialog",
        buttons:
            [
              {
                  text: "Submit",
                  click: function() {
                    $(".my-custom-button-class > .ui-button-text").text("Please Wait..."); 
                    $("#some-form").submit();
                  },
                  'class': 'my-custom-button-class'
              }
            ]
    });

Cuando su guardado se complete a través de la función de envío (), puede usar la misma llamada para restablecer el texto a lo que desea.

Si ayuda a alguien: implementación completa con ejemplo (PD: tomé prestado getDialogButton() de otra publicación en este sitio pero no recuerdo el enlace).

//-> Change to Loading Notice:
setButton('.settingsDialog', 'Save', 'Saving...', false);
setTimeout(function() { setButton('.settingsDialog', 'Saving...', 'Save', true); }, 800 );},

//Select the Dialog Buttons
function getDialogButton( dialog_selector, button_name ) {
  var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );
  for ( var i = 0; i < buttons.length; ++i ) {
     var jButton = $( buttons[i] );
     if ( jButton.text() == button_name )
     {
         return jButton;
     }
  }
  return null;
}


//Button Controller for AJAX Loading:
function setButton(sDialogClass, sButtonName, sNewButtonName, bEnabled){
    var btn = getDialogButton(sDialogClass, sButtonName);
    btn.find('.ui-button-text').html(sNewButtonName);

    if (bEnabled) {
        btn.removeAttr('disabled', 'true');
        btn.removeClass( 'ui-state-disabled' );
    } else {
        btn.attr('disabled', 'true');
        btn.addClass( 'ui-state-disabled' );
    }
}

  • este bit: btn.find(‘.ui-button-text’).html(sNewButtonName) salvó mi tocino. Pero para obtener el botón, me resultó más fácil obtener la identificación del botón con un selector (puede establecer la identificación: “myButtonID” en la matriz donde configura los botones y luego usar un selector normal $ (“#myButtonId”) .. find(‘.ui-button-text’).html(“texto nuevo”)

    – Rubio

    10 de noviembre de 2011 a las 9:59

  • Perfecto. Exactamente lo que estaba buscando. Debe estar integrado en el cuadro de diálogo jQueryUI.

    – dualmon

    28 de noviembre de 2012 a las 9:16

avatar de usuario
LimpioNegrita

$(".ui-dialog-buttonpane button:contains('Save') span").text("Please wait...");

avatar de usuario
csifo

Tenga en cuenta la forma correcta de crear varios botones sobre la marcha:

'buttons', [
    {
        text: "Download",
        click: function () {...}
    },
    {
        text: "Not now",
        click: function () {...}
    }
]

Aquí hay un ejemplo usando el estilo non-array:
Ver este jsFiddle para un ejemplo.

avatar de usuario
Aarón Digulla

Usar $().text('Please Wait') antes de hacer la llamada AJAX y luego agregar $().text('Save') como la última operación en la devolución de llamada exitosa.

Tenga en cuenta que para esto, debe usar un button elemento, no un input elemento:

<button>Text here</button>

avatar de usuario
Aivar Luist

$("#dialog-test").dialog({
    title: "My dialog",
    buttons:
        [
          {
              text: "Submit",
              click: function() {
                $(".my-custom-button-class > .ui-button-text").text("Please Wait...");
                //You may use $(this) as selector or allso $("#dialog-test")
                $(this).parent().children('.ui-dialog-buttonpane').children().children().html('Please wait..');
                //As you have only one button, it should not matter to specify child element, but you can like this:
                //$($(this).parent().children('.ui-dialog-buttonpane').children().children()[0]).html('Please wait..');

                $("#some-form").submit();
              },
              'class': 'my-custom-button-class'
          }
        ]
});

¿Ha sido útil esta solución?