résultat d'un formulaire dans une fancybox

ouverture d'un fancybox après clic sur le submit

Sujet résolu

28 novembre 2012 à 19:22:07

Bonjour à tous

,

voilà, j'ai un formulaire php et je souhaiterais que la page de traitement du formulaire s'ouvre dans une fancybox (après clic sur le submit.

Mon formulaire :

<form id="formulaire" action="visualiser.php" method="post" enctype="multipart/form-data">
<label>Nom :</label>
<input type="text" name="nom"/>
<label>Prenom :</label>
<input type="text" name="prenom"/>
<label>Téléphone :</label>
<input type="text" name="telephone"/>
<label>Photo :</label>
 <input type="hidden" name="MAX_FILE_SIZE" value="8096000" />
<input type="file" name="photo" class="upload" />
<input name="submit" type="submit" value="Valider">
</form>

Les données de mon formulaire sont traités sur la page "visualiser.php" qui n'est en fait qu'une page de prévisualisation contenant elle même un autre formulaire pour valider définitivement les données précédemment entrées :

<form id="preview" action="validation.php" method="post">
<h1 id=\"titre\">". stripslashes($_POST['titre']) ."</h1>
<br />
<p>". stripslashes($_POST['prenom'])."</p>
<p>". stripslashes($_POST['nom'])."</p>
<input name="submit" type="submit" value="Envoyer" id="hop"/>
</form>

Sur ma page "visualiser.php" j'ai placé le code suivant :

<script type="text/javascript">
$('#preview').fancybox({
    ajax: {
        type: "POST",
        data: $('#formulaire').serialize()
    }
});
</script>

Résultat : lorsque je clique sur mon premier formulaire, ma page visualiser.php s'affiche avec mon formulaire suivant, et ce n'est que lorsque je clique sur ce dernier formualaire que ma fancybox apparait correctement... :euh:

Or, ce que je souhaite c'est que mon second formulaire s'affiche dans la fancybox lors de la validation du premier formulaire.

J'ai trouver quelques pistes (ici et là ) mais je ne parviens pas à faire fonctionner le script correctement...

Merci de votre aide

Maggio

28 novembre 2012 à 20:41:57

Hello,

Peut être un exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Maggio</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

		<!-- Add mousewheel plugin (this is optional) -->
		<script type="text/javascript" src="http://fancyapps.com/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

		<!-- Add fancyBox -->
		<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
		<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>


<script type="text/javascript">

	$(document).ready(function() {
		$('#formulaire').submit(function(){
            $.ajax({   
                type: "POST",
                data : $("#formulaire").serialize(),
                cache: false,  
                url: $('#formulaire').attr('action'),   
                success: function(data){
                    $('#fancy').html(data);                      
                }   
            });
			/*$.post($('#formulaire').attr('action'), // visualiser.php
				$("#formulaire").serialize(),
				function(data) {
					$('#fancy').html(data);
				}
			);*/
			
			$("#fancy").fancybox().click();// La fancy box s'ouvre lors du click de l'utilisateur
			
			return false;// on ne soumet pas le formulaire
		});
		
	});
</script>

	</head>
	<body>

		<form id="formulaire" action="visualiser.php" method="post" enctype="multipart/form-data" style="width:150px;">
			<label>Nom :</label>
			<input type="text" name="nom"/>
			<label>Prenom :</label>
			<input type="text" name="prenom"/>
			<label>Téléphone :</label>
			<input type="text" name="telephone"/>
			<label>Photo :</label>
			<input type="hidden" name="MAX_FILE_SIZE" value="8096000" />
			<input type="file" name="photo" class="upload" />
			<input type="submit" value="Valider" />
		</form>
		
		<div id="fancy"></div>

	</body>
</html>

<!-- \file visualiser.php -->
<form id="formulaire" action="valider.php" method="post" enctype="multipart/form-data" style="width:350px;">
	<label>Nom :</label>
	<input type="text" name="nom" readonly="readonly" value="<?php echo $_POST['nom'] ?>" />
	<label>Prenom :</label>
	<input type="text" name="prenom" readonly="readonly"  value="<?php echo $_POST['prenom'] ?>" />
	<label>Téléphone :</label>
	<input type="text" name="telephone" readonly="readonly" value="<?php echo $_POST['telephone'] ?>" />
	<label>Photo :</label>
	<input type="hidden" name="MAX_FILE_SIZE" value="8096000" />
	<img src="http://www.test.com/logo.png" />
	<input type="submit" value="Valider" />
</form>

En espérant que ça puisse t'aider.

arnone

28 novembre 2012 à 22:12:13

merci Maggio,
malheureusement j'ai essayé ta méthode mais cela ne marche pas...

Maggio

28 novembre 2012 à 22:48:17

Méaculpa, j'étais resté sur l'ancienne version de fancybox. Et c'est vrai qu'il y avais des bug...
J'ai télécharger la dernière version

<!DOCTYPE html>
<html>
<head>
<!-- index.php -->
	<title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<!-- Add jQuery library -->
	<script type="text/javascript" src="../lib/jquery-1.8.2.min.js"></script>

	<!-- Add mousewheel plugin (this is optional) -->
	<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.3"></script>
	<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.2" media="screen" />

	<!-- Add Button helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
	<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

	<!-- Add Thumbnail helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
	<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

	<!-- Add Media helper (this is optional) -->
	<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			$('#preview').fancybox();
			
			$('#formulaire').submit(function(){
				$.fancybox.open({
					href: $('#formulaire').attr('action'), 
					type: 'ajax',
					ajax: {
						type: "POST",
						data : $("#formulaire").serialize(),
	                	cache: false
					},
					padding : 5,
					autoSize	: false
				});
				return false;
			});
		});
	</script>

	</head>
	
	<body>

		<form id="formulaire" action="preview.php" method="post" enctype="multipart/form-data" style="width:150px;">
			<label>Nom :</label>
			<input type="text" name="nom"/>
			<label>Prenom :</label>
			<input type="text" name="prenom"/>
			<label>Téléphone :</label>
			<input type="text" name="telephone"/>
			<label>Photo :</label>
			<input type="hidden" name="MAX_FILE_SIZE" value="8096000" />
			<input type="file" name="photo" class="upload" />
			<input type="submit" value="Valider" />
		</form>
		
		<div id="preview"></div>
		
	</body>
