Les onglets AJAX fonctionnent parfaitement bien. C'est assez simple pour cette partie. Cependant, la fenêtre modale AJAX UI Dialog ne peut pas être déclenchée par un lien.
Toute aide dans ce domaine serait appréciée.
Réponses
Trop de publicités?
jek
Points
1776
Rien de plus facile que ça, mec. Essaie celle-là :
<?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>Notez que vous ne pouvez pas charger à distance à partir de local, donc vous devrez télécharger ceci sur un serveur ou autre. Notez également que vous ne pouvez pas charger à partir de domaines étrangers, vous devez donc remplacer le href du lien par un document hébergé sur le même domaine (et le href de l'URL). Voici la solution de rechange ).
Cheers
CGK
Points
1588
Pour éviter d'ajouter des div lors d'un clic sur le lien plusieurs fois, et éviter les problèmes lors de l'utilisation du script pour afficher les formulaires, vous pourriez essayer une variante du code 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;
});`
nicktea
Points
241
Andreas
Points
344
Juste un complément à la réponse de nicktea. Ce code charge le contenu d'une page distante (sans y rediriger), et nettoie également lors de sa fermeture.
<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>
Cory
Points
4442
Aucune des deux premières réponses n'a fonctionné pour moi avec des éléments multiples qui peuvent ouvrir des dialogues qui pointent vers différentes pages.
Cela semble être la solution la plus propre, elle ne crée l'objet dialogue qu'une fois au chargement et utilise ensuite les événements pour ouvrir/fermer/afficher de manière appropriée :
$(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;
});
});- Réponses précédentes
- Plus de réponses
