Discussion :

[Marmotton76]

Bonjour à tous,

Je vous explique mon cheminement (mes explications sont un peu longues par rapport à la portée de mon pb, mais je pense qu'elles sont nécessaires à votre compréhension... merci pour votre patience à me lire jusqu'au bout !!!) :

J'ai un lien "Envoyer à un ami" ayant comme id '#contact' :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a id='contact' style='cursor:pointer;'><img src='email.png' width='24' height='23' alt='email' title='Envoyer cet article à un ami' /></a>

et sur la même page une DIV cachée par défaut '#envoi_message', contenant un formulaire d'envoi de mail :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<div class="messagepop pop" id="envoi_message">
  <form method="post" id="new_message" action="">
    <p>
      <input type="hidden" name="id_art" value="<?=$id_article;?>" id="id_art" />
    </p>
    <p>
      <label for="email_dest">Email du destinataire :</label>
      <input type="text" size="30" name="email_dest" id="email_dest" />
    </p>
    <p>
      <label for="email_expe">Votre adresse email :</label>
      <input type="text" size="30" name="email_expe" id="email_expe" />
    </p>												
    <p>
      <label for="corps_msg">Votre message (facultatif) :</label>
      <textarea rows="4" name="corps_msg" id="corps_msg" cols="35">
      </textarea>
    </p>
    <p>
      <input type="submit" value="Envoyer" name="commit" id="message_submit" />
      <input type="button" value="Annuler" name="annuler" class="close" />
  </form>
</div>

Sur clic de mon lien '#contact', j'appelle une fonction basée sur jQuery (picorée sur le web !) et qui affiche ma div '#envoi_message' :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
function deselect() {
    $(".pop").slideFadeToggle(function() {
        $("#contact").removeClass("selected");
    });    
}
 
$(function() {
    $("#contact").live('click', function() {
        if($(this).hasClass("selected")) {
            deselect();               
        } else {
            $(this).addClass("selected");
            $(".pop").slideFadeToggle(function() {
                $("#email_dest").focus();
            });
        }
        return false;
    });
 
    $(".close").live('click', function() {
        deselect();
        return false;
    });
});
 
$.fn.slideFadeToggle = function(easing, callback) {
    return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
};

sur clic du bouton 'Envoyer' de mon formulaire, je traite l'envoi du formulaire via AJAX et j'affiche la réponse dans la même div '#envoi_message'

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
$(document).ready(function () {
  $("#message_submit").click(function() {
    var adresse_email_dest = $('#email_dest').attr('value');
      if (adresse_email_dest == "") {
        alert('Vous n\'avez pas saisi l\'adresse email du destinataire !');
      }
      else {
        if (!verifSyntaxeEmail(adresse_email_dest)) {
          alert('L\'adresse email du destinataire saisie n\'a pas un format valide !');
        }
        else {
          var adresse_email_expe = $('#email_expe').attr('value');				
          if (adresse_email_expe == "") {
            alert('Vous n\'avez pas saisi VOTRE adresse email !');
          }
          else {
            if (!verifSyntaxeEmail(adresse_email_expe)) {
              alert('VOTRE adresse email saisie n\'a pas un format valide !');
            }
           else {
              var art = $('#id_art').attr('value');
              var coul_cat = $('#coul').attr('value');			
              var message = addslashes($('#corps_msg').attr('value'));
              changeContenu('envoi_msg.php?no=0&coul='+coul_cat+'&adr_dest='+adresse_email_dest+'&adr_expe='+adresse_email_expe+'&art='+art+'&msg='+message,'envoi_message');
            }
          }
        }
      }
      return false;
    });
)};

La fonction addslashes(contenu) est l'équivallent en javascript de la fonction du même nom en php...
La fonction changeContenu(script_php,id_div) contient une requête AJAX qui joue avec le innerHTML de la div
Le fichier envoi_msg.php envoie le message (mail()) et renvoie le code html qui va bien dans ma div
Jusque là tout va bien, le mail est bien envoyé, et en guise de confirmation ma div '#envoi_message' change bien de contenu et devient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<p>Message envoyé !</p>
<p>Merci d'avoir partagé cet article ;-)</p>
<p>
  <input class="close" onclick="reinit_form('<?=$article;?>');" type="button" value="Fermer" id="fermer" name="fermer" />
</p>

