THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline

#1 Formulaire dans panneau coulissant : Comment feriez-vous ?

(14-04-2013 23:57:31)

Bonjour à tous,

J'ai besoin de mettre en place un menu qui après clic sur un lien me charge un formulaire (généré avec le plugin Formmagique dans mon cas) dans un conteneur qui slide du haut en bas (genre div caché contenant un formulaire qui s'ouvre quand on clique sur le menu), à chaque fois que l'internaute clique sur un nouveau lien le contenu du conteneur donc, change par rapport au lien cliqué dans le menu.

J'ai d'abord pensé au full css mais je ne crois pas que ce soit possible ??

Puis j'ai cherché sur le web si je pouvais trouver un plugin jquery qui puisse être adapté, je ne trouve rien…

J'ai pourtant trouvé quelque chose qui se rapproche de ce que je voudrais mettre en place : http://www.impressivewebs.com/demo-file … rop-downs/

Mais me voilà face à mon manque de savoir en ce qui concerne (pas mal de truc lol) le jquery et l'ajax, je n'arrive pas à l'adapter pour un affichage direct d'un template Thelia dans le conteneur.

Alors, j'en viens à me demander s'il n'existe pas une solution full Thelia que je n'ai pas imaginé (ça m'arrive souvent)…

Avez-vous déjà fait ce genre de chose et comment avez-vous fait svp ?

Peut être savez-vous comment modifier le code que je laisse en lien plus haut pour l'adapter à Thelia ?

Comment feriez-vous ?

Merci de vos commentaires, aides ou autre…

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#2 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(15-04-2013 03:46:05)

Salut!

Il suffit simplement de faire un $get ou $post en jquery selon le lien qui va chercher la page générant ton formulaire.

Exemple :
mon_formulaire1.html > génère ton formulaire 1
mon_formulaire2.html > génère ton formulaire 2
mon_formulaire3.html > génère ton formulaire 3

Html

<div id="mes_formulaires">
	<a href="mon_formulaire1.html">Mon formulaire 1</a>
	<a href="mon_formulaire2.html">Mon formulaire 2</a>
	<a href="mon_formulaire3.html">Mon formulaire 3</a>
</div>
<div id="mon_formulaire"></div>

jQuery

$('#mes_formulaires a').click(function(){
	var url=$(this).attr('href');
	//mettre ici ce que tu veux faire avant de charger le formulaire
	$('#mon_formulaire').html("Chargement en cours...");
	$.post(url, {ajax:1},
		function(result){
		$('#mon_formulaire').html(result);
		//mettre ici ce que tu veux faire une fois le formulaire chargé
	});
});

.htaccess

#à mettre avant la règle de réécriture globale
RewriteRule   ^mon_formulaire1.html  index.php?fond=mon_formulaire1  [NC,QSA,L]
RewriteRule   ^mon_formulaire2.html  index.php?fond=mon_formulaire2  [NC,QSA,L]
RewriteRule   ^mon_formulaire3.html  index.php?fond=mon_formulaire3  [NC,QSA,L]

si tu n'utilises pas le rewriting, il te faut mettre comme urls à tes liens : index.php?fond=mon_formulaire1, index.php?fond=mon_formulaire2, index.php?fond=mon_formulaire3

NB : mon {ajax:1} c'est au cas où tu voudrais pouvoir afficher tes pages mon_formulaire1.html, mon_formulaire2.html, mon_formulaire3.html de façon "normale".

C'est à dire avoir dans tes pages de formulaire (je mets en php vu que je ne sais pas comment tu construis tes templates) :

<?php
if(isset($_REQUEST['ajax'])){
	$ajax=$_REQUEST['ajax'];
}else{
	$ajax=0;
}
if(!$ajax){
	//on affiche toutes les balises html
	//on construit la page normalement (comme les autres, header, menus, ....
}
	//on affiche le formulaire
if(!$ajax){
	//on finit la construction de la page
	//on ferme les balises html
}
?>

Last edited by Elyos (15-04-2013 03:47:48)

Aide les autres, ils t'aideront en retour.

Offline

#3 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(15-04-2013 05:35:19)

Bonjour Elyos,

D'après ce que je comprends à ton code, il semble que je n'utilise rien du code du lien que j'ai laissé dans le post initial…

Si c'est le cas, alors je pense que je dois mettre le code jquery dans meta.html ?
Le php dans mes formulaires ? je suis donc obligé d'activer le plugin parsephp ?

Je n'ai pas les connaissances pour compléter ton code, mais je peux dire quel comportement j'attendrais, c'est en fait le même que celui du lien laissé en post #1 :

Quand je clique sur le menu Contact, le conteneur qui est par défaut caché (donc la div mon_formulaire dans ton exemple) s'ouvre et affiche le formulaire "contact", si je clique sur "demande d'inscription", le conteneur affiche le formulaire "demande d'inscription" ect… Les formulaires étant générés par le plugin formesmagiques.

Dans l'idéal le conteneur devrait aussi avoir une hauteur égal à la hauteur du formulaire suivant celui qui est affiché.

Le conteneur se ferme si le l'envoie est OK selon le comportement de formesmagique .

Extrait du lisez moi du plugin Formesmagiques :

<TEST_form_ok variable="#ENV{contactok,0}" test="egal" valeur="1">
<p>Merci !</p>
<p>Votre message à été transmis à notre équipe,
qui prendra contact avec vous dans les plus brefs délais.</p>
</TEST_form_ok>
<FORMULAIRE_contact titre="Formulaire de contact" traitement="email:#VARIABLE(emailcontact)"
urlsucces="#URLFOND(contact,contactok=1)" method="post" class="formulaire" id="contact">
#ERREUR_SAISIE[<div class="obligatoire">Merci d'indiquer les informations
indispensables</div>]

urlsucces: l'URL de redirection lorsque le formulaire est soumis sans erreurs. Ici, il s'agit du fond
contact.html, à laquelle on ajoute le paramètre contactok=1 afin d'indiquer à la boucle TEST que
la saisie est OK.
#ERREUR_SAISIE[texte] permet d'afficher le texte 'texte' si une erreur est détectée lors de la soumission du
formulaire.

Logiquement, je pense qu'il faut ajouter un bout de code jquery pour cacher la div conteneur puis un autre avant le chargement pour ouvrir le conteneur ?

Pour le rewriting, je compte l'utiliser mais seulement en ligne, si je l'active en local je n'ai que des erreurs genre Not Found.

Je vais essayer quand même de trouver pour le compléter… mais cela me semble tellement du chinois.

je te remercie grandement du temps que tu as consacré à me répondre.

neofarm

EDIT

Que pense tu de cela, je n'ai pas encore testé :

