Cambio dinámico del cuadro de diálogo de la interfaz de usuario de jQuery Botón Texto

Question

Estoy utilizando el cuadro de diálogo de la interfaz de usuario de jQuery para el envío de formularios ajax. Quiero cambiar el texto de mi botón de guardar para esperar, cuando el usuario haga clic en él y vuelva a Guardar cuando se complete la llamada ajax. pls ayúdame

Answer 1

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

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

<button>Text here</button> 

Answer 2

Usted tendrá que utilizar beforeSendcomplete y opciones que desee. Echa un vistazo a la documentación para obtener más información:

http://api.jquery.com/jQuery.ajax/

Answer 3

Suponiendo que está usando .dialog() con la opción de botones, se puede asignar una clase personalizada para el botón de enviar, y luego apuntar el texto del botón interno a través la clase que se asigna al rango de medición (ui-button-texto):

$("#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 realiza a través de la presente(), se podría utilizar la misma llamada para establecer el texto de nuevo a lo que desea.

Answer 4

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

Answer 5

Si se ayuda a nadie: la plena aplicación de ejemplo (PD: me prestó getDialogButton() de otro post en este sitio, pero no puedo recordar 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'); 
    } 
} 

Answer 6

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

Answer 7

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

• Puede establecer un id para el botón y usarlo.
• Todos los botones de diálogo son botones jQuery UI, por lo tanto puede usar la función $().button() 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...'); 

Answer 8

Note the correct way para crear varios botones sobre la marcha:

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

Aquí hay un ejemplo usando el estilo no es un array: See this jsFiddle para un ejemplo .

Answer 9

Para mi versión de jQuery UI (1.11.4), este formato trabajado para cambiar el texto del botón:

$('#setActionButton').button('option').text('new text'); 

Sin embargo, no se restableció el botón con el nuevo texto en el cuadro de diálogo! Eso fue frustrante La respuesta de JaredBroad anterior es la que funcionó para mí, primero quitando todos los botones del diálogo y luego haciendo clic para encontrar el botón para cambiar el nombre. Luego cambió el texto todo el tiempo.

Answer 10

Me parece que si yo uso muchos diálogos con los mismos botones entonces puedo definir la clase a cada botón en cada diálogo y luego cambiar el texto en todos los botones.

$('#dialog1').dialog({ 
     buttons:[{ 
        class: "btnOK", 
        click: function() { 
         ... 
        } 
       }, 
       { 
        class: "btnClose", 
        click: function() { 
         ... 
        } 
       }] 
    }); 

$('#dialog2').dialog({ 
     buttons:[...] 
    });  

$('.btnOK').button('option', 'label', 'Your text here'); 
$('.btnClose').button('option', 'label', 'Your text here'); 

También en lugar de clase puede definir Identificación para cada botón (sin embargo Identificación debe ser único)