He estado experimentando con esto durante un par de horas y sigo confundido.
Estoy intentando abrir un cuadro de diálogo de interfaz de usuario de JQuery (modal) cuando se hace clic en un enlace (etiqueta [a]), obteniendo el contenido de la ventana de diálogo del href del enlace.
Hasta ahora tengo (obtenido de varios lugares) donde testb.html es un fragmento html simple:
<div><p>Some text</p><p>more text</p</div>La idea es que cuando se hace clic en el ancla (enlace), el contenido de testb.html aparece en el cuadro de diálogo.
¿Por qué no funciona esto?
David (ex programador pre-Alzheimer de 70 años con poca experiencia en HTML)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery test</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <script> $("a.modal").click(function(e) { e.preventDefault(); $(".container").load(this.href).dialog("open"); }); </script> </head> <body> <div class="container"></div> <p><a href="testb.html" class="modal">Click!</a></p> </body> </html>puedes usar este código:
<!doctype html> <html lang="en"> <head> <title>Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> </head> <body> <div class="container"> <p><a href="javascript:void(0)" data-get="testb.html" class="modal">Click!</a></p> </div> <div id="dialog" title="Basic dialog"></div> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <script> $('.modal').on('click', function () { var data = $(this).attr('data-get') $('#dialog').html(data) $("#dialog").dialog() }); </script> </body> </html>Combinando bits de las respuestas anteriores, obtuve esto, ¡que funciona!
<!doctype html> <html lang="en"> <head> <title>Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> </head> <body> <p><a href="testb.html" class="modal">Click!</a></p> <div id="dialog" title="Basic dialog"></div> <script> $('.modal').on('click', function (e) { e.preventDefault(); $('#dialog').load(this.href) $("#dialog").dialog() }); </script> </body> </html>Con la respuesta de codeangler, apareció el cuadro de diálogo, pero no tenía el contenido de testb.html, sino el contenido de div. Con la respuesta de mplungjan... Bueno, no pude hacerlo funcionar. Con la respuesta de Sepehr Pourjozi, apareció el cuadro de diálogo pero contenía el texto literal "testb.html", no el contenido de testb.html.
Tomando pistas de las tres respuestas, lo hice funcionar. Y ahora entiendo un poco mejor los diálogos de JQuery.
Gracias a todos.
David
Ejecuta la tarea antes de que el elemento exista en la página. Envolverlo en un dispositivo manipulador de carga
$(function() { // on page load $("a.modal").click(function(e) { e.preventDefault(); $(".container").load(this.href) }); })No puede abrir el contenedor como un cuadro de diálogo de la forma en que lo intenta. necesitas algo como
$(function() { // on page load $(".container").dialog({ autoOpen: false, width: 750, modal: true }); $("a.modal").click(function(e) { e.preventDefault(); $(".container").load(this.href) $(".container").dialog('open'); }); })