<script type="text/javascript">
  $(document).ready(function(){
   	$('#mon_formulaire').hide();
    $('#mes_formulaires a').click(function(){
	var url=$(this).attr('href');
	//mettre ici ce que tu veux faire avant de charger le formulaire
	$('#mon_formulaire').show('slow');
	$('#mon_formulaire').html("Chargement en cours...");
	$.post(url, {ajax:1},
		function(result){
		$('#mon_formulaire').html(result);
		//mettre ici ce que tu veux faire une fois le formulaire chargé
		//on ferme le conteneur si le formulaire et soumis
		$('#mes_formulaires').bind("submit", function(){
          $('#mon_formulaire').hide('slow');
        });
	});
});
</script>

Je ne sais pas si cela fonctionne mais j'ai les yeux qui piquent, je dois quand même aller dormir un peu, je regarde ça dès que mes yeux seront de nouveaux fonctionnels…

PS : Tu me dis que si ajax n'est pas actif , j'ai bien compris je pense, je peux grâce à ton code php afficher une page normal, mais sera-t-elle afficher comme les autres c'est à dire en dehors du conteneur ?

Last edited by neofarm (15-04-2013 07:30:47)

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#4 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(15-04-2013 20:38:00)

Dis moi ta version thelia et montre moi comment se présente une page type de ton site.

Aide les autres, ils t'aideront en retour.

Offline

#5 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(15-04-2013 21:54:43)

Ma version est la V 1.5.3.4

Une page type heu… pour le moment je n'ai pas trop touché aux pages mais plutôt coté menu, j'ai trois menus celui avec les formulaires qui pose ici problème, celui des rubriques principales auxquels sont associé des dossiers pour lequel j'ai utilisé un plugin jquery genre big menu et un pour des contenu uniquement (sans jquery), genre "qui sommes nous".

Les menus sont tous dans l'entête du site :
#INCLURE "template/menu_top.html" celui qui nous occupe ici
#INCLURE "template/menu_interne.html" le menu des dossiers uniquement
#INCLURE "template/main_menu.html" le menu des rubrique et des dossiers associés

Le menu_top devant sur clic ouverture de la div pousseant tous ce qui et en dessous vers le bas…

Les appels aux scripts jquery sont tous dans les pages meta, meta_contenu ,…, ainsi que les appels aux css.

En ce qui concerne, les pages contenus et dossier je pense installer le plugin template à la spip vu que je dois avoir quelques différence dans certains templates.

Petite précision, ma version Thelia est un peut détournée pour en faire un simple catalogue, toutes les boucles e-commerce (panier, prix, etc) seront supprimées.

J'utilise différent plugin jquery, notamment pour un diaporama sur l'index et sera mis en place dans les différentes rubriques ou dossiers…

J'ai installé le plugin formes magiques pour les formulaires qui seront affiché dans le conteneur. Je n'ai pas encore installé le plugin pour le php, mais je devrais certainement le faire puisqu'il y aurai du php dans les formulaires.

J'ai donc quelques difficultés à te présenter une page type…

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#6 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(16-04-2013 06:26:40)

Alors... je reprends tout...

mon_formulaire1.html > génère ton formulaire 1
mon_formulaire2.html > génère ton formulaire 2
mon_formulaire3.html > génère ton formulaire 3
....

Html mon_formulaire1.html
Tu crées un template comme pour n'importe quelle page du style :

<!doctype html>
<head>
#INCLURE "template/meta_formulaire.html"
#INCLURE "template/tag_stats.html"
</head>
<body>
<div id="principale">
	<div id="interface">
#INCLURE "template/entete.html"
#INCLURE "template/menu.html"
		<div id="chemin" class="grid_12"><a href="#URLSOMMAIRE">::accueil::</a> / Mon formulaire 1</div>
		<div id="contenu" class="grid_12">
			<TEST_form_ok variable="#ENV{contactok,0}" test="egal" valeur="1">
			<p>Merci !</p>
			<p>Votre message à été transmis à notre équipe,
			qui prendra contact avec vous dans les plus brefs délais.</p>
			</TEST_form_ok>
			<FORMULAIRE_contact titre="Formulaire de contact" traitement="email:#VARIABLE(emailcontact)"
			urlsucces="#URLFOND(contact,contactok=1)" method="post" class="formulaire" id="contact">
			#ERREUR_SAISIE[<div class="obligatoire">Merci d'indiquer les informations
			indispensables</div>]
		</div>
	</div>
</div>
#INCLURE "template/pied.html"
#INCLURE "template/signature.html"
</body>
</html>

Html à mettre dans ton menu

<div id="mes_formulaires">
	<a href="mon_formulaire1.html">Mon formulaire 1</a>
	<a href="mon_formulaire2.html">Mon formulaire 2</a>
	<a href="mon_formulaire3.html">Mon formulaire 3</a>
</div>

Html à mettre à l'endroit où afficher le(s) formulaire(s)

<div id="mon_formulaire"></div>

jQuery

$('#mes_formulaires a').click(function(){
	var url=$(this).attr('href');
	$('#mon_formulaire').html("Chargement en cours...").slideDown(500);
	$.post(url, function(result){
		afficheForm(result);
	});
});
function afficheForm(result){
	var mon_formulaire = jQuery("<div/>");
	mon_formulaire.html(result);
	$('#mon_formulaire').html($('#contenu',mon_formulaire).html());
	$('#mon_formulaire form').on('submit', function() {
		$('#mon_formulaire').html("Traitement en cours...");
		$.ajax({
			url: $(this).attr('action'), // le nom du fichier indiqué dans le formulaire
			type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
			data: $(this).serialize(), // je sérialise les données
			success: function(result) { // je récupère la réponse du fichier
				afficheForm(result); // j'affiche la réponse
			}
		});
		return false; // j'empêche le navigateur de soumettre lui-même le formulaire
	});
	//si tu as un bouton pour fermer le formulaire :
	$('#mon_formulaire .fermer').click(function() {
		$('#mon_formulaire').slideUp(400,function(){
			$(this).html('');
		});
	});
}

.htaccess

#à mettre avant la règle de réécriture globale
RewriteRule   ^mon_formulaire1.html  index.php?fond=mon_formulaire1  [NC,QSA,L]
RewriteRule   ^mon_formulaire2.html  index.php?fond=mon_formulaire2  [NC,QSA,L]
RewriteRule   ^mon_formulaire3.html  index.php?fond=mon_formulaire3  [NC,QSA,L]

si tu n'utilises pas le rewriting, il te faut mettre comme urls à tes liens : index.php?fond=mon_formulaire1, index.php?fond=mon_formulaire2, index.php?fond=mon_formulaire3

À tester ^^'

NB : Si un modo passe par là, sujet à déplacer dans Développement

Aide les autres, ils t'aideront en retour.

Offline

#7 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(16-04-2013 22:47:15)

Bonjour,

J'essaie de mettre en place ton code depuis un moment, mais je n'y arrive pas. Quand je clique sur contact ma page ne s'ouvre pas dans le conteneur qui ne s'ouvre pas du tout comme si il n'existait pas, la page formulaire s'affiche normalement.

Voilà les pages concernées :

Page menu_top.html (inclus dans entete)

<div id="Menu_forms" class="Menu_Top">
			<ul>
				<li ><a href="#URLSOMMAIRE">Accueil</a></li><!--Fermeture du conteneur, retour accueil-->
				<li class="MenuF"><a href="index.php?fond=contact">Contact</a></li>
			</ul>
</div>

<div id="conteneur" class="loading"></div>

Page entete.html 

<div id="top">
#INCLURE "template/menu_top.html"
<a href="#URLSOMMAIRE"><img id="logo_maint" src="template/_gfx/logo.jpg" alt="logo" height="112" width="192"></a>
<!--<h1><a href="#URLSOMMAIRE">#VARIABLE(nomsite)</a></h1>-->
#INCLURE "template/menu_interne.html"
#INCLURE "template/main_menu.html"
</div>

Page contact (formulaire)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	#INCLURE "template/meta.html"
	
</head>
<body>

<div id="wrapper">
	<div id="subwrapper">
		#INCLURE "template/entete.html"
          <div id="contenu">
              <TEST_form_ok variable="#ENV{contactok,0}" test="egal" valeur="1">
                   <p>Merci !</p>
                   <p>Votre message à été transmis à notre équipe,
                      qui prendra contact avec vous dans les plus brefs délais.</p>
              </TEST_form_ok>
               
               <FORMULAIRE_contact titre="Formulaire de contact" traitement="email:#VARIABLE(emailcontact)" urlsucces="#URLFOND(contact,contactok=1)" method="post" class="formulaire" id="contact"> #ERREUR_SAISIE[<div class="obligatoire">Merci d'indiquer les informations indispensables</div>]
                 
              <p>
                 <label class="#NOM[obligatoire]" for="nom">Votre Nom</label>
                 <input type="text" name="nom|f" id="nom" value="#NOM" />
              </p>
              
              <p>
                 <label class="#EMAIL[obligatoire]" class="obligatoire" for="email">Votre adresse E-mail[*]</label>
                 <input type="text" name="email|o|email|Adresse e-mail|#CLIENT_EMAIL" id="email" value="#EMAIL" />
              </p>
              
              <p>
                 <label class="#TELEPHONE[obligatoire]" for="telephone">Téléphone</label>
                 <input type="text" name="telephone|f||Téléphone" id="telephone" value="#TELEPHONE" />
              </p>
              
              <p>
                 <label class="#MESSAGE[obligatoire]" for="message">Votre message [*]</label>
                 <textarea rows="4" cols="50" name="message|o||Message" id="message">#MESSAGE</textarea>
              </p>
              
              <p>
                 <label class="infos-obligatoire">[*] Informations indispensables</label>
                 <button type="submit">Envoyer</button>
              </p>
              
              </FORMULAIRE_contact>
            <//TEST_form_ok>
         </div>
       #INCLURE "template/pied.html"
       #INCLURE "template/signature.html"
    </div>
</div>
</body>
</html>

Page meta.html

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>#VARIABLE(nomsite)</title>
    <meta name="description" content="Description de ma page web." />
    <meta name="keywords" lang="fr" content="motcle1,motcle2" />
   	<meta name="generator" content="thelia" />
 	<meta http-equiv="Content-Language" content="fr" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
	
	<link href="template/styles.css" rel="stylesheet" type="text/css" />
	
	<script src="lib/jquery/jquery.js" type="text/javascript"></script>
	<script src="template/js/panier.js" type="text/javascript"></script>
	
	<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,300,700' rel='stylesheet' type='text/css'>
<!-- slider principale--->	
	<link href="template/jquery.bxslider.css" rel="stylesheet" type="text/css" />
	<script src="template/js/jquery.bxSlider.min.js" type="text/javascript"></script>
	<script src="template/js/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="template/js/jquery.fitvids.js" type="text/javascript"></script>
<!-- Fin slider principale--->	
<!-- menu principale--->	
    <link href="template/css/dcmegamenu.css" rel="stylesheet" type="text/css" />
    <link href="template/css/skins/megamenu.css" rel="stylesheet" type="text/css" />
    
    <script type='text/javascript' src='template/js/jquery.hoverIntent.minified.js'></script>
    <script type='text/javascript' src='template/js/jquery.dcmegamenu.1.3.3.js'></script>
    <script type="text/javascript">
      $(document).ready(function($){
	     $('#mega-menu').dcMegaMenu({
		     rowItems: '3',
		     speed: 'fast',
		     effect: 'slide'
	     });

      });
    </script>
<!-- Fin menu principale--->

<!-- Menu formulaires-->
<script type="text/javascript">
  $(document).ready(function(){
  	$('#Menu_forms a').click(function(){
	var url=$(this).attr('href');
	$('#conteneur').html("Chargement en cours...").slideDown(500);
	$.post(url, function(result){
		afficheForm(result);
	});
});
function afficheForm(result){
	var conteneur = jQuery("<div/>");
	conteneur.html(result);
	$('#conteneur').html($('#contenu',conteneur).html());
	$('#conteneur form').on('submit', function() {
		$('#conteneur').html("Traitement en cours...");
		$.ajax({
			url: $(this).attr('action'), // le nom du fichier indiqué dans le formulaire
			type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
			data: $(this).serialize(), // je sérialise les données
			success: function(result) { // je récupère la réponse du fichier
				afficheForm(result); // j'affiche la réponse
			}
		});
		return false; // j'empêche le navigateur de soumettre lui-même le formulaire
	});
	//si tu as un bouton pour fermer le formulaire :
	$('#conteneur .fermer').click(function() {
		$('#conteneur').slideUp(400,function(){
			$(this).html('');
		});
	});
}
</script>
<!-- Menu formulaires-->

J'ai oublié de te dire un truc qui a certainement son importance, j'en suis désolé, la version de thelia est bien 1.5.3.4 mais le template est celui de la 1.5.2, l'ancien donc.

Est-ce pour cela que ça ne fonctionne pas ou bien je m'y prends mal ?


Merci pour ton aide.

Last edited by neofarm (16-04-2013 23:22:11)

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#8 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(17-04-2013 06:41:50)

J'ai ajouté le css dans mon menu et remis les id des div  que tu avais mis à l'origine voilà ce que ça donne maintenant :

Page menu_top.html

<div id="mes_formulaires">
			<ul class="nav">
				<li ><a href="#URLSOMMAIRE">Accueil</a></li>
				<li class="MenuF"><a href="index.php?fond=contact">Contact</a></li>
			</ul>
</div>

<div id="mon_formulaire" class="loading"><!--la class .loading pour ajouter une image de chargement pour le moment je ne sais pas encore faire -->
<div class='fermer'><a href='#'>Fermer</a></div><!-- bouton pour fermer la div-->
</div>

Feuille de styles pour le menu formulaire : style_conteneur.css 

#top ul.nav { 
	list-style:none; 
}


#top #mes_formulaires {
	width: 960px;
	margin: 0 auto;
}

#top #mes_formulaires ul.nav {
	height: 30px;
	overflow: hidden;
	border: solid 1px #ccc;
	width: 960px;
	margin: 0 auto;
}

