Discussion :

[Skydoo]

Bonjour,

Je crois avoir un problème de DOM.
Dans une page mapage.php j'ai un formulaire, dans ce formulaire un bouton qui permet de rajouter un champs input type text et un bouton (class=suppr) dans le formulaire grâce à une requête AJAX.

Dans ma page.php j'ai un script JS avec cette fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
$(function(){ 
 
   $('.suppr').click( function(){               // Quand on clique sur les boutons avec la classe "suppr".
 
         var id = $(this).parents('.span').attr('id');     //je récupère l'id de la balise parent yant pour class "span".
         alert(id);
         }
   );
 
});

Lorsque je clique sur mon bouton rien ne se passe. A noter que si je le fais avec un formulaire en html sans requête ajax, ça marche.

Problème de DOM? Une solution ?

merci d'avance ++

[E.Bzz]

Bonjour et bienvenue sur Developpez.com

Problème de DOM?

Il faudrait voir le code HTML associé pour se faire une idée ...
Sinon, ça peut aussi être lié à la librairie que tu utilises.

EDIT : ça peut aussi être ton traitement Ajax qui plante Javascript. Dans ce cas, cette fonction-ci peut être tout à fait correcte.

A+

[Bovino]

Non, c'est manifestement plus un problème de syntaxe
Comme son nom l'indique et contrairement à parent(), parents() prend un 's' indiquant que cette méthode retourne une collection d'éléments, or une collection ne possède pas d'id

[RomainVALERI]

On dirait que Bovino a trouvé le pot aux roses

Au fait : "span", comme nom de classe css ? C'est pas un peu dangereux... ou source de confusion ?

[Skydoo]

Bonjour,

Déjà désolé de répondre aussi tard mais je n'avais pas accès à mon code avant aujourd'hui.

Bonjour et bienvenue sur Developpez.com

Merci !

Non, c'est manifestement plus un problème de syntaxe
Comme son nom l'indique et contrairement à parent(), parents() prend un 's' indiquant que cette méthode retourne une collection d'éléments, or une collection ne possède pas d'id

En fait j'ai essayé les deux et ni parent() ni parents() marche. De plus mon script JS n'est pas exactement ça à la base. Le script que j'ai poster était un script de test pour voir si c'était mon code qui n'allait pas ou si c'était un autre problème.

Voici mon vrai script JS :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$(function(){ 
 
   $('.suppr').click( function(){               // Quand on clique sur les boutons avec la classe "suppr".
 
         $(this).parent('.span').remove();     //je supprime la balise parent ayant pour class "span".
         }
   );
 
});

En fait j'ai exactement le même problème avec celui là. Il marche pour le html en dur mais pas celui généré par ma requête Ajax. Donc je ne pense pas que cela vienne d'un problème de syntaxe ou en tout cas pas celui la

Il faudrait voir le code HTML associé pour se faire une idée ...
Sinon, ça peut aussi être lié à la librairie que tu utilises.

Pour ce qui est de la librairie j'utilise jQuery. Sinon voici mon code html généré

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
 
<form id="formCmd" action="valid_com.php" method="post">
<fieldset style="border: 1px dotted red; width: 380px;">
<span id="span">
 
                       <!--  Déjà présent au départ  -->
 
   <span id="1" class="span">
      <br/>
      <br/>
      <label style="margin: 5px;">Articles :</label>
      <select name="article[1][id]">
             <!-- Les options -->
      </select>
      <label for="article[1][nbr]" style="margin: 5px;">Nbre : </label>
      <input type="text" size="1" name="article[1][nbr]" value=""/>
      <input class="suppr" type="button" value="Suppr"/>
   </span>
   <br/>
   <br/>
                     <!-- Généré par ma requête Ajax -->
 
   <span id="2" class="span">
      <label style="margin: 5px;">Articles :</label>
      <select name="article[2][id]">
            <!-- Les options -->
      </select>
      <label style="margin: 5px;" for="article[2][nbr]">Nbre : </label>
      <input type="text" value="" name="article[2][nbr]" size="1"/>
      <input class="suppr" type="button" name="defaut" value="Suppr"/>
   </span>
   <br/>
</span>
</fieldset>
</form>

Avec une fonction ajout_article() la personne peut rajouter autant de balise <span> qu'elle veut.

Au fait : "span", comme nom de classe css ? C'est pas un peu dangereux... ou source de confusion ?

Heu... Je ne sais pas mais je devais ne pas être très inspiré pour mes noms de class ce jour là

Merci d'avance

[E.Bzz]

Heu... Je ne sais pas mais je devais ne pas être très inspiré pour mes noms de class ce jour là

Ça sinon, ça peut poser problème :

Code :

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

id="2"

Remplace par "id_2" ou un équivalent ...

A+

[Skydoo]

Non, toujours pareil avec id = "span2". ( je continue à mettre des span de partout !)

