jquery - recargar pagina al cerrar modal bootstrap
jQuery: cargar contenido de diálogo modal a través de Ajax (6)
Echa un vistazo a esta publicación de blog de Nemikor, que debe hacer lo que quieras.
http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
Básicamente, antes de llamar a ''abrir'', primero ''carga'' el contenido de la otra página.
jQuery(''#dialog'').load(''path to my page'').dialog(''open'');
Actualmente mi Diálogo Modal es como este
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" />
</head>
<body>
<div id="dialog" title="Title Box">
<p>Stuff here</p>
</div>
<script type="text/javascript">
jQuery(
function() {
jQuery("#dialog")
.dialog(
{
bgiframe: true,
autoOpen: false,
height: 100,
modal: true
}
);
jQuery(''body'')
.bind(
''click'',
function(e){
if(
jQuery(''#dialog'').dialog(''isOpen'')
&& !jQuery(e.target).is(''.ui-dialog, a'')
&& !jQuery(e.target).closest(''.ui-dialog'').length
){
jQuery(''#dialog'').dialog(''close'');
}
}
);
}
);
</script>
<a href="#" onclick="jQuery(''#dialog'').dialog(''open''); return false">Click to view</a>
</body>
</html>
La div que está cargada se incluye en la misma página. ¿Cómo muevo ese div a una segunda página y cargo el contenido a través de Ajax cuando se muestra el cuadro de diálogo? ¿Y puedo reutilizar la secuencia de comandos para cargar diferentes contenidos según las necesidades?
puede ser este código puede darle una idea.
http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
$(document).ready(function() {
$(''#page-help'').each(function() {
var $link = $(this);
var $dialog = $(''<div></div>'')
.load($link.attr(''href''))
.dialog({
autoOpen: false,
title: $link.attr(''title''),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog(''open'');
return false;
});
});
});
trata de usar este.
$(document).ready(function(){
$.ajax({
url: "yourPageWhereToLoadData.php",
success: function(data){
$("#dialog").html(data);
}
});
$("#dialog").dialog(
{
bgiframe: true,
autoOpen: false,
height: 100,
modal: true
}
);
});
$(function () {
$(''<div>'').dialog({
modal: true,
open: function ()
{
$(this).load(''Sample.htm'');
},
height: 400,
width: 400,
title: ''Dynamically Loaded Page''
});
});
http://www.devcurry.com/2010/06/load-page-dynamically-inside-jquery-ui.html
<button class="btn" onClick="openDialog(''New Type'',''Sample.html'')">Middle</button>
<script type="text/javascript">
function openDialog(title,url) {
$(''.opened-dialogs'').dialog("close");
$(''<div class="opened-dialogs">'').html(''loading...'').dialog({
position: [''center'',20],
open: function () {
$(this).load(url);
},
close: function(event, ui) {
$(this).remove();
},
title: title,
minWidth: 600
});
return false;
}
</script>
var dialogName = ''#dialog_XYZ'';
$.ajax({
url: "/ajax_pages/my_page.ext",
data: {....},
success: function(data) {
$(dialogName ).remove();
$(''BODY'').append(data);
$(dialogName )
.dialog(options.dialogOptions);
}
});
La solicitud Ajax carga el cuadro de diálogo, agréguelo al cuerpo de la página actual y abre el cuadro de diálogo.
Si solo quieres cargar el contenido, puedes hacer lo siguiente:
var dialogName = ''#dialog_XYZ'';
$.ajax({
url: "/ajax_pages/my_page.ext",
data: {....},
success: function(data) {
$(dialogName).append(data);
$(dialogName )
.dialog(options.dialogOptions);
}
});