#top #mes_formulaires ul.nav li {
	float: right;
}

#top #mes_formulaires ul.nav li a, ul.nav li a:link, ul.nav li a:visited {
	display: block;
	height: 30px;
	padding: 0 20px;
	float: left;
	line-height: 30px;
	text-decoration: none;
	border-right: solid 1px #ccc;
}

#top #mes_formulaires ul.nav li a:hover, ul.nav li a:active {
	color: black;	
}
		
#top #mes_formulaires ul.nav li a.active, ul.nav li a.active:link, ul.nav li a.active:visited {
	background: #ccc;
	color: #fff;
}
	
#top #mes_formulaires ul.nav li a span {
    color: #ccc;
    font-size: 11px;
	_font-size: 9px; /* for IE6 */
}
		
#top #mes_formulaires ul.nav li a.active span {
	color: #000;
    font-size: 11px;
	_font-size: 9px; /* for IE6 */
}

#top #mon_formulaire {
	width: 960px;
	margin: 0 auto;
	border: solid 1px #ccc;
	border-top: none;
        position: relative;
	overflow: hidden;
	/*height: 700px;*/
}
	
/*.loading {
	background: transparent url(../images/loading.gif) no-repeat center center;
}*/
	
	
#top #mon_formulaire .fermer {
	position: absolute;
	top: 680px;
	right: 10px;
}