Si ça peux aider, voici la fonction qui permet de rajouter mes balises <span> :

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
 
 
function ajout_licence()
{
   var id = $('.span:last').attr('id');  //récupère id de la derniere balise avec la class=span
   id = id.charAt(4); 
   id = parseInt(id);   
   var new_id = id+1;    //on ajoute un pour l'id du span suivant
 
   $.post('span_licence.php',        // AJAX : On appelle le script php de la feuille ajout_article.php avec la variable id passé en paramètre
      {id: new_id}, 
      function(data){ 
            $('#conteneur').append(data);             // On ajoute le résultat de se script à la fin de la balise ayant l'id conteneur
      });
}

Et mon script php :

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
 
<?php
 
echo "<br>";
echo "<span id='span". $id ."' class='span'>";
echo "<label style='margin: 5px;'>Article :</label>";
echo "<select name=\"article[". $id ."][id]\">";
echo "<option value='0'>Choix article</option>";
        
$req = "SELECT id, nom FROM articles;";
$res = mysql_query($req) or die('Erreur SQL !<br>'.$req.'<br>'.mysql_error()); 
        
while ($art = mysql_fetch_array($res))
{
        echo "<option value='". $art['id'] ."'>". $art['nom'] ."</option>"; 
}
echo "</select>";
echo "<label for=\"article[". $id ."][nbr]\" style='margin: 5px;'>Nbre : </label>";
echo "<input type='text' size='1' name=\"article[". $id ."][nbr]\" value=''/>";
echo "&nbsp;&nbsp;&nbsp;&nbsp;";
echo "<input type='button' class='suppr' value='Suppr' name='defaut'>";
echo "</span>";
echo "<br/>";
 
?>

L'erreur vient peut être de là... ?

[E.Bzz]

Non, toujours pareil avec id = "span2".

Oui mais là, c'est ça qui va planter (NaN) :

Code :

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

id = parseInt(id);

De plus, IE ne reconnaissant pas les pseudo class ":first" et ":last" (à moins que JQuery arrive à contourner le problème), ce passage-ci risque de générer N fois le même id :

Code :

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

1
2
3
4
   var id = $('.span:last').attr('id');  //récupère id de la derniere balise avec la class=span
   id = id.charAt(4); 
   id = parseInt(id);   
   var new_id = id+1;    //on ajoute un pour l'id du span suivant

A+

[Skydoo]

Oui mais là, c'est ça qui va planter (NaN) :

Code :

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

id = parseInt(id);

Non ça fonctionne très bien. J'ai vérifié sur le code html généré et il n'y a aucun problème. D'ailleurs je ne vois pas pourquoi ça planterait. Je transforme un caractère (ex : '2') en int... C'est le but de la fonction parseInt()... Non ?

De plus, IE ne reconnaissant pas les pseudo class ":first" et ":last" (à moins que JQuery arrive à contourner le problème), ce passage-ci risque de générer N fois le même id :
Code :

Code :

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

1
2
3
4
5
6
 
 
 var id = $('.span:last').attr('id');  //récupère id de la derniere balise avec la class=span
   id = id.charAt(4); 
   id = parseInt(id);   
   var new_id = id+1;    //on ajoute un pour l'id du span suivant

Bah là encore tout marche bien. J'ai bien des balise <span> avec des id différents car je me sert de la même variable pour un tableau qui lui a bien des valeurs différentes.

Merci de prendre de votre temps pour mon problème

++

[RomainVALERI]

Non ça fonctionne très bien. J'ai vérifié sur le code html généré et il n'y a aucun problème. D'ailleurs je ne vois pas pourquoi ça planterait. Je transforme un caractère (ex : '2') en int... C'est le but de la fonction parseInt()... Non ?

je pense que E.Bzz voulait parler de :

Code javascript :

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

1
2
3
var id = "span2";
var resultat = parseInt(id);
// ici resultat ne contient pas "2", mais "Nan"

mais il n'a probablement pas vu le

Code javascript :

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

id = id.charAt(4);

qui précède... ^^

Le problème vient plus vraisemblablement des pseudo-classes... est-ce "normalisé"* dans jQuery ? (dsl je connais encore assez mal cette lib)

* je veux dire "rendu cross-browser" par les fonctions internes de la librairie...

[E.Bzz]

je pense que E.Bzz voulait parler de :

Code javascript :

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

1
2
3
var id = "span2";
var resultat = parseInt(id);
// ici resultat ne contient pas "2", mais "Nan"

Exact

mais il n'a probablement pas vu le

Code javascript :

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

id = id.charAt(4);

qui précède... ^^

Re-exact

Au temps pour moi

A+

[Skydoo]

Le problème vient plus vraisemblablement des pseudo-classes... est-ce "normalisé"* dans jQuery ? (dsl je connais encore assez mal cette lib)

Qu'appelles tu pseudo-classes? Tu parles des class tout simplement... ou mes classes ne sont pas correctes?
Si c'est de ça que tu parles alors je te dirais que je n'en sais rien du tout mais que jusqu'à présent je n'ai eu aucun problème avec.
D'ailleurs on peut le voir sur la documentation de jQuery : ici.

