form - jquery ui windows

jQuery UI Alert Dialog como reemplazo de alerta()

Question

Estoy usando alert() para devolver mis errores de validación al usuario, ya que mi diseño no contempla nada más, pero prefiero usar el diálogo de la interfaz de usuario jQuery como el cuadro de diálogo de alerta para mi mensaje.

Como los errores no están contenidos en un div (html), no estoy seguro de cómo hacerlo. Normalmente asignarías el dialog() a un div say $("#divName").dialog() pero necesito más una función js algo como alert_dialog("Custom message here") o algo similar.

¿Algunas ideas?

Answer 1

Simplemente arroje un div oculto y vacío en su página html y asígnele una identificación. Entonces puede usar eso para su diálogo de jQuery UI. Puede llenar el texto como lo haría normalmente con cualquier llamada jquery.

Answer 2

DAlert jQuery UI Plugin Mira esto, esto puede ayudarte

Answer 3

No creo que incluso tengas que adjuntarlo al DOM, esto parece funcionar para mí:

$("<div>Test message</div>").dialog();

Aquí hay un violín de JS:

http://jsfiddle.net/TpTNL/98

Answer 4

Tomé la respuesta de @EkoJR, y agregué un parámetro adicional para pasar con una función de devolución de llamada que ocurre cuando el usuario cierra el diálogo.

function jqAlert(outputMsg, titleMsg, onCloseCallback) {
if (!titleMsg)
titleMsg = ''Alert'';
if (!outputMsg)
outputMsg = ''No Message to Display.'';
$("<div></div>").html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
},
close: onCloseCallback
});
}

A continuación, puede llamarlo y pasarle una función, que ocurrirá cuando el usuario cierre el cuadro de diálogo, así:

jqAlert(''Your payment maintenance has been saved.'',
''Processing Complete'',
function(){ window.location = ''search.aspx'' })

Answer 5

Sobre la base de la respuesta de eidylon, aquí hay una versión que no mostrará la barra de título si TitleMsg está vacío:

function jqAlert(outputMsg, titleMsg, onCloseCallback) {
if (!outputMsg) return;
var div=$(''<div></div>'');
div.html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
},
close: onCloseCallback
});
if (!titleMsg) div.siblings(''.ui-dialog-titlebar'').hide();
}

ver jsfiddle

Answer 6

Use esta sintaxis de código.

 $("<div></div>").html("YOUR MESSAGE").dialog(); 

esto funciona pero agrega un nodo al DOM. Puede usar una clase y luego o primero eliminar todos los elementos con esa clase. ex:

function simple_alert(msg)
{
$(''div.simple_alert'').remove();
$(''<div></div>'').html(is_valid.msg).dialog({dialogClass:''simple_alert''});
}

Answer 7

Como se menciona en nux y micheg79, un nodo queda atrás en el DOM después de que se cierra el cuadro de diálogo.

Esto también se puede limpiar simplemente agregando:

$(this).dialog(''destroy'').remove();

al método cercano del diálogo. Ejemplo agregando esta línea a la respuesta de eidylon:

function jqAlert(outputMsg, titleMsg, onCloseCallback) {
if (!titleMsg)
titleMsg = ''Alert'';
if (!outputMsg)
outputMsg = ''No Message to Display.'';
$("<div></div>").html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
},
close: function() { onCloseCallback();
/* Cleanup node(s) from DOM */
$(this).dialog(''destroy'').remove();
}
});
}

EDITAR: Tuve problemas para ejecutar la función de devolución de llamada y descubrí que tenía que agregar paréntesis () a onCloseCallback para activar realmente la devolución de llamada. Esto me ayudó a entender por qué: en JavaScript, ¿hace una diferencia si llamo a una función con paréntesis?

Answer 8

Usando algo de la información aquí, terminé creando mi propia función para usar.

Podría usarse como ...

custom_alert();
custom_alert( ''Display Message'' );
custom_alert( ''Display Message'', ''Set Title'' );

jQuery UI Alert Replacement

function custom_alert( message, title ) {
if ( !title )
title = ''Alert'';
if ( !message )
message = ''No Message to Display.'';
$(''<div></div>'').html( message ).dialog({
title: title,
resizable: false,
modal: true,
buttons: {
''Ok'': function() {
$( this ).dialog( ''close'' );
}
}
});
}

Answer 9

Existe un problema que si cierra el cuadro de diálogo ejecutará la función onCloseCallback. Este es un mejor diseño.

function jAlert2(outputMsg, titleMsg, onCloseCallback) {
if (!titleMsg)
titleMsg = ''Alert'';
if (!outputMsg)
outputMsg = ''No Message to Display.'';
$("<div></div>").html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": onCloseCallback,
"Cancel": function() {
$( this ).dialog( "destroy" );
}
},
});