J'ai aussi copié collé le code javascript sans y toucher, je pensais que c'était mes modifs qui n'étaient pas correct.

Toujours dans meta.html

<script type="text/javascript">
  	$('#mes_formulaires a').click(function(){
	var url=$(this).attr('href');
	$('#mon_formulaire').html("Chargement en cours...").slideDown(500);
	$.post(url, function(result){
		afficheForm(result);
	});
});
function afficheForm(result){
	var mon_formulaire = jQuery("<div/>");
	mon_formulaire.html(result);
	$('#mon_formulaire').html($('#contenu',mon_formulaire).html());
	$('#mon_formulaire form').on('submit', function() {
		$('#mon_formulaire').html("Traitement en cours...");
		$.ajax({
			url: $(this).attr('action'), // le nom du fichier indiqué dans le formulaire
			type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
			data: $(this).serialize(), // je sérialise les données
			success: function(result) { // je récupère la réponse du fichier
				afficheForm(result); // j'affiche la réponse
			}
		});
		return false; // j'empêche le navigateur de soumettre lui-même le formulaire
	});
	//si tu as un bouton pour fermer le formulaire :
	$('#mon_formulaire .fermer').click(function() {
		$('#mon_formulaire').slideUp(400,function(){
			$(this).html('');
		});
	});
}
</script>

La page contact et l'entete ont le même code que plus haut.

J'ai la div mon_formulaire ouverte (elle était ouverte car j'avais mis height:700px dans le css, je l'ai mis en commentaire depuis) sans contenu avec le texte fermer mais aucune action quand on clique dessus, toujours pas de formulaire affiché dedans… je dois pas faire les choses comme il faudrait.

Last edited by neofarm (17-04-2013 07:15:58)

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#9 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(17-04-2013 13:31:22)

Patience, je vais faire mes tests de mon côté et reviens vers toi après wink

Aide les autres, ils t'aideront en retour.

Offline

#10 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(20-04-2013 04:11:12)

Du nouveau de mon coté, mais encore pas de solution. J'arrive à faire afficher la page contact.html dans la div mon_formulaire mais entièrement, impossible de n'avoir que la div #contenu.

Je ne peux pas laisser que la div #contenu dans ma page contact.html car si javascript est désactivé il vaut mieux que la page s'affiche normalement.

Voici mon petit bout de code (trouvé sur le web et adapté) qui affiche la page contact.html dans la div "mon_formulaire" :

<script type="text/javascript">
$(document).ready(function(){   // le document est chargé
$("#mes_formulaires a").click(function(){   // on selectionne tous les liens et on définit une action quand on clique dessus
page=($(this).attr("href")); // on recuperer l' adresse du lien
$.ajax({ // ajax
url: page, // url de la page à charger
cache: false, // pas de mise en cache
success:function(html){ // si la requête est un succès
afficher(html);     // on execute la fonction afficher(donnees)
},
error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
}
});
return false; // on desactive le lien
});
});
function afficher(donnees){ // pour remplacer le contenu du div contenu
$("#mon_formulaire").empty(); // on vide le div
$("#mon_formulaire").append(donnees); // on met dans le div le résultat de la requête ajax
}
</script>

Comme je n'y comprends pas grand chose au javascript ce n'est pas encore ça… malheureusement.

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#11 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(20-04-2013 13:59:58)

Après quelques tests :

à ajouter dans ton menu

<div id="mes_formulaires">
	<a href="form1.html">Mon formulaire 1</a><br />
	<a href="form2.html">Mon formulaire 2</a><br />
	<a href="form3.html">Mon formulaire 3</a><br />
</div>

à ajouter dans meta.html

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
	$('#mes_formulaires a').click(function(){
		var url=$(this).attr('href');
		$('#mon_formulaire').html("Chargement en cours...").slideDown(500);
		$.post(url, function(result){
			afficheForm(result);
		});
		return false;
	});
	function afficheForm(result){
		 var mon_formulaire = $(result).find('#mon_formulaire');
		$('#mon_formulaire').html(mon_formulaire);
		$('#mon_formulaire form').submit(function() {
			$('#mon_formulaire').html("Traitement en cours...");
			$.ajax({
				url: $(this).attr('action'), // le nom du fichier indiqué dans le formulaire
				type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
				data: $(this).serialize(), // je sérialise les données
				success: function(result) { // je récupère la réponse du fichier
					afficheForm(result); // j'affiche la réponse
				}
			});
			return false; // j'empêche le navigateur de soumettre lui-même le formulaire
		});
		//si tu as un bouton pour fermer le formulaire :
		$('#mon_formulaire .fermer').click(function() {
			$('#mon_formulaire').slideUp(400,function(){
				$(this).html('');
			});
		});
	}
});
// ]]>
</script>

à ajouter dans form1.html (2,3,...)

<div id="mon_formulaire">
<TEST_form_ok variable="#ENV{contactok,0}" test="egal" valeur="1">
   <p>Merci !</p>
   <p>Votre message à été transmis à notre équipe,
	  qui prendra contact avec vous dans les plus brefs délais.</p>
</TEST_form_ok>

<FORMULAIRE_contact titre="Formulaire de contact" traitement="email:#VARIABLE(emailcontact)" urlsucces="#URLFOND(contact,contactok=1)" method="post" class="formulaire" id="contact"> #ERREUR_SAISIE[<div class="obligatoire">Merci d'indiquer les informations indispensables</div>]
 
<p>
 <label class="#NOM[obligatoire]" for="nom">Votre Nom</label>
 <input type="text" name="nom|f" id="nom" value="#NOM" />
</p>

<p>
 <label class="#EMAIL[obligatoire]" class="obligatoire" for="email">Votre adresse E-mail[*]</label>
 <input type="text" name="email|o|email|Adresse e-mail|#CLIENT_EMAIL" id="email" value="#EMAIL" />
</p>

<p>
 <label class="#TELEPHONE[obligatoire]" for="telephone">Téléphone</label>
 <input type="text" name="telephone|f||Téléphone" id="telephone" value="#TELEPHONE" />
</p>

<p>
 <label class="#MESSAGE[obligatoire]" for="message">Votre message [*]</label>
 <textarea rows="4" cols="50" name="message|o||Message" id="message">#MESSAGE</textarea>
</p>

<p>
 <label class="infos-obligatoire">[*] Informations indispensables</label>
 <button type="submit">Envoyer</button>
</p>

</FORMULAIRE_contact>
<//TEST_form_ok>
</div>

Aide les autres, ils t'aideront en retour.

Offline

#12 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(20-04-2013 21:51:52)

Bonjour,

Bon, après avoir copié coller ton code dans les pages concernées, ça ne fonctionne pas. J'ai à la place du formulaire dans une toute petite div sous le menu, le texte chargement en cours… qui est écrit mais la page apparemment est déjà chargé.