Je ne vois vraiment pas où est l'erreur. Ça fonctionne très bien sur la première balise, qui elle n'est pas généré après une requête Ajax! Pour vous il ne fait aucun doute que ce n'est pas un problème de DOM? Parce que ça pourrait venir du fait que mes <span> soient générées après le script JS non?

++

[E.Bzz]

Qu'appelles tu pseudo-classes?

Toutes celles commençant par ":" (cf. la liste dans ton lien JQuery).

Le problème est que Internet Explorer n'en reconnait qu'une infime partie.
Sous IE6, par exemple, seul ":hover" est reconnu (et encore uniquement sur les liens )

Peut-être quelques unes en plus dans les V7 et V8, mais certainement pas toutes ...
Dans la mesure où ce n'est il n'est pas précisé par JQuery s'il fait une gestion spécifique de ces cas pour IE, tu devrais faire des tests pour vérifier qu'elles sont bien prises en comptes ...

... à moins, bien sûr, que tu n'utilises pas IE

A+

[emmanuel.remy]

Salut,

Je ne connais peu de chose à jQuery mais à mon avis le problème est le suivant: ta fonction

Code :

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

1
2
3
4
5
6
7
8
9
10
$(function(){ 
 
   $('.suppr').click( function(){               // Quand on clique sur les boutons avec la classe "suppr".
 
         var id = $(this).parents('.span').attr('id');     //je récupère l'id de la balise parent yant pour class "span".
         alert(id);
         }
   );
 
});

s'exécute une fois la page chargée: les événements sont donc posés A CE MOMENT . Si par la suite tu modifies ton dom en ajoutant un nouveau bouton avec une class .suppr, la gestion du click ne se fait pas automatiquement (et heureusement d'ailleurs, tu imagines le foin s'il existait un système de supervision qui pose des événements sans qu'on lui aie demandé explicitement via une démarche AOP ou autre...). Il faut donc que tu ré-executes ta fonction qui pose les événements click en prenant soin d'ôter les précédents (ou à ne pas les prendre en compte) car sinon ces derniers auront été posés deux fois, puis trois... d'où autant de alert qui s'afficheront.

ERE

[Skydoo]

Ah bah je me coucherai moins bête ce soir. Je pensais que les :last faisaient partie des sélecteurs...

J'utilise Mozilla Firefox mais J'ai déjà testé sous IE 7 (je n'ai pas les autres à ma dispositions) et ça fonctionne normalement.

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
 
function ajout_licence()
{
   var id = $('.span:last').attr('id');  //récupère id de la derniere balise avec la class=span
   id = id.charAt(4); 
   id = parseInt(id);   
   var new_id = id+1;    //on ajoute un pour l'id du span suivant
 
   $.post('span_licence.php',        // AJAX : On appelle le script php de la feuille ajout_article.php avec la variable id passé en paramètre
      {id: new_id}, 
      function(data){ 
            $('#conteneur').append(data);             // On ajoute le résultat de se script à la fin de la balise ayant l'id conteneur
            alert(new_id);            
      });
}

En faisant alert(new_id); je vérifie si le nombre à bien changé et s'il est correcte. S'il est correcte et a changé alors IE a géré correctement le :last . Et c'est le cas, IE7 gère bien cette pseudo classe.

s'exécute une fois la page chargée: les événements sont donc posés A CE MOMENT . Si par la suite tu modifies ton dom en ajoutant un nouveau bouton avec une class .suppr, la gestion du click ne se fait pas automatiquement (et heureusement d'ailleurs, tu imagines le foin s'il existait un système de supervision qui pose des événements sans qu'on lui aie demandé explicitement via une démarche AOP au autre...). Il faut donc que tu ré-executes ta fonction qui pose les événements click en prenant soin d'ôter les précédents (ou à ne pas les prendre en compte) car sinon ces derniers auront été posés deux fois, puis trois... d'où autant de alert qui s'afficheront.

Oui c'est ce qu'il me semble moi, mais je ne sais pas comment rappeler ma fonction... Est ce que c'est un truc dans ce genre là que tu veux que je fasses?

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
 
 
function supprimer()
{
   $('.suppr').click( function(){
         $(this).parent('.span').remove()
         }
      );
}	
 
function ajout_licence()
{
   var id = $('.span:last').attr('id');  //récupère id de la derniere balise avec la class=span
   id = id.charAt(4);
   id = parseInt(id);   // convertion en integer
   var new_id = id+1;    //on lui ajoute un pour l'id du span suivant
 
 
   $.post('span_licence.php',               // AJAX : On appelle le script php de la feuille ajout_licence.php avec la variable id passé en paramètre
         {id: new_id}, 
         function(data){ 
		$('#conteneur').append(data);             // On ajoute le résultat de se script à la fin de la balise ayant l'id conteneur
                supprimer();   // Je rappelle la fonction après ma requête Ajax
	});
}
 
$(function(){ 
 
supprimer();
 
});

[Skydoo]

Bonjour et désolé pour le double poste,

emmanuel.remy avait effectivement raison. J'ai fais comme dis sur le poste précédent et tout marche nickel

Merci à vous ++