Mes ennuis commencent ici, avec ce bouton '#fermer'.
Je voudrais y mettre un évènement sur clic de celui-ci, qui doit :
1) Masquer ma div '#envoi_message' pour revenir à l'article (pour ça, c'est la class='close' du bouton Fermer qui déclenche le masquage de la div - voir fonctions ci-dessus)
2) ET réinitialiser le contenu de ma div '#envoi_message' : en effet, une fois que s'est affiché "message envoyé !" dans cette div, il faut que celle-ci puisse se réafficher comme à l'origine (càd avec le form d'envoi de message comme c'était par défaut), au cas où le visiteur voudrait ré-utiliser la fonction "Envoyer à un ami" sur le même article (ça peut arriver !!!)
C'est là que ça bloque : comme vous le voyez dans le code ci-dessus, j'ai mis l'évènement reinit_form(no_article) sur clic du bouton "Fermer" de ma div

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function reinit_form(no_article) {
  var article = no_article;
  $("#fermer").click(function() {
    changeContenu('reinit_form.php?art='+article,'envoi_message');			    return false;
  });
}

où reinit_form.php contient le script html du form par défaut à afficher dans la div '#envoi_message'.

MAIS cette fonction ne fonctionne pas... ou plutôt fonctionne mal : quand je clique sur le bouton Fermer, ma div disparaît bien, mais quand je re-clique sur "Envoyer à un ami", ma div s'affiche SANS changement : c'est toujours le contenu "Message envoyé !" qui est affiché, avec le bouton Fermer. Et c'est seulement quand je re-clique sur ce bouton Fermer que la div daigne enfin changer de contenu, càd afficher le form d'envoi de message d'origine.

Donc ça l'fait pas... donc ça m'énerve...!!!

A mon avis, il doit y avoir un conflit sur le bouton Fermer qui appartient à la div '#envoi_message', mais à qui je demande aussi de changer le contenu de la même div...
Donc là, je sèche...
Comment pourrais-je faire pour que, lors du masquage de ma div, celle-ci change de contenu immédiatement en vue de son prochain affichage en mode "formulaire d'envoi par défaut" ????

J'espère que ces substantielles explications ont été suffisantes pour vous faire appréhender mon pb ;-)

En tout cas, merci à tous pour votre patience et vos lumières !
@+

[Marmotton76]

Je tiens à ajouter que, ayant testé ces différents scripts avec la console d'erreurs de Firefox, je n'obtiens absolument aucune erreur d'exécution...

[danielhagnoul]

Bonsoir

Je pense qu'il faut simplifier le code en l'attaquant sous un autre angle, je propose (j'ai testé) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
$( function(){
 
	// on stocke une copie du formulaire vierge
	var jObjForm = $( "#new_message").clone();
 
	// Transaction AJAX avec message de confirmation
	// ou restauration du formulaire vierge
	function changeContenu( boolSend, article ){
		if ( boolSend ){
			// transaction AJAX, traitement du paramètre article
			// modification du contenu de la division d'ID "envoi_message"
			// ici un exemple statique
			$( "#envoi_message" ).empty().append(
				"<p>Message envoyé !</p>" +
				"<p>Merci d'avoir partagé cet article ;-)</p>" +
				"<p>" +
				'<input type="button" value="Fermer" id="fermer" />' +
				"</p>"
			);
 
		} else {
			// Restauration du formulaire vierge
			$( "#envoi_message" ).empty().append( jObjForm );
		}
	}
 
	// Contrôle et soumission du formulaire
	$( "#envoi_message" ).on( "click", "#message_submit", function(){
 
		// récupération du paramètre article
		var article = "";
 
		changeContenu( true, article );
 
		return false;
    });
 
	// Fermer la confirmation
	$( "#envoi_message" ).on( "click", "#fermer", function(){
		changeContenu( false );
 
		return false;
	});
 
	// Afficher un formulaire vierge
	$("#contact").on( "click", function(){
		changeContenu( false );
 
		return false;
	});
 
});

[Marmotton76]

Merci beaucoup danielhagnoul !

J'ai trouvé finalement la solution, ce qui m'évitera de changer tout mon code comme tu le suggérais (et à raison !) :

En fait, il ne fallait pas que j'enferme mes instructions dans un $(document).ready(function () {}), mais simplement dans un $(function() {}). C'est ça qui rendait inactives toutes les fonctions javascript rechargées dans ma div.
J'ai aussi mis des $("id").live('click', function() au lieu de mes $("id").click(function()Voilà... si ça peut en aider certains...

Merci encore pour le temps passé à m'aider !
@+

Bonsoir
Je pense qu'il faut simplifier le code en l'attaquant sous un autre angle, je propose (j'ai testé) :
...

[danielhagnoul]

[...] En fait, il ne fallait pas que j'enferme mes instructions dans un $(document).ready(function () {}), mais simplement dans un $(function() {}).

La seconde est la forme abrégée de la première, la solution c'était live (qui est obsolète depuis longtemps, voir la méthode on() ).

[Marmotton76]

Waouh, j'ai encore des choses à apprendre, moi ;-)
Je vais étudier ça, merci beaucoup !