Il n'y a plus la page complète pour les formulaires, cela va certainement poser des problèmes si javascript est désactivé sur le nav des internautes consultant le site, il sera donc impossible pour ceux-ci d'avoir accès aux formulaires ???

Je dois dire que je me demande si ce que je veux faire est possible… peut être est-ce trop compliqué !

Le code aux post #10 fonctionne mais je n'arrive pas à afficher que la div #contenu si javascript true ou complétement si javascript false et le traitement du formulaire ?

Ton code après test chez toi fonctionne certainement, je dois alors faire quelque chose de travers, mais quoi… ou quelque chose fait que ton code n'a pas le même comportement chez moi que chez toi ? Peut être le CSS ? que j'ai laissé puisqu'il faut bien que je traite ce point là. (EDIT : bon après test sans css cela ne change rien toujours pas de résultat)

Je te remercie de ton intérêt pour mon souci et du temps que tu passes à trouver une solution. J'essaie de mon coté de trouver aussi une solution mais je pense que tu es mieux placer pour résoudre cela que moi, mais je ne voudrais pas abuser non plus.

Last edited by neofarm (20-04-2013 21:59:36)

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#13 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(20-04-2013 23:08:59)

Fournis moi :
- Le template d'une page et ses sous-template (ce qui sont en #INCLURE)
- Le template d'une page de formulaire

Aide les autres, ils t'aideront en retour.

Offline

#14 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(21-04-2013 00:54:52)

Voici la page index.html (il y aura des modifications par la suite, suppression des éléments en rapport avec le e-commerce):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
#INCLURE "template/meta.html"

<script type="text/javascript">
jQuery(function($){
   $('#sliders').bxSlider({
  mode: 'fade',
  speed: 1500,
  auto: true,
  pause: 4000,
  controls: false,
});	
});
</script>

</head>
<body>

<div id="wrapper">
	<div id="subwrapper">
	    
		#INCLURE "template/entete.html"
		<div id="contenu_slider">
		<div class="bx-wrapper">
        <ul id="sliders">
        <THELIA_MENU_CONTENU type="DOSSIER" parent="0" id="7" classement="manuel" ligne="1">
           <THELIA_MENU_SSCONTENU type="CONTENU" dossier="#ID">
              <THELIA_IMAGE type="IMAGE" contenu="#ID" >
                <li><img src="#IMAGE" alt="#TITRE" title="#TITRE"/></li>
              </THELIA_IMAGE>
           </THELIA_MENU_SSCONTENU>
        </THELIA_MENU_CONTENU>
        
        </ul>
        </div>
        </div>
		
		<!--<div id="chemin">::navigation:: : <a href="#URLSOMMAIRE">::accueil::</a></div>-->
		<!--#INCLURE "template/menu.html"-->
        <div id="contenu">
            <div class="blocNouveaute">
                <THELIA_NOUVEAUTE type="PRODUIT" aleatoire="1" nouveaute="1" num="1">
                <h3><a href="#URLFOND(rubrique,nouveaute=1)">::nouveautes::</a></h3>
                <div class="contenu">
                    <a href="#URL" class="image">
                    <THELIA_IMAGE type="IMAGE" num="1" produit="#ID" hauteur="140">
                                <img src="#IMAGE" alt="#PRODTITRE" title="#PRODTITRE"/>
                    </THELIA_IMAGE>
                    </a>
                    <div class="description">
                        <h4><a href="#URL">#TITRE</a></h4>
                        <span class="chapo">#CHAPO</span>
                        <span class="prixProduit">#PROMO[#PRIX2 €<br/><span class="chapo">::changprix:: #PRIX €</span>][#PRIX €]</span>
                		<p><a class="acheter" href="#PANIER"><span><span>::ajouterpanier::</span></span></a></p>
                		<p><a class="acheter" href="#URL"><span><span>::infosup::</span></span></a></p>
                    </div>
                </div>
                <a href="#URLFOND(rubrique,nouveaute=1)" class="toutesLesNouveautes">::nouveautes2::</a>
                </THELIA_NOUVEAUTE>
            </div>
            <div class="blocPromo">
                <THELIA_PROMO type="PRODUIT" aleatoire="1" promo="1" num="1">
                <h3><a href="#URLFOND(rubrique,promo=1)">::promo::</a></h3>
                <div class="contenu">
                    <a href="#URL" class="image">
                    <THELIA_IMAGE type="IMAGE" num="1" produit="#ID" hauteur="140">
					<img src="#IMAGE" alt="#PRODTITRE" title="#PRODTITRE"/>
                    </THELIA_IMAGE>
                    </a>
                    <div class="description">
                        <h4><a href="#URL">#TITRE</a></h4>
                        <span class="chapo">#CHAPO</span>
                        <span class="prixProduit">#PROMO[#PRIX2 €<br/><span class="chapo">::changprix:: #PRIX €</span>][#PRIX €]</span>
                		<p><a class="acheter" href="#PANIER"><span><span>::ajouterpanier::</span></span></a></p>
                		<p><a class="acheter" href="#URL"><span><span>::infosup::</span></span></a></p>
                    </div>
                </div>
                <a href="#URLFOND(rubrique,promo=1)" class="toutesLesPromos">::promo2::</a>
				</THELIA_PROMO>
            </div>
            <div class="blocMozaique">
                <h3>::decouvrez::</h3>
                <div class="contenu">
					<ul class="image">
                        <THELIA_DECOUVREZ type="PRODUIT" aleatoire="1" num="8">
                        <li><a href="#URL" onmouseover="return escape('&lt;h5&gt;#TITRE&lt;/h5&gt;#PRIX €')">
                        	<THELIA_IMAGE type="IMAGE" num="1" produit="#ID"  hauteur="81">

                                    	<img src="#IMAGE" alt="#PRODTITRE" title="#PRODTITRE"/>

                        	</THELIA_IMAGE>
                        </a></li>
                        </THELIA_DECOUVREZ>
                    </ul>
                </div>
            </div>
        </div>
	#INCLURE "template/pied.html"
	#INCLURE "template/signature.html"
	</div>
</div>

<script language="JavaScript" type="text/javascript" src="template/js/wz_tooltip.js"></script>
</body>
</html>

La page meta.html (j'ai laissé le premier code que tu m'a fourni / le code jquery et  également ajouté dans les meta_contenu, meta_produit, etc)

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>#VARIABLE(nomsite)</title>
    <meta name="description" content="Description de ma page web." />
    <meta name="keywords" lang="fr" content="motcle1,motcle2" />
   	<meta name="generator" content="thelia" />
 	<meta http-equiv="Content-Language" content="fr" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
	
	<link href="template/styles.css" rel="stylesheet" type="text/css" />
	<link href="template/css/style_conteneur.css" rel="stylesheet" type="text/css" />
	
	<script src="lib/jquery/jquery.js" type="text/javascript"></script>
	<script src="template/js/panier.js" type="text/javascript"></script>
	
	<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,300,700' rel='stylesheet' type='text/css'>
<!-- slider principale--->	
	<link href="template/jquery.bxslider.css" rel="stylesheet" type="text/css" />
	<script src="template/js/jquery.bxSlider.min.js" type="text/javascript"></script>
	<script src="template/js/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="template/js/jquery.fitvids.js" type="text/javascript"></script>
