Estoy tratando de usar JQuery UI Dialog para reemplazar el javascript:alert()
cuadro feo . En mi caso, tengo una lista de elementos, y al lado de cada uno de ellos, tendría un botón "eliminar" para cada uno de ellos. la configuración html de psuedo será algo siguiente:
<ul>
<li>ITEM <a href="url/to/remove"> <span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>
<div id="confirmDialog">Are you sure?</div>
En la parte JQ, en el documento listo, primero configuraría el div para que fuera un diálogo modal con el botón necesario, y configuraría esos "a" para que se activen antes de eliminarlos, como:
$("ul li a").click(function() {
// Show the dialog
return false; // to prevent the browser actually following the links!
}
OK, aquí está el problema. durante el tiempo de inicio, el cuadro de diálogo no tendrá idea de quién (elemento) lo activará, y tampoco la identificación del elemento (!). ¿Cómo puedo configurar el comportamiento de esos botones de confirmación para que, si el usuario aún elige SÍ, siga el enlace para eliminarlo?
fuente
Respuestas:
Solo tenía que resolver el mismo problema. La clave para que esto funcione es que
dialog
debe inicializarse parcialmente en elclick
controlador de eventos para el enlace con el que desea usar la funcionalidad de confirmación (si desea usar esto para más de un enlace). Esto se debe a que la URL de destino para el enlace debe inyectarse en el controlador de eventos para hacer clic en el botón de confirmación. Usé una clase CSS para indicar qué enlaces deberían tener el comportamiento de confirmación.Aquí está mi solución, abstraída para ser adecuada para un ejemplo.
Creo que esto funcionaría para usted, si puede generar sus enlaces con la clase CSS (
confirmLink
en mi ejemplo).Aquí hay un jsfiddle con el código.
En aras de la divulgación completa, notaré que pasé unos minutos en este problema en particular y proporcioné una respuesta similar a esta pregunta , que tampoco tenía una respuesta aceptada en ese momento.
fuente
Encontré que la respuesta de Paul no funcionó, ya que la forma en que estaba configurando las opciones DESPUÉS de que se instanciara el diálogo en el evento de clic era incorrecta. Aquí está mi código que estaba funcionando. No lo he adaptado para que coincida con el ejemplo de Paul, pero es solo la diferencia de un bigote de gato en términos de que algunos elementos se nombran de manera diferente. Deberías poder resolverlo. La corrección se encuentra en la configuración de la opción de diálogo para los botones en el evento de clic.
Espero que esto ayude a alguien más, ya que esta publicación originalmente me llevó por el camino correcto. Pensé que sería mejor publicar la corrección.
fuente
on
lugar declick
, ya que esto continuará funcionando si (por ejemplo) el campo se vuelve a dibujar usando jQuery - api.jquery.com/onHe creado una función propia para un cuadro de diálogo de confirmación de jquery ui. Aqui esta el codigo
Ahora para usar esto en su código, simplemente escriba siguiente
Seguir.
fuente
Solución simple y corta que acabo de probar y funciona
entonces simplemente agregue la clase = "confirmar" a su enlace y ¡funciona!
fuente
Esta es mi solución ... espero que ayude a cualquiera. Está escrito sobre la marcha en lugar de copiado, así que perdóname por cualquier error.
Personalmente prefiero esta solución :)
editar: Lo siento ... realmente debería haberlo explicado con más detalle. Me gusta porque en mi opinión es una solución elegante. Cuando el usuario hace clic en el botón que debe confirmarse primero, el evento se cancela como debe ser. Cuando se hace clic en el botón de confirmación, la solución no es simular un clic en el enlace, sino activar el mismo evento jquery nativo (clic) sobre el botón original que se habría activado si no hubiera un diálogo de confirmación. La única diferencia es un espacio de nombres de eventos diferente (en este caso, 'confirmado') para que el cuadro de diálogo de confirmación no se vuelva a mostrar. El mecanismo nativo de Jquery puede hacerse cargo y las cosas pueden funcionar como se espera. Otra ventaja es que puede usarse para botones e hipervínculos. Espero haber sido lo suficientemente claro.
fuente
$("#btn").trigger("click.confirmed");
Sé que esta es una vieja pregunta, pero aquí está mi solución usando atributos de datos HTML5 en MVC4:
Código JS:
fuente
¿Con esto bastará?
fuente
Como anteriormente. Las publicaciones anteriores me llevaron por el buen camino. Así es como lo hice. La idea es tener una imagen al lado de cada fila de la tabla (generada por el script PHP de la base de datos). Cuando se hace clic en una imagen, el usuario será redirigido a la URL y, como resultado, el registro apropiado se eliminará de la base de datos mientras se muestran algunos datos relacionados con el registro en el que se hizo clic en el cuadro de diálogo jQuery UI.
El código de JavaScript:
Diálogo div:
Enlace de imágen:
De esta manera, puede pasar los valores del bucle PHP al cuadro de diálogo. El único inconveniente es utilizar el método GET para realizar la acción.
fuente
Qué tal esto:
Lo he probado en este html:
Elimina todo el elemento li, puede adaptarlo a sus necesidades.
fuente
(A partir del 22/03/2016, la descarga en la página vinculada no funciona. Dejo el enlace aquí en caso de que el desarrollador lo corrija en algún momento porque es un pequeño complemento excelente. La publicación original sigue. alternativa, y un enlace que realmente funciona: jquery.confirm .)
Puede ser demasiado simple para sus necesidades, pero puede probar este complemento de confirmación jQuery . Es realmente simple de usar y hace el trabajo en muchos casos.
fuente
Por mucho que odio usar eval, me pareció la forma más fácil, sin causar muchos problemas dependiendo de las diferentes circunstancias. Similar a la función settimeout de javascript.
fuente
Me encontré con esto y terminé con una solución, que es similar a varias respuestas aquí, pero implementada de manera ligeramente diferente. No me gustaron muchas piezas de JavaScript, o un marcador de posición div en alguna parte. Quería una solución generalizada, que luego pudiera usarse en HTML sin agregar javascript para cada uso. Esto es lo que se me ocurrió (esto requiere jquery ui):
Javascript:
Y luego, en HTML, no se necesitan llamadas ni referencias de JavaScript:
Dado que el atributo de título se usa para el contenido div, el usuario puede incluso obtener la pregunta de confirmación al pasar el mouse sobre el botón (razón por la cual no utilicé el atributo de título para el mosaico). El título de la ventana de confirmación es el contenido de la etiqueta alt. El recorte de JavaScript se puede incluir en un archivo .js generalizado, y simplemente aplicando una clase tiene una bonita ventana de confirmación.
fuente
fuente
NOTA: No hay suficiente representante para comentar, pero la respuesta de BineG funciona perfectamente en la resolución de problemas de devolución de datos con páginas ASPX como lo resaltan Homer y echo. En honor, aquí hay una variación usando un diálogo dinámico.
fuente
Otra variación de lo anterior donde comprueba si el control es 'asp: linkbutton' o 'asp: button' que se representa como dos controles html diferentes. Parece funcionar bien para mí, pero no lo he probado exhaustivamente.
fuente
Estaba buscando esto para usar en los botones de enlace dentro de un ASP.NET Gridview (Comandos de compilación del control GridView) Por lo tanto, la acción "Confirmar" en el cuadro de diálogo debe activar un script generado por el control Gridview en tiempo de ejecución. esto funcionó para mí:
fuente
var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);
Esto no tiene ningún sentido!Sé que esta pregunta es antigua, pero esta fue la primera vez que tuve que usar un diálogo de confirmación. Creo que esta es la forma más corta de hacerlo.
Espero que te guste :)
fuente
Personalmente, veo esto como un requisito recurrente en muchas vistas de muchas aplicaciones ASP.Net MVC.
Es por eso que definí una clase de modelo y una vista parcial:
Y mi punto de vista parcial:
Y luego, cada vez que lo necesite en una vista, simplemente use @ Html.Partial (en hitos de sección para que JQuery esté definido):
El truco es especificar el JQueryClickSelector que coincidirá con los elementos que necesitan un diálogo de confirmación. En mi caso, todos los anclajes con la clase SyLinkDelete, pero podrían ser un identificador, una clase diferente, etc. Para mí fue una lista de:
fuente
Un tema muy popular y Google encuentra esto para la consulta "jquery dialog close what event you clicked". Mi solución maneja los eventos YES, NO, ESC_KEY, X correctamente. Quiero que se llame a mi función de devolución de llamada sin importar cómo se haya dispuesto el diálogo.
Es fácil redirigir el navegador a una nueva url o realizar otra cosa en la función retval.
fuente
Tantas buenas respuestas aquí;) Aquí está mi enfoque. Similar al uso de eval ().
Y el uso se ve así:
fuente
Fuera de la caja, JQuery UI ofrece esta solución:
HTML
Puede personalizar aún más esto proporcionando un nombre para la función JQuery y pasando el texto / título que desea que se muestre como parámetro.
Referencia: https://jqueryui.com/dialog/#modal-confirmation
fuente
Bueno, esta es la respuesta a tus preguntas ...
asegúrese de tener jquery 1.4.4 y jquery.ui
fuente
LANGUAGE="JavaScript"
), usa mayúsculas y minúsculas mezcladas, combina códigos JS simples con códigos jQuery de forma totalmente innecesaria y establece estilos con JS en lugar de CSS (feo y semánticamente incorrecto) y, por cierto, su estilo modificación (con JS simple) es absolutamente irrelevante con respecto a la pregunta original. Definitivamente debe acortar y embellecer su código y centrarse en responder la pregunta original.Manera fácil con un toque de javascript
fuente