</html>

<?php
sleep(2);// pour bien voir le chargement : a supprimer
?>
<form id="formulaire" action="visualiser.php" method="post" enctype="multipart/form-data">
	<label>Nom :</label>
	<input type="text" name="nom" value="<?php echo $_POST['nom'] ?>" />
	<label>Prenom :</label>
	<input type="text" name="prenom" value="<?php echo $_POST['prenom'] ?>" />
	<label>Téléphone :</label>
	<input type="text" name="telephone" value="<?php echo $_POST['telephone'] ?>" />
	<label>Photo :</label>
	<input type="hidden" name="MAX_FILE_SIZE" value="8096000" />
	<input type="file" name="photo" class="upload" />
	<input type="submit" value="Valider" />
</form>

Je peu pas faire plus...

arnone

28 novembre 2012 à 23:40:29

merci encore Maggio,
cette fois le script fonctionne puisque quand je clique sur le submit du premier formulaire, cela m'ouvre bien la fancybox mais là problème, apparemment le contenu de la fancybox ne se charge pas...
j'ai l'erreur suivante qui s'affiche :
"The requested content cannot be loaded.
Please try again later."
:/

Edit : il s'agissait en fait d'une erreur d'url relative dans le formualaire...

J'aimis une url absolue et le script fonctionne parfaitement !!

Mille merci encore Maggio !

Edit 2 : après vérification sur IE, rien ne s'affiche dans ma fancybox. Le script fonctionne avec Firefox mais buggue avec IE...

Maggio

29 novembre 2012 à 17:42:00

Sur quel version d'IE ça ne marche pas ?

arnone

1 décembre 2012 à 9:16:40

J'ai essayé sur Internet Explorer 8...et rien ne s'afffiche (contenu de la Fancybox vide, page blanche sans message d'erreur)...

arnone

3 décembre 2012 à 19:04:12

Impossible de trouver le bug, tout fonctionne sur Firefox, Chrome mais rien sur I.E...
J'utilise la fancybox sur une autre page (cette fois la fancybox s'ouvre en cliquant sur un simple lien) et là aucun soucis...mais sur ce coup là je suis bloqué complet... :/

Maggio

3 décembre 2012 à 20:52:02

J'ai essayé sous IE 8, de mon coté tout fonctionne.

Peux tu montré le code.

arnone

5 décembre 2012 à 15:58:33

Arf..en fait il s'agissait d'une erreur dans la structure de la page (problème avec une condition et structure de la page en elle même).
En fait j'avais placé mon deuxième formulaire (celui qui se trouvait dans la fancybox) dans une page HTML (c'est à dire avec l'enctype, un head, un body...) et je pense que c'est pour cela que ça buggait sur IE.

Du coup j'ai revu mes conditions, ma structure de page et maintenant ça marche nickel !!
Merci encore Maggio ! (j'ai failli sur ce coup là m'arracher la moitié des cheveux que j'ai sur le crâne ^^)