modal - Ventana de diálogo jQuery UI cargada dentro de las pestañas jQuery UI de estilo AJAX
jquery ui windows (7)
Las pestañas AJAX funcionan perfectamente bien. Es bastante sencillo con esa parte. Sin embargo, lograr que la ventana modal del Diálogo UI de AJAX se active desde un enlace no ha tenido éxito.
Cualquier ayuda en esto sería apreciada.
// Correctamente formateado
<script type="text/Javascript">
$(function ()
{
$(''<div>'').dialog({
modal: true,
open: function ()
{
$(this).load(''mypage.html'');
},
height: 400,
width: 600,
title: ''Ajax Page''
});
});
Nada más fácil que ese hombre. Prueba este:
<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<style>
.loading { background: url(/img/spinner.gif) center no-repeat !important}
</style>
</head>
<body>
<a class="ajax" href="http://www.google.com">
Open as dialog
</a>
<script type="text/javascript">
$(function (){
$(''a.ajax'').click(function() {
var url = this.href;
// show a spinner or something via css
var dialog = $(''<div style="display:none" class="loading"></div>'').appendTo(''body'');
// open the dialog
dialog.dialog({
// add a close listener to prevent adding multiple divs to the document
close: function(event, ui) {
// remove div with all data and events
dialog.remove();
},
modal: true
});
// load remote content
dialog.load(
url,
{}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
function (responseText, textStatus, XMLHttpRequest) {
// remove the loading class
dialog.removeClass(''loading'');
}
);
//prevent the browser to follow the link
return false;
});
});
</script>
</body>
</html>
Tenga en cuenta que no puede cargar el control remoto desde el local, por lo que tendrá que cargarlo en un servidor o lo que sea. También tenga en cuenta que no puede cargar desde dominios extranjeros, por lo que debe reemplazar href del enlace a un documento alojado en el mismo dominio (y esta es la solución ).
Aclamaciones
Ninguna de las primeras dos respuestas funcionó para mí con múltiples elementos que pueden abrir diálogos que apuntan a diferentes páginas.
Esta se siente como la solución más limpia, solo crea el objeto de diálogo una vez en carga y luego usa los eventos para abrir / cerrar / exhibir apropiadamente:
$(function () {
var ajaxDialog = $(''<div id="ajax-dialog" style="display:hidden"></div>'').appendTo(''body'');
ajaxDialog.dialog({autoOpen: false});
$(''a.ajax-dialog-opener'').live(''click'', function() {
// load remote content
ajaxDialog.load(this.href);
ajaxDialog.dialog("open");
//prevent the browser from following the link
return false;
});
});
Para evitar agregar div adicionales al hacer clic en el enlace varias veces, y evitar problemas al usar el script para mostrar formularios, puede probar una variación del código de @ jek.
$(''a.ajax'').live(''click'', function() {
var url = this.href;
var dialog = $("#dialog");
if ($("#dialog").length == 0) {
dialog = $(''<div id="dialog" style="display:hidden"></div>'').appendTo(''body'');
}
// load remote content
dialog.load(
url,
{},
function(responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);
//prevent the browser to follow the link
return false;
});`
Solo una adición a la respuesta de nicktea. Este código carga el contenido de una página remota (sin redireccionar allí), y también se limpia al cerrarlo.
<script type="text/javascript">
function showDialog() {
$(''<div>'').dialog({
modal: true,
open: function () {
$(this).load(''AccessRightsConfig.htm'');
},
close: function(event, ui) {
$(this).remove();
},
height: 400,
width: 600,
title: ''Ajax Page''
});
return false;
}
</script>
curioso - ¿por qué no funciona la respuesta ''nada más fácil que esto'' (arriba)? parece lógico? http://206.251.38.181/jquery-learn/ajax/iframe.html
<a href="javascript:void(0)" onclick="$(''#myDialog'').dialog();">
Open as dialog
</a>
<div id="myDialog">
I have a dialog!
</div>