<!-- Fin slider principale--->	
<!-- menu principale--->	
    <link href="template/css/dcmegamenu.css" rel="stylesheet" type="text/css" />
    <link href="template/css/skins/megamenu.css" rel="stylesheet" type="text/css" />
    
    <script type='text/javascript' src='template/js/jquery.hoverIntent.minified.js'></script>
    <script type='text/javascript' src='template/js/jquery.dcmegamenu.1.3.3.js'></script>
    <script type="text/javascript">
      $(document).ready(function($){
	     $('#mega-menu').dcMegaMenu({
		     rowItems: '3',
		     speed: 'fast',
		     effect: 'slide'
	     });

      });
    </script>
<!-- Fin menu principale--->

<!-- Menu formulaires-->
<script type="text/javascript">
$(document).ready(function(){  
  	$('#mes_formulaires a').click(function(){
	var url=$(this).attr('href');
	$('#mon_formulaire').html("Chargement en cours...").slideDown(500);
	$.post(url, function(result){
		afficheForm(result);
	});
});
function afficheForm(result){
	var mon_formulaire = jQuery("<div/>");
	mon_formulaire.html(result);
	$('#mon_formulaire').html($('#contenu',mon_formulaire).html());
	$('#mon_formulaire form').on('submit', function() {
		$('#mon_formulaire').html("Traitement en cours...");
		$.ajax({
			url: $(this).attr('action'), // le nom du fichier indiqué dans le formulaire
			type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
			data: $(this).serialize(), // je sérialise les données
			success: function(result) { // je récupère la réponse du fichier
				afficheForm(result); // j'affiche la réponse
			}
		});
		return false; // j'empêche le navigateur de soumettre lui-même le formulaire
	});
	//si tu as un bouton pour fermer le formulaire :
	$('#mon_formulaire .fermer').click(function() {
		$('#mon_formulaire').slideUp(400,function(){
			$(this).html('');
		});
	});
}
}
</script>
<!-- Menu formulaires-->

La page entete.html :

<div id="top">
#INCLURE "template/menu_top.html"
<a href="#URLSOMMAIRE"><img id="logo_maint" src="template/_gfx/logo.jpg" alt="logo" height="112" width="192"></a>
<!--<h1><a href="#URLSOMMAIRE">#VARIABLE(nomsite)</a></h1>-->
#INCLURE "template/menu_interne.html"
#INCLURE "template/main_menu.html"
</div>

La page menu_top.html (avec les balises css / incluse dans entete.html)

<div id="mes_formulaires">
			<ul class="nav">
				<li ><a href="#URLSOMMAIRE">Accueil</a></li>
				<li class="MenuF"><a href="index.php?fond=contact">Contact</a></li>
			</ul>
</div>

<div id="mon_formulaire" class="loading">

</div>

Et la page du formulaire contact.html (il est possible que les autres formulaires aient un champ du type "fichier: un fichier à uploader." ou encore select enfin tout ce que peut permettre le plugin Formes magiques)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	#INCLURE "template/meta.html"
	
</head>
<body>

<div id="wrapper">
	<div id="subwrapper">
		#INCLURE "template/entete.html"
          <div id="contenu">
              <TEST_form_ok variable="#ENV{contactok,0}" test="egal" valeur="1">
<p>Merci !</p>
<p>Votre message à été transmis à notre équipe,
qui prendra contact avec vous dans les plus brefs délais.</p>
</TEST_form_ok>
<FORMULAIRE_contact titre="Formulaire de contact" traitement="email:#VARIABLE(emailcontact)"
urlsucces="#URLFOND(contact,contactok=1)" method="post" class="formulaire" id="contact">
#ERREUR_SAISIE[<div class="obligatoire">Merci d'indiquer les informations
indispensables</div>]
<p>
<label class="#NOM[obligatoire]" for="nom">Votre Nom</label>
<input type="text" name="nom|f" id="nom" value="#NOM" />
</p>
<p>
<label class="#EMAIL[obligatoire]" class="obligatoire" for="email">Votre adresse E-mail
[*]</label>
<input type="text" name="email|o|email|Adresse e-mail|#CLIENT_EMAIL" id="email"
value="#EMAIL" />
</p>
<p>
<label class="#TELEPHONE[obligatoire]" for="telephone">Téléphone</label>
<input type="text" name="telephone|f||Téléphone" id="telephone" value="#TELEPHONE" />
</p>
<p>
<label class="#MESSAGE[obligatoire]" for="message">Votre message [*]</label>
<textarea rows="4" cols="50" name="message|o||Message" id="message">#MESSAGE</textarea>
</p>
<p>
<label for="code" class="#CODE[obligatoire]" >
Veuillez recopier le code ci-dessous pour valider votre message<br />
<img src="#CODE_URL_IMAGE" alt="Captcha" id="captcha" /><br />
<a href="#" onclick="document.images.captcha.src='#CODE_URL_CHANGER_IMAGE'; return
false">Changer ce code</a>
</label>
<!-- Changer d'image à la volée si elle est illisible -->
<input type="text" id="code" class="#CODE[obligatoire]" style="float: none" name="code|o|
captcha" />
</p>
<p>
<label class="infos-obligatoire">[*] Informations indispensables</label>
<button type="submit">Envoyer</button>
</p>
</FORMULAIRE_contact>
<//TEST_form_ok>         </div>
       #INCLURE "template/pied.html"
       #INCLURE "template/signature.html"
    </div>
</div>
</body>
</html>

J'uilise la version thelia 1.5.3.4 mais avec le template de la version 1.5.2

Est-ce que cela tu suffit ?

Last edited by neofarm (21-04-2013 00:56:10)

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#15 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(22-04-2013 13:10:40)

Relis bien ce que j'ai mis dans mon code....

En appliquant exactement ce que j'ai dis sur un template vierge, ça fonctionne nickel.

NB : tous les liens qui seront dans la div id="mes_formulaires" réagiront de la même façon si tu veux avoir plus de souplesse, enlève le div  id="mes_formulaires" et ajoute la classe "formulaire" aux liens que tu veux charger en tant que "formulaire" et dans ce cas, dans le code jquery, remplacer #mes_formulaires par a.formulaire

Last edited by Elyos (22-04-2013 13:11:50)

Aide les autres, ils t'aideront en retour.

Offline

#16 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(22-04-2013 22:33:55)

Bonjour Elyos,

Il me semble avoir appliqué ce que tu dis et pourtant le comportement n'est pas le même que chez toi. J'ai externalisé le js car il y avait un comportement bizarre avec mon slider sur ma page index (bxslider). J'ai aussi essayé sans le slider mais ça ne change rien ça ne fonctionne toujours pas.

Ma page menu_top.html :

<div id="mes_formulaires">
			
			<a href="contact.html">Contact</a>
			<a href="index.php?fond=demandeBrochure">Demande de brochure</a>
		
</div>

<div id="mon_formulaire" class="loading">

</div>

Le lien href="index.php?fond=demandeBrochure" affiche bien le formulaire mais dans une page en dehors de Thelia et de la div "mon_formulaire". Le lien de type "href="contact.html" affiche un page blanche avec écrit "Impossible d'ouvrir 404 (template/404.html)".

