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

++