Jquery: la fonction ne s'execute qu'une fois

**mica94** · 25/08/2009, 13h22

Bonjour,
toujours dans mon apprentissage de Jquery, je rencontre une autre difficulté.

J'ai tout un script qui fonctionne très bien:
- Je clique sur un lien qui m'affiche un formulaire en Jquery
- Lorsque je valide le formulaire la BDD est alimentée via une page PHP appelée en Post et la ligne est ajoutée/ modifiee/ supprimee par jquery.

Ce script fonctionne bien.

Le souci est qu'une fois que j'ai executé ce script une fois, des que je clique à nouveau sur mon lien, plus rien ne se passe ! Le formulaire ne s'affiche pas, et je n'ai aucune erreur JS.

Voici le code utilisé:

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
 
la structure du tableau contenant le lien:
 
$reqAfficheContact = "SELECT * FROM contact_MR WHERE id_MR = '".$id_MR."';";
$resultAfficheContact = db_query($reqAfficheContact);
echo "<div class='lignes_contact'>";
echo "<table id='table_contacts' cellpadding=0 cellspacing=0 class='contact'>";
while ($lignesContacts=mysql_fetch_assoc($resultAfficheContact)){
	echo "<tr class='contact".$lignesContacts['id_contact_MR']."'>";
	echo "<td class='titre_souligne'>".MajMin($lignesContacts['titre_contact_MR'])."</td>";
	echo "<td><a class='supprimer' rel='".$lignesContacts['id_contact_MR']."'  style='cursor:pointer;'><img src='images/icone_suppr_contact.gif' border='0'></a></td>";
	echo "<td><a class='modifier' rel='".$lignesContacts['id_contact_MR']."' style='cursor:pointer;'><img src='images/icone_modifier_contact.gif' border='0'></a></td>";
	echo "</tr>";
		}
echo "</table>

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
 
Le traitement jquery de mon lien "modifier":
 
$("a.modifier").click(function(e){
 
	var id=$(this).attr("rel");
	var resultSelect = $.ajax({
	                         type:"POST",
	                         url: "modif_contact.php",
	                         data: "id_contact_MR="+id+"&TypeReq=select",
	                         async: true,
                                 success: function(resultSelect,etat){
			                      var chaine = resultSelect;
    			                      var vecteur = chaine.split("***");  //Le fichier modif_contact.php me renvoie une chaine de caracteres que je traite avec la fonction split(). Le séparateur choisi est ***
                                              $("#id_contact_MR").val(vecteur[0]);
                                              $("#titre_contact_MR").val(vecteur[1]);	
					      }
				});
		if ($("#contactModifForm").is(":hidden")){
				$("#contactModifForm").fadeIn(500);
		}
		else{
				$("#contactModifForm").fadeOut(500);
		}	
    });

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
 
Le formulaire HTML:
 
<div id="contactModifForm">
 
        		<form  method="post" name="form_modif_contact" id="form_modif_contact" action="modif_contact.php" >
                    <fieldset>
                        <table class="modif_contact">
                          <tr>
                            <td>
                            	<input name="id_contact_MR" type="hidden" id="id_contact_MR">
                                <input name="titre_m_contact_MR" type="text" class="textForm" id="titre_m_contact_MR" size="30" maxlength="30" width="50px">
                            </td>
 
                          </tr>
                         </table>
                        <input type="button" id="validModif"  value="Modifier le contact"/>
                		<span id="messageModifSent">Le contact a bien &eacute;t&eacute; modifi&eacute; !</span>
            		</fieldset>
               </form>            
        </div>

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
 
Et enfin le fichier appelé par jquery: modif_contact.php
 
$titre_m_contact_MR= $_POST['titre_m_contact_MR'];
$id_contact_MR = $_POST['id_contact_MR'];
 
$TypeReq = $_POST['TypeReq'];
 
 
	if ($TypeReq=='select'){
 
		$reqSelectContact = "SELECT * FROM contact_MR ";
		$resultSelectContact = db_query($reqSelectContact);
		$afficheSelectContact = mysql_fetch_assoc($resultSelectContact);
		$titre = $afficheSelectContact["titre_contact_MR"];
		$id =  $afficheSelectContact["id_contact_MR"];
 
		echo $id_contact_MR."***".$titre; //Ce que recupere Jquery
 
 
 
	}
	elseif ($TypeReq=='update'){
			$reqModifContact = "UPDATE contact_MR SET 
											titre_contact_MR = '".$titre_m_contact_MR."'	WHERE id_contact_MR = '".$id_contact_MR."';";
$resultModif = db_query($reqModifContact);
 
 
}
/////Affichage dernier update
 
$reqAfficheContact = "SELECT * FROM contact_MR WHERE id_contact_MR = '".$id_contact_MR."';";
$resultAfficheContact = db_query($reqAfficheContact);
 