Si je supprime la div "mon_formulaire" puisqu'elle existe déjà dans les pages contenant les formulaires, le comportement est le même que ci-dessus.

Mon formulaire contact (contact.html)

          <div id="mon_formulaire">
              <TEST_form_ok variable="#ENV{contactok,0}" test="egal" valeur="1">
                   <p>Merci !</p>
                   <p>Votre message à été transmis à notre équipe,
                      qui prendra contact avec vous dans les plus brefs délais.</p>
              </TEST_form_ok>
               
               <FORMULAIRE_contact titre="Formulaire de contact" traitement="email:#VARIABLE(emailcontact)" urlsucces="#URLFOND(contact,contactok=1)" method="post" class="formulaire" id="contact"> #ERREUR_SAISIE[<div class="obligatoire">Merci d'indiquer les informations indispensables</div>]
                 
              <p>
                 <label class="#NOM[obligatoire]" for="nom">Votre Nom</label>
                 <input type="text" name="nom|f" id="nom" value="#NOM" />
              </p>
              
              <p>
                 <label class="#EMAIL[obligatoire]" class="obligatoire" for="email">Votre adresse E-mail[*]</label>
                 <input type="text" name="email|o|email|Adresse e-mail|#CLIENT_EMAIL" id="email" value="#EMAIL" />
              </p>
              
              <p>
                 <label class="#TELEPHONE[obligatoire]" for="telephone">Téléphone</label>
                 <input type="text" name="telephone|f||Téléphone" id="telephone" value="#TELEPHONE" />
              </p>
              
              <p>
                 <label class="#MESSAGE[obligatoire]" for="message">Votre message [*]</label>
                 <textarea rows="4" cols="50" name="message|o||Message" id="message">#MESSAGE</textarea>
              </p>
              
              <p>
                 <label class="infos-obligatoire">[*] Informations indispensables</label>
                 <button type="submit">Envoyer</button>
              </p>
              
              </FORMULAIRE_contact>
            <//TEST_form_ok>
         </div>

Mon script js dans la page forms_menu.js

<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
	$('#mes_formulaires a').click(function(){
		var url=$(this).attr('href');
		$('#mon_formulaire').html("Chargement en cours...").slideDown(500);
		$.post(url, function(result){
			afficheForm(result);
		});
		return false;
	});
	function afficheForm(result){
		 var mon_formulaire = $(result).find('#mon_formulaire');
		$('#mon_formulaire').html(mon_formulaire);
		$('#mon_formulaire form').submit(function() {
			$('#mon_formulaire').html("Traitement en cours...");
			$.ajax({
				url: $(this).attr('action'), // le nom du fichier indiqué dans le formulaire
				type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
				data: $(this).serialize(), // je sérialise les données
				success: function(result) { // je récupère la réponse du fichier
					afficheForm(result); // j'affiche la réponse
				}
			});
			return false; // j'empêche le navigateur de soumettre lui-même le formulaire
		});
		//si tu as un bouton pour fermer le formulaire :
		$('#mon_formulaire .fermer').click(function() {
			$('#mon_formulaire').slideUp(400,function(){
				$(this).html('');
			});
		});
	}
});
// ]]>
</script>

Ma page meta.html avec l'appel <script src="template/js/forms_menu.js" type="text/javascript"></script>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>#VARIABLE(nomsite)</title>
    <meta name="description" content="Description de ma page web." />
    <meta name="keywords" lang="fr" content="motcle1,motcle2" />
   	<meta name="generator" content="thelia" />
 	<meta http-equiv="Content-Language" content="fr" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
	
	<link href="template/styles.css" rel="stylesheet" type="text/css" />
	<link href="template/css/style_conteneur.css" rel="stylesheet" type="text/css" />
	
	<script src="lib/jquery/jquery.js" type="text/javascript"></script>
	<script src="template/js/panier.js" type="text/javascript"></script>
	<script src="template/js/forms_menu.js" type="text/javascript"></script>
	
	<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,300,700' rel='stylesheet' type='text/css'>
<!-- slider principale--->	
	<link href="template/jquery.bxslider.css" rel="stylesheet" type="text/css" />
	<script src="template/js/jquery.bxSlider.min.js" type="text/javascript"></script>
	<script src="template/js/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="template/js/jquery.fitvids.js" type="text/javascript"></script>
<!-- Fin slider principale--->	
<!-- menu principale--->	
    <link href="template/css/dcmegamenu.css" rel="stylesheet" type="text/css" />
    <link href="template/css/skins/megamenu.css" rel="stylesheet" type="text/css" />
    
    <script type='text/javascript' src='template/js/jquery.hoverIntent.minified.js'></script>
    <script type='text/javascript' src='template/js/jquery.dcmegamenu.1.3.3.js'></script>
    <script type="text/javascript">
      $(document).ready(function($){
	     $('#mega-menu').dcMegaMenu({
		     rowItems: '3',
		     speed: 'fast',
		     effect: 'slide'
	     });

      });
    </script>
<!-- fin menu principale--->

Voilà je ne vois pas ce que je fais de travers.

Mais je n'arrive pas à faire fonctionner tout ça, je comprend pas pourquoi ça marche chez toi et pas chez moi.

Peut être à cause del'histoire de la version Thelia 1.5.3.4 et du template 1.5.2 ???? J'ai juste remplacé le dossier template d'origine de la version 1.5.3.4 par le dossier template de la version 1.5.2, est-ce une bêtise ?

EDIT :

J'ai remis le js dans meta.html, j'ai maintenant la div qui s'ouvre mais toujours avec le texte "chargement en cours…" mais rien d'autre.

Last edited by neofarm (22-04-2013 22:55:08)

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#17 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(23-04-2013 01:31:21)

Bon j'ai les nerfs à vif, je n'y arrive pas… grrrrrrrrrrrrrrrrrrrr

Je perd mon temps avec ce truc, ça me rends dingue que ça marche chez toi et pas chez moi, tu as la même version et le même template que moi ?

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#18 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(23-04-2013 02:43:08)

Quand tu accèdes à contact.html, ça fonctionne ?

C'est en ligne ?

Aide les autres, ils t'aideront en retour.

Offline

#19 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(23-04-2013 03:41:42)

Si je tape l'url http://localhost:8888/nom_du_site/?fond=contact.html j'ai le formulaire mais dans une page hors Thelia, puisqu'il n'y a que le formulaire dans la page.

Non je suis en local.

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#20 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(24-04-2013 04:29:20)

Toujours pas de résultat, j'ai essayée avec le code que je donne au post #10 et la solution php que tu donne (post #2) pour afficher que la div où se trouve le code du formulaire, mais voilà ça ne fonctionne pas non plus (j'ai bien le plugin parsephp activé et PARAM_FOND_parsephp=1 dans la page du formulaire, mais pas de résultat non plus.

Et de toute manière ce code affiche bien le formulaire dans la div mon_formulaire mais celui-ci ne fonctionne pas, je ne reçois pas le mail avec le résultat du formulaire comme il est prévu dans le plugin formulaires magiques.

Donc toujours au même point… C'est désespérant !

Last edited by neofarm (24-04-2013 04:30:06)

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#21 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(24-04-2013 11:36:03)

