[Résolu] Gérer les retours Json avec ajax et Fancybox

Bonjour à tous et toutes,

J'utilise Fancybox pour afficher des formulaires divers et variés et ainsi alimenter ma bdd. Tout fonctionne impec, j'envoi les données via ajax et je récupère des retours json envoyés par mon fichier php.

Actuellement je déclenche des actions diverses avec les retours json, mais j'aurai souhaité afficher des messages de confirmation en redimensionnant la fenêtre fancybox. Je ne connais hélas pas la meilleure méthode pour gérer cela. J'imagine qu'il est nécessaire de créer un div en hidden ou display:none dont on changera la class à la volée, mais je ne sais pas comment faire pour que Fancybox adapte sa dimension au nouvel objet affiché .
Modifié par Klesk (14 Sep 2012 - 12:28)

Bon apriori c'est tout con, voici mon code :

$('.bouton_ajax').fancybox({
	href: $(this).attr('href'),
	type: 'ajax',
	wrapCSS: 'fancybox-custom',
	closeClick:false,
	openEffect:'elastic',
	openSpeed:200,
	closeEffect:'elastic',
	closeSpeed:200,
	helpers:{
		overlay:{
			css:{'background-color':'#eee'}
		}
	},
	beforeShow: function() {
		$('#formulaire').on('submit', function() {
			$.ajax({
				url: $(this).attr('action'),
				type: $(this).attr('method'),
				data: $(this).serialize(),
				dataType: 'json',
				success: function(json) {
					if(json.reponse == 'ajout ok') {
						refresh_ajax();
						$.fancybox('<h1>Ajout OK</h1>');

					} else if(json.reponse == 'modification ok'){
						refresh_ajax();
						$.fancybox.close();
					} else if(json.reponse == 'suppression ok'){
						refresh_ajax();
						$.fancybox.close();
					} else {
						alert('Erreur : '+ json.reponse);
					}
					
				}
			});
			return false;
		});
   }
});

En revanche je n'arrive pas a trouver 2 choses.

1. Comment remplacer $.fancybox('<h1>Ajout OK</h1>'); par la même fonction avec ses paramètres custom ET les données à afficher en dur, un peu dans ce genre (mais ici la syntaxe n'est pas bonne si quelqu'un sait me corriger) :

						$.fancybox({
							wrapCSS:'fancybox-custom',
							closeClick:false,
							closeBtn:false,
							openEffect:'elastic',
							openSpeed:200,
							closeEffect:'elastic',
							closeSpeed:200,
							helpers:{overlay:{css:{'background-color':'#eee'}}}
						},'<h1>Ajout OK</h1>');

2. Comment mettre un délai à l'affichage de mon message pour que ce dernier se ferme automatiquement ensuite avec un fancybox.close();

Je suis preneur si quelqu'un à la réponse.

J'ai trouvé :

						$.fancybox({
							wrapCSS:'fancybox-custom',
							closeClick:false,
							closeBtn:false,
							openEffect:'elastic',
							openSpeed:200,
							closeEffect:'elastic',
							closeSpeed:200,
							content:'<div>L\'ajout de votre '+ contenu +' s\'est termin&eacute; avec succ&egrave;s</div>',
							helpers:{overlay:{css:{'background-color':'#eee'}}}
						});