jQuery: charger le contenu du Dialogue Modal via Ajax
actuellement mon Dialogue Modal est comme ceci
<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>
Le Div qui est chargé est inclus dans la même page. Comment déplacer cette div vers une deuxième page et charger le contenu via Ajax lorsque la boîte de dialogue est affichée? Et puis-je réutiliser le script pour charger différents contenus selon les besoins?
6 réponses
consultez ce blogue de Nemikor, qui devrait faire ce que vous voulez.
http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
En Gros, avant d'appeler 'open', vous' chargez ' le contenu de l'autre page en premier.
jQuery('#dialog').load('path to my page').dialog('open');
essayez de l'utiliser.
$(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
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 requête Ajax charge la boîte de dialogue, Ajoute-les au corps de la page courante et ouvre la boîte de dialogue.
Si vous n'en veux charger le contenu que vous pouvez faire:
var dialogName = '#dialog_XYZ';
$.ajax({
url: "/ajax_pages/my_page.ext",
data: {....},
success: function(data) {
$(dialogName).append(data);
$(dialogName )
.dialog(options.dialogOptions);
}
});
<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>
peut-être ce code peut vous donner une idée.
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;
});
});
});