<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
	$('#mes_formulaires a').click(function(){
		var url=$(this).attr('href');
		alert('Chargement : '+url);
		$('#mon_formulaire').html("Chargement en cours...").slideDown(500);
		$.post(url, function(result){
			alert('Chargement fini');
			afficheForm(result);
		});
		return false;
	});
	function afficheForm(result){
		alert('afficheForm : '+result);
		var mon_formulaire = $(result).find('#mon_formulaire');
		$('#mon_formulaire').html(mon_formulaire);
		$('#mon_formulaire form').submit(function() {
			$('#mon_formulaire').html("Traitement en cours...");
			$.ajax({
				url: $(this).attr('action'), // le nom du fichier indiqué dans le formulaire
				type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
				data: $(this).serialize(), // je sérialise les données
				success: function(result) { // je récupère la réponse du fichier
					afficheForm(result); // j'affiche la réponse
				}
			});
			return false; // j'empêche le navigateur de soumettre lui-même le formulaire
		});
		//si tu as un bouton pour fermer le formulaire :
		$('#mon_formulaire .fermer').click(function() {
			$('#mon_formulaire').slideUp(400,function(){
				$(this).html('');
			});
		});
	}
});
// ]]>
</script>

Dis moi ce que ça fait...

NB : En local je ne suis pas sûre si les mails s'envoient...

Aide les autres, ils t'aideront en retour.

Offline

#22 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(24-04-2013 17:25:33)

Alors je clique sur contact dans le menu et j'ai maintenant des boites de dialogues qui s'ouvrent :

la première contient :

Chargement : ?fond=contact

puis clique sur ok

la deuxième contient :

Chargement fin

puis clique sur ok

la troisième contient le code :

afficheForm : <div id="mon_formulaire">
              <form name="contact" method="post" class="formulaire" id="contact">
<input type="hidden" name="form_sid" value="frm_contact" />
<input type="hidden" name="action" value="formesmagiques" />
              <div class="formline">
                <label class="infos-obligatoire"><span class="rouge">Informations indispensables</span> <span class="etoile">*</span></label>
              </div>
              <div class="formline">
                <label class="" for="nom">Votre Nom Prénom :</label>
                <input  type="text" name="nom" id="nom" value="" size="50" />
              </div>
              <div class="formline">
                <label class="" class="obligatoire" for="email">Votre adresse E-mail :<span class="etoile">*</span></label>
                <input  type="text" name="email" id="email" value="" size="80" />
              </div>
              <div class="formline">
                <label class="" for="telephone">Téléphone :</label>
                <input  type="text" name="telephone" id="telephone" value="" />
              </div>
              <div class="formline">
                <label class="" for="message">Vos commentaires, suggestions ou questions <span class="etoile">*</span></label><br />
                <textarea  rows="8" cols="80" name="message" id="message"></textarea>
              </div>
              <div class="formline">
                <label for="code">Pour la lutte anti-robot, saisissez le code ci-dessous pour valider votre message <span class="etoile">*</span></label>
                  <!-- Changer d'image à la volée si elle est illisible  -->
                <ul>
                  <li>Vous voulez changer ce code, cliquez :<a style="cursor:pointer" onclick="document.images.captcha.src='http://localhost:8888/nomdomaine/client/plugins/formesmagiques/captcha.php?sid=code&id=270'"> <strong class="rouge">> ICI <</strong></a></li>
                  <li><img src="http://localhost:8888/nomdommaine/client/plugins/formesmagiques/captcha.php?sid=code" alt="Captcha" id="captcha" /></li>
                  <li><input type="text" id="code" class="" name="code" /></li>
                </ul>
              </div>
              <div class="formline">
                <p>&#160;</p>
                <button type="submit">Envoyer</button>
              </div>
          </form>
        </div>

au clique sur ok, sans avoir le formulaire dans la div mon_formulaire.

Tous les mails en local partent très bien d'habitude.

Last edited by neofarm (24-04-2013 17:29:29)

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#23 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(24-04-2013 17:35:55)

rajoute :

alert('contenu : '+mon_formulaire);
alert('contenu : '+mon_formulaire.html());

après

var mon_formulaire = $(result).find('#mon_formulaire');

Aide les autres, ils t'aideront en retour.

Offline

#24 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(24-04-2013 18:15:09)

deux boites de dialogues en plus avec ce contenu :

1) contenu : [object Object]

2) contenu : null

Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

#25 Re: Formulaire dans panneau coulissant : Comment feriez-vous ?

(26-04-2013 16:20:15)

Désolé pour le temps d'attente mais j'ai un peu (beaucoup...) de taff en ce moment ^^

Donc pour faire simple :
Le problème vient de ta page de formulaire qui ne contient que la div "mon_formulaire"

Pour exemple, j'ai testé tout simplement en partant d'un template non modifié.

J'ai ajouté à la fin de meta.html

	<script type="text/javascript">
	// <![CDATA[
	$(document).ready(function(){
		$('#mes_formulaires a').click(function(){
			var url=$(this).attr('href');
			alert('Chargement : '+url);
			$('#mon_formulaire').html("Chargement en cours...").slideDown(500);
			$.post(url, function(result){
				alert('Chargement fini');
				afficheForm(result);
			});
			return false;
		});
		function afficheForm(result){
			alert('afficheForm : '+result);
			var mon_formulaire = $(result).find('#mon_formulaire');
			alert('contenu : '+mon_formulaire);
			alert('contenu : '+mon_formulaire.html());
			$('#mon_formulaire').html(mon_formulaire);
			$('#mon_formulaire form').submit(function() {
				$('#mon_formulaire').html("Traitement en cours...");
				$.ajax({
					url: $(this).attr('action'), // le nom du fichier indiqué dans le formulaire
					type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
					data: $(this).serialize(), // je sérialise les données
					success: function(result) { // je récupère la réponse du fichier
						afficheForm(result); // j'affiche la réponse
					}
				});
				return false; // j'empêche le navigateur de soumettre lui-même le formulaire
			});
			//si tu as un bouton pour fermer le formulaire :
			$('#mon_formulaire .fermer').click(function() {
				$('#mon_formulaire').slideUp(400,function(){
					$(this).html('');
				});
			});
		}
	});
	// ]]>
	</script>

J'ai ajouté à entete.html

		    		<div id="mes_formulaires">
		    			<a href="#URLFOND(connexion)" class="compte">Se connecter</a>
		    		</div>

juste après

		    		<div id="monCompte">
		    			<a href="#URLFOND(moncompte)" class="compte">::compte::</a>
		    			<THELIA SI CONNECTE>
				    		(<a href="#URLDECONNEXION"><small>::deconnect::</small></a>)
			            </THELIA SI CONNECTE>
		    		</div>

J'ai ajouté à index.html

		<div id="mon_formulaire"></div>

juste après

		<div id="contenu" class="grid_12">

J'ai ajouté à connexion.html

		<div id="mon_formulaire">

juste après

		<div id="contenu" class="grid_12">

et

		</div>

juste après

					</form>
				</div>

vers la fin du fichier.

L'intérêt de de faire en sorte que ta page contact contienne tout d'une page normal est qu'elle sera accessible tout le temps par son url normal et pas que par le bien de ton menu.

Aide les autres, ils t'aideront en retour.