El texto de los botones de diálogo de IU de Jquery no funciona

Question

Estoy creando un cuadro de diálogo de interfaz de usuario JQuery modal y almacenando el resultado en la variable $ dialog. Los botones cambian en función de la cual se elige la operación, por lo que configurar los botones mediante una llamada de función como esta:

$dialog.dialog("option", "buttons", [ 
    { 
     text: "Ok", 
     click: function() { close_project(); } 
    }, 
    { 
     text: "Cancel", 
     click: function() { ($this).dialog("close"); } 
    } 
]); 

Esto muestra dos botones con el texto '0' y '1' en ellos en lugar de 'Ok' y 'Cancelar'. Además, las funciones de clic no parecen estar funcionando.

He repasado esto varias veces y la sintaxis parece correcta. ¿Qué estoy haciendo mal?

Answer 1

jQuery UI ayuda para esto dice que el método que está utilizando es para el modal ya inicializado - http://jqueryui.com/demos/dialog/#option-buttons ¿Es este el caso?

Si no, pruebe éste y luego experimentar cómo es diferente o adecuado para su solución:

$dialog.dialog({ buttons: [ 
    { 
     text: "Ok", 
     click: function() { close_project(); } 
    }, 
    { 
     text: "Cancel", 
     click: function() { $(this).dialog("close"); } 
    } 
]}); 

Answer 2

Usted puede probar la sintaxis de esta manera:

$dialog.dialog("option", "buttons", { 
     "Ok": function() { close_project(); }, 
     "Cancel": function() { $(this).dialog("close"); } 
    } 
); 

Answer 3

la opción "texto" es un indicador booleano para especificar si se debe mostrar el texto de la etiqueta. Tal vez debería intentar cambiar el .html() del botón, p.

$("#Button1").html("Ok"); 

Answer 4

I tenían el mismo "0 1" problema etiqueta del botón. "Necesitaba" la sintaxis de matriz para los botones en lugar de la sintaxis del objeto porque quería establecer el id del botón (mi código parecía rdamborsky con ids configurados y aún no funcionaba). Miré a esta pregunta:

jQuery UI Dialog Button Icons

y modificar el código intentado en la pregunta. Para su ejemplo específico:

$dialog.dialog({ buttons: { 
     "Ok": function() { close_project(); }, 
     "Cancel": function() { $(this).dialog("close"); } 
    }, 
    open: function() { 
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').attr("id", "cancel_button"); 
     $('.ui-dialog-buttonpane').find('button:contains("Ok")').attr("id", "ok_button"); 
}}); 

Por cierto, noto una ($ this) cuando pienso que quiere decir $ (este) en el código. Eso puede arruinar un clic. El otro clic puede tener un problema (pero solo si esto es de alguna manera en una solicitud de Ajax): si está en IE 7 u 8, realice un ligero cambio para eludir un problema de alcance IE (ajax). Antes de su código $ dialog.dialog, haga un "window.close_project = close_project;" y luego llame a "window.close_project();" en la función de hacer clic

FYI, si no necesita cambiar la identificación o clase o cualquier otra cosa, suelte el "abrir" y simplemente use la sintaxis del objeto para los botones. O solo usa la respuesta de amurra.

Answer 5

Parece que el colocador no está funcionando. Lo que hice en su lugar está lleno de inicialización del diálogo con todas las opciones de configuración a la vez:

<script type="text/javascript"> 
    $("#DiscardDialog").dialog(
    { 
     autoOpen: false, 
     title: "Discard", 
     buttons: 
     { 
      "Yes": function() 
      { 
       window.location = "@Url.Action("Discard", new { ID = this.Model.ID })"; 
      }, 
      "No": function() 
      { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
</script> 

Answer 6

Esto funciona también:

buttons: { 
     'Do some action': function() { 
      //a button called 'Do some action' is created 
     }, 
     Close: function() { 
      //a button called 'Close' is created 
      $(this).dialog('close'); 
     } 
    }, 
    open: function() { 
     //event fires when dialog opens 
    }, 
    close: function() { 
     //event fires when dialog closes 
    } 

Answer 7

Esto funcionó para mí

$("#dialog-form").dialog 
(
{ 
    autoOpen: false, 
     height: 300, 
    width: 350, 
    resizable: false, 
    autoOpen: false, 
    modal: true, 
    buttons: { 
     'Guardar' : function() 
     { 
      $("#dialog-form").dialog("close"); 
      $(this).html("Guardar"); 
     }, 
     Cancel: function() 
     { 
      $(this).html("Cancelar"); 
      $("#dialog-form").dialog("close"); 
     } 
    } 
});