while ($lignesContacts=mysql_fetch_assoc($resultAfficheContact)){
	echo $lignesContacts['id_contact_MR']."***<tr class='contact".$lignesContacts['id_contact_MR']."'>		
	<td class='titre_souligne'>".MajMin($lignesContacts['titre_contact_MR'])."</td>";
echo "<td><a class='supprimer' rel='".$lignesContacts['id_contact_MR']."'style='cursor:pointer;'><img src='images/icone_suppr_contact.gif' border=0></a></td>";
echo "<td><a class='modifier' rel='".$lignesContacts['id_contact_MR']."' style='cursor:pointer;'><img src='images/icone_modifier_contact.gif' border=0></a></td></tr>\n";
}

Voila, je pense avoir mis tout ce qui est utile.
donc je repete mon probleme:
Tout ça fonctionne tres bien... UNE FOIS !
Des que le script a tourné et m'a modifié le contact(je prends l'exemple de la modif ici), le lien "modifier" est inactif ! Aucune erreur JS et le formulaire ne s'affiche pas.

Merci de me donner un coup de main si vous avez une idée.

Mica

**Gruik** · 25/08/2009, 13h51

Hello

A mon avis, le code du click est bien re-executé mais tu as l'impression qu'il se passe rien
Firebug pourrait aider à debugger

**mica94** · 25/08/2009, 14h00

Envoyé par Gruik

Hello

A mon avis, le code du click est bien re-executé mais tu as l'impression qu'il se passe rien
Firebug pourrait aider à debugger

Malheureusement non, firebug ne m'aide pas.
Lorsque le script fonctionne, dans reseau/XHR j'ai une ligne avec tous les parametres intitulee "POST modif_contact.php" qui s'affiche.
Lorsque ça ne marche pas... et ben cette ligne la ne s'affiche pas

**Gruik** · 25/08/2009, 14h14

Donc tu cliques et tu ne vois pas la requete ajax passer?
Et il n'y a pas d'erreur javascript?

**mica94** · 25/08/2009, 14h21

Envoyé par Gruik

Donc tu cliques et tu ne vois pas la requete ajax passer?
Et il n'y a pas d'erreur javascript?

tout a fait

**Gruik** · 25/08/2009, 14h31

Ok,

Bein je parlais de Firebug pour debugger, mais en plaçant des points d'arrêt et tout ça
Car là je vois pas

**mica94** · 25/08/2009, 14h59

Envoyé par Gruik

Ok,

Bein je parlais de Firebug pour debugger, mais en plaçant des points d'arrêt et tout ça
Car là je vois pas

incomprehensible ce bug !
Meme en mettant un point d'arret sur mon

Code :

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

$("a.supprimer").click()

il s'arrete la premiere fois, et pas la 2e.

Le probleme ne viendrait-il pas du html ? le fait que le "a.supprimer" ait une classe mais n'ait pas d'id peut-il poser un souci ?

**Gruik** · 25/08/2009, 15h03

Chais pas, peut etre que le fait que resultSelect est une variable qui est ecrasée par le paramètre de success, mais on verrait quand meme la requete la 2eme fois

Envoyé par mica94

Meme en mettant un point d'arret sur mon

Code :

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

$("a.supprimer").click()

il s'arrete la premiere fois, et pas la 2e.

Faut mettre le point d'arret dans le corps de la fonction de l'evenement
Par exemple ici :

Code :

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

var id=$(this).attr("rel");

**mica94** · 25/08/2009, 15h49

j'en ai mis un peu partout des points d'arret...

bon, je vais passer à autre chose, je reviendrais la dessus plus tard.

En tout cas merci pour tes reponses

**danielhagnoul** · 25/08/2009, 19h20

Bonsoir.

Il faut toujours utiliser les événements live() lorsqu'on veut interagir avec du code HTMl qui est modifié par le code JS ou PHP.

Code :

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

1
2
3
4
 
echo "<td><a class='supprimer' rel='".$lignesContacts['id_contact_MR']."'style='cursor:pointer;'><img src='images/icone_suppr_contact.gif' border=0></a></td>";
 
echo "<td><a class='modifier' rel='".$lignesContacts['id_contact_MR']."' style='cursor:pointer;'><img src='images/icone_modifier_contact.gif' border=0></a></td></tr>\n";

Il faut donc :

Code :

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

1
2
 
$("a.modifier").live("click", function(e){

**mica94** · 26/08/2009, 13h03

Envoyé par danielhagnoul

Bonsoir.

Il faut toujours utiliser les événements live() lorsqu'on veut interagir avec du code HTMl qui est modifié par le code JS ou PHP.

Code :

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

1
2
3
4
 
echo "<td><a class='supprimer' rel='".$lignesContacts['id_contact_MR']."'style='cursor:pointer;'><img src='images/icone_suppr_contact.gif' border=0></a></td>";
 
echo "<td><a class='modifier' rel='".$lignesContacts['id_contact_MR']."' style='cursor:pointer;'><img src='images/icone_modifier_contact.gif' border=0></a></td></tr>\n";

Il faut donc :

Code :

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

1
2
 
$("a.modifier").live("click", function(e){

Genial ! ça fonctionne !
Merci beaucoup !

Jquery: la fonction ne s'execute qu'une fois

jQuery

Discussions similaires

Partager

Partager