Problème id dans création de tableau dynamique [résolu]

Problème id dans création de tableau dynamique [résolu] - HTML/CSS - Programmation

Marsh Posté le 30-03-2006 à 11:07:00    

Bonjour à tous,
 
j'ai poser le même genre de question hier mais le sujet à été effaçé par érreur  :o  
 
J'arrive à ajouter des lignes à mon tableau de manière dynamique grâce à une fonction javascript.
Le problème est que je début en js et que je ne sais pas comment vérifier que mes attributs fonctionnent, mais à prioris ca foire  :pt1cable:  
 
Voici la première ligne de mon tableau :

Code :
  1. <table width="1050" border="1" class="txtB" id="details_cde"><style>body {}</style>
  2. <tr align="center"><td>Lg</td><td>Qté. Cdée</td><td>Libellé</td><td>Code Article</td><td>Délais</td><td>Remise %</td><td>Prix net</td><td>Code taxe</td><td>Montant</td></tr>
  3. </table>


 
Et voici un exemple de ligne avec les id que je voudrais ajouter :

Code :
  1. <tr align="center"><td align="right">1</td>
  2.        <td><input type="text" id="qte_1" size="6" maxlength="11"></td>
  3.        <td>Définissez d'abord un code produit</td>
  4.        <td><input type="text" id="code_produit_1" size="15" maxlength="15" autocomplete="off"></td>
  5.        <td><input type="text" id="delaisJJ_1" value="JJ" size="2" maxlength="2"><input type="text" id="delaisMM_1" value="MM" size="2" maxlength="2"><input type="text" id="delaisAA_1" value="AAAA" size="4" maxlength="4"></td>
  6.        <td><input type="text" id="remise_1" value="" size="3" maxlength="3"></td>
  7.        <td><input type="text" id="prix_net_1" value="" size="6" maxlength="11"></td>
  8.        <td><input type="text" id="code_taxe_1" value="" size="1" maxlength="1"></td>
  9.        <td id="montant_1">&nbsp;</td></tr>


 
Pour ajouter cette ligne, voici la fonction que j'utilise :

Code :
  1. var nb_ligne = 0;
  3. function ajouter_ligne()
  4.     {    
  5.     nb_ligne++;
  6.    
  7.     /********************************
  8.     * Définition des différents champ input  *
  9.     * avec leurs attributs                           *
  10.     ********************************/
  11.     var qte = document.createElement("input" );
  12.     qte.setAttribute("type", "text" );
  13.     qte.setAttribute("id", 'qte_'+nb_ligne+'');
  14.     qte.setAttribute("size", "6" );
  15.     qte.setAttribute("maxlength", "11" );
  16.    
  17.    
  18.     var code = document.createElement("input" );
  19.     code.setAttribute("type", "text" );
  20.     code.setAttribute("name", "code_produit" );
  21.     code.setAttribute("id", "code_produit" );
  22.     code.setAttribute("size", "15" );
  23.     code.setAttribute("maxlength", "15" );
  24.     code.setAttribute("autocomplete", "off" );
  25.    
  26.    
  27.     var delaisJJ = document.createElement("input" );
  28.     delaisJJ.setAttribute("type", "text" );
  29.     delaisJJ.setAttribute("value", "JJ" );
  30.     delaisJJ.setAttribute("id", 'delaisJJ_'+nb_ligne+'');
  31.     delaisJJ.setAttribute("size", "2" );
  32.     delaisJJ.setAttribute("maxlength", "2" );
  33.    
  34.    
  35.     var delaisMM = document.createElement("input" );
  36.     delaisMM.setAttribute("type", "text" );
  37.     delaisMM.setAttribute("value", "MM" );
  38.     delaisMM.setAttribute("id", 'delaisMM_'+nb_ligne+'');
  39.     delaisMM.setAttribute("size", "2" );
  40.     delaisMM.setAttribute("maxlength", "2" );
  41.    
  42.    
  43.     var delaisAA = document.createElement("input" );
  44.     delaisAA.setAttribute("type", "text" );
  45.     delaisAA.setAttribute("value", "AAAA" );
  46.     delaisAA.setAttribute("id", 'delaisAA_'+nb_ligne+'');
  47.     delaisAA.setAttribute("size", "4" );
  48.     delaisAA.setAttribute("maxlength", "4" ); 
  49.    
  50.    
  51.     var remise = document.createElement("input" );
  52.     remise.setAttribute("type", "text" );
  53.     remise.setAttribute("id", 'remise_'+nb_ligne+'');
  54.     remise.setAttribute("size", "3" );
  55.     remise.setAttribute("maxlength", "3" ); 
  56.    
  57.    
  58.     var prix_net = document.createElement("input" );
  59.     prix_net.setAttribute("type", "text" );
  60.     prix_net.setAttribute("id", 'prix_net_'+nb_ligne+'');
  61.     prix_net.setAttribute("size", "6" );
  62.     prix_net.setAttribute("maxlength", "11" );   
  63.    
  64.    
  65.     var code_taxe = document.createElement("input" );
  66.     code_taxe.setAttribute("type", "text" );
  67.     code_taxe.setAttribute("id", 'code_taxe_'+nb_ligne+'');
  68.     code_taxe.setAttribute("size", "1" );
  69.     code_taxe.setAttribute("maxlength", "1" );
  70.    
  71.    
  72.     /********************************
  73.     * Mise en place des différentes varibles  *
  74.     * pour la création de la nouvelle ligne     *
  75.     ********************************/
  76.     var newRow = document.getElementById('details_cde').insertRow(-1);
  77.     var newCell = newRow.insertCell(0);
  78.     newRow.setAttribute("id", 'ligne_'+nb_ligne+'');
  79.     newRow.setAttribute("align", "center" );
  80.         
  81.     newCell.innerHTML = ''+nb_ligne+'';
  82.     newCell.setAttribute("align", 'right');
  83.         
  84.     newCell = newRow.insertCell(1).appendChild(qte);
  85.    
  86.     newCell = newRow.insertCell(2);
  87.     newCell.setAttribute("id", 'lib_'+nb_ligne+'');
  88.     newCell.innerHTML = 'Définissez d\'abord un code produit';
  89.         
  90.     var code_produit = newRow.insertCell(3);
  91.     code_produit.appendChild(code);
  92.         
  93.     var delais = newRow.insertCell(4);
  94.     delais.appendChild(delaisJJ);
  95.     delais.appendChild(delaisMM);
  96.     delais.appendChild(delaisAA);
  97.         
  98.     newCell = newRow.insertCell(5).appendChild(remise);
  99.     
  100.     newCell = newRow.insertCell(6).appendChild(prix_net);
  101.         
  102.     newCell = newRow.insertCell(7).appendChild(code_taxe);
  103.         
  104.     newCell = newRow.insertCell(8);
  105.     newCell.setAttribute("id", 'montant_'+nb_ligne+'');
  106.     newCell.innerHTML = '&nbsp;';
  107.    
  108.     }
  109.    
  110.    </script>


 
Quand je lance la fonction, la ligne s'ajoute nickel. Jusque là j'étais content et croyait même que ca marchais.
Mais maintenant que j'essaye d'intégrer un moteur de recherche à la Google Suggest dans mon input code produit, ca marche pas  :cry: .
Le problème doit venir du fait que les id sont mal formulé. Et je ne sais pas comment accèder au code que je viens de créer car il apparaît pas dans le code html de la page.
 
Merci d'avance pour votre aide  :jap:


Message édité par mc_cut_killer le 30-03-2006 à 16:00:51
Reply

Marsh Posté le 30-03-2006 à 11:07:00   

Reply

Marsh Posté le 30-03-2006 à 11:25:02    

Bon il manque l'action et l'evenement que tu souhaites faire sur ton champs code produit mais perso je mettrais pas d'id tu n'en as pas vraiment besoin ...  
 
Par exemple, si tu veux alerter la valeur sur ton champs code sur son onblur tu peux faire:

Code :
  1. code.onblur = function(event){ alert(this.value)};


Le truc ou il faut faire attentien, c'est que le this dans la déclaration de la fonction au dessus ne pointe pas sur l'objet que tu es en train de manipuler mais sur l'objet courant au moment de l'appel de la fonction...
Je suis pas clair c'est ça :o
 
Après si tu as besoin de récuperer les valeurs des inputs a coté, précise exactement ce dont tu as besoin


Message édité par anapajari le 30-03-2006 à 11:25:38
Reply

Marsh Posté le 30-03-2006 à 11:33:30    

En fait il s'agit de la saisie d'une commande.
 
Pour la rendre plus intéractive j'y ai ajouté des éléments qui changent sans recharger la page. Pour cela j'utilise quelques calcques ainsi qu'Ajax avec XmlHttpRequest.
 
La partie que tu voi ici constitue la saisie des détails. A chaque clique qui lance ma fonction ca ajoute une ligne.
Au final je metterais un bouton pour valider la form des détails.
 
Pour ce qu'il y ai des id, il me semble que je n'est pas trop le choix si je veux récupérer les valeurs par la suite.C'est aussi pour ca que j'ai initialisé une variable nb_ligne qui me permet de distinguer les éléments des différentes lignes.
 
Pour ce qu'il y est de l'id de mon input code_produit, il est obligatoir car j'utilise ceci pour mon moteur de recherche :

Code :
  1. <script type="text/javascript" src="../fonctions/autocomplete.js"></script>


 

Code :
  1. <script language="javascript">
  2. window.onload = function(){initAutoComplete(document.getElementById('recherche_produit'),
  3.     document.getElementById('code_produit_1'))};
  4.  
  5.  
  6.     function choisir_produit()
  7.     {
  8.     document.getElementById('code_produit_1').innerHTML = code_produit;
  9.     }
  10. </script>

Message cité 1 fois
Reply

Marsh Posté le 30-03-2006 à 11:47:49    

mc_cut_killer a écrit :

En fait il s'agit de la saisie d'une commande.
 
Pour la rendre plus intéractive j'y ai ajouté des éléments qui changent sans recharger la page. Pour cela j'utilise quelques calcques ainsi qu'Ajax avec XmlHttpRequest.


Donc en fait tu as une zone de saisie ou tu rajoutes un ligne pour chaque nouvel 'item' ajouté à la commande, right?
 

mc_cut_killer a écrit :

La partie que tu voi ici constitue la saisie des détails. A chaque clique qui lance ma fonction ca ajoute une ligne.


Donc sur chacune de ces lignes tu as un champs code produit, qui a une feature 'autosuggest'-like...
 

mc_cut_killer a écrit :

Au final je metterais un bouton pour valider la form des détails.[/quote]
K
 
 
[quotemsg=1335408,3,287009]Pour ce qu'il y ai des id, il me semble que je n'est pas trop le choix si je veux récupérer les valeurs par la suite.
C'est aussi pour ca que j'ai initialisé une variable nb_ligne qui me permet de distinguer les éléments des différentes lignes.
[/quote]
Bin en fait si [:spamafote], autant les names pour soumettre ton formulaire je comprends autant les ids n'ont pas vraiment d'intérêt. Là tu te galère avec un numero de ligne toussa... Vu que ta "structure" de ligne est fixe tu peux très bien parcourir les noeuds et recuperer les valeurs des champs qui t'interessent.
 
[quotemsg=1335408,3,287009]Pour ce qu'il y est de l'id de mon input code_produit, il est obligatoir car j'utilise ceci pour mon moteur de recherche :

Code :
  1. <script type="text/javascript" src="../fonctions/autocomplete.js"></script>


 

Code :
  1. <script language="javascript">
  2. window.onload = function(){initAutoComplete(document.getElementById('recherche_produit'),
  3.     document.getElementById('code_produit_1'))};
  4.  
  5.  
  6.     function choisir_produit()
  7.     {
  8.     document.getElementById('code_produit_1').innerHTML = code_produit;
  9.     }
  10. </script>



Encore une fois non, l'id n'est pas obligatoire... Tu dois initialiser ton autoComplete avec le premier code_produit?  
Perso je rajouterais un attribut autosuggest dans ton input:

Code :
  1. <input .... autosuggest="1"/>


Et ensuite je récuperais le 1er input de ma page a autosuggest:

Code :
  1. inputAS = document.getElementsByTagName('INPUT');
  2. for(var i=0;i<inputAS.lenght; i++){
  3.     if ( inputAS[i].getAttribute('autosuggest') == 1){
  4.       return inputAS[i];
  5.     }
  6. }
  7. return false;


Comme ça si un jours tu as besoin dans initialiser plusieurs dès le départ tu changes la fonction pour qu'elle constitue un tableau des noeuds...
 
Mais bref, ça résoud pas ton problème ... que j'ai toujours pas compris en fait ;)

Reply

Marsh Posté le 30-03-2006 à 12:07:13    

En fait utiliser des name ou id m'importe peut.
 
Ce que je veut c'est :  
- créer des lignes avec mes input.
- récupérer ces valeurs par la suite
- intégrer mon autosuggest a l'input code_produit
 
Lorsque j'essaye sur une page test ou je rentre le code html avec ma première ligne à la main ca marche.
Par contre dès que j'utilise ma fonction js pour créer les lignes ca marche plus :(
 
 
Maintenant pour répondre à tes questions, je rajoute effectivement une ligne pour chaque item, à chaque ligne le input code_produit doit avoir une fonction autosuggest.
J'ai aussi pensé à utilisé une second fonction, qui lorsque l'utilisateur ajoute une seconde ligne, fige les valeur de la première. Soit en supprimant les input pour laisser que du texte, soit en interdissant la modification des inputs en rajoutant par exemple :

Code :
  1. onFocus="this.blur()"


Après cette étape, je vais ajouter un module qui utilise xmlhttprequest pour déterminer à partir du code produit choisi son libéllé et son prix net. Le libéllé ne sera pas modifiable d'où le fait que je n'ai pas mis d'input, par contre le prix net sera une valeur par défaut mise dans mon input, et modifiable par la suite.
Je continurais ensuite en cherchant à calculer le montant de la même manière à partir du prix net en tenant compte de la remise et du code taxe.
Mais à mon avis il me reste encore pas mal de problèmes à résoudre avant d'optenir ce resultat :)
 
 
Pour ce qu'il y est de "parcourir les noeuds et recuperer les valeurs des champs qui t'interessent", je début en js et voi pas comment le faire.
 
 
Enfin comme je l'ai dit plus haut, si il est plus facile d'utilise name que id pas de problème, c'est juste que dans les exemples que j'ai trouvé sur le net utilise id.

Message cité 1 fois
Message édité par mc_cut_killer le 30-03-2006 à 12:15:14
Reply

Marsh Posté le 30-03-2006 à 12:21:35    

mc_cut_killer a écrit :

En fait utiliser des name ou id m'importe peut.
 
Ce que je veut c'est :  
- créer des lignes avec mes input.
- récupérer ces valeurs par la suite
- intégrer mon autosuggest a l'input code_produit
 
Lorsque j'essaye sur une page test ou je rentre le code html avec ma première ligne à la main ca marche.
Par contre dès que j'utilise ma fonction js pour créer les lignes ca marche plus :(


serait-il possible de savoir exactement ce que tu entends par "ça marche plus", nan parce que la franchement s'pas facile :o
"Oui bonjour j'ai une voiture quand je monte dedans ça marche mais après sur la route ça marche plus..."
 
 

mc_cut_killer a écrit :

Maintenant pour répondre à tes questions, je rajoute effectivement une ligne pour chaque item, à chaque ligne le input code_produit doit avoir une fonction autosuggest.


Ce qui te pose problème c'est donc l'ajout de l'autosuggest dynamiquement à chacun des input 'code_produit' ajouté dans une nouvelle ligne????
Quand tu dis ça marche plus alors ça veut dire? Erreur js? fonction qui merdoie?
 

mc_cut_killer a écrit :

J'ai aussi pensé à utilisé une second fonction, qui lorsque l'utilisateur ajoute une seconde ligne, fige les valeur de la première. Soit en supprimant les input pour laisser que du texte, soit en interdissant la modification des inputs en rajoutant par exemple :

Code :
  1. onFocus="this.blur()"



S'pas top comme idée ;) Et puis tu as un attribut très pratique: readonly, qui bloque tes champs en modification.
 

mc_cut_killer a écrit :

Pour ce qu'il y est de "parcourir les noeuds et recuperer les valeurs des champs qui t'interessent", je début en js et voi pas comment le faire.


Grace au DOM tu peux parcourir les différents noeuds d'un document html. Dans ton cas tu aurais essentiellement besoin de getElementsByTagName, parentNode, childNodes
 
 

mc_cut_killer a écrit :

Enfin comme je l'ai dit plus haut, si il est plus facile d'utilise name que id pas de problème, c'est juste que dans les exemples que j'ai trouvé sur le net utilise id.


Ne me fais pas dire ce que je n'ai pas dit ;)
Les id c'est bien ( et surtout ne pas utiliser de name en dehors d'un form)!!! Mais dans ton cas tu n'en as pas besoin, par contre les names sont obligatoires car si j'ai tout compris à la fin tu soumets ton formulaire ...

Reply

Marsh Posté le 30-03-2006 à 12:36:17    

Quand je dit ca marche plus, il y à aucune érreur :(
 
En fait rien ne se passe, j'ai essayé de supprimer l'id ou de mettre un id érroné dans mon code html qui marche (quand j'ajoute la ligne à la main) et ca me fait pareil.
 
J'ai essayé d'ajouter:

Code :
  1. <input type="text" id="code_produit_1" size="15" maxlength="15" autocomplete="off">


à la rache dans ma page ou j'ajoute la ligne avec js, et ca marche pour cet input. J'ai même essayé de l'ajouter à plusieurs endroits et ca marche.
C'est pour ca que j'ai conclu que mon problème venait de la.
 
Je vais essayer de remplacer mes id par name en début d'aprèm pour voir si ca fonctionne ...

Message cité 1 fois
Message édité par mc_cut_killer le 30-03-2006 à 12:36:59
Reply

Marsh Posté le 30-03-2006 à 13:24:24    

mc_cut_killer a écrit :

Quand je dit ca marche plus, il y à aucune érreur :(
En fait rien ne se passe, j'ai essayé de supprimer l'id ou de mettre un id érroné dans mon code html qui marche (quand j'ajoute la ligne à la main) et ca me fait pareil.


 :cry:  
Bon je fais madame Irma là mais est ce que tu n'aurais pas besoin de relancer ton initAutoComplete sur l'input code_produit ajouté???
 

Citation :

Je vais essayer de remplacer mes id par name en début d'aprèm pour voir si ca fonctionne ...


ça changera rien du tout, perds pas ton temps la dessus. Je disais juste que tu aurais pu faire autrement ;)

Reply

Marsh Posté le 30-03-2006 à 14:14:56    

Heu ... je crois que madame Irma à vu juste :)
Je vais essayer.
 
Domage pour les names, moi qui croi encore au solution miracle ...

Reply

Marsh Posté le 30-03-2006 à 14:22:21    

Ouah !!!!!!!!! quel "con", je m'étais préparer une fonction pour relancer initAutoComplete  :o  
 
J'étais tellement perturbé par cette histoire de div que je ne l'ai même pas tenté  :pt1cable:  
 
Ca marche nickel, merci pour ton aide.
 
Maintenant je vais essayer de comprendre l'utilité de ta fonction

Code :
  1. inputAS = document.getElementsByTagName('INPUT');
  2. for(var i=0;i<inputAS.lenght; i++){
  3. if ( inputAS[i].getAttribute('autosuggest') == 1){
  4. return inputAS[i];
  5. }
  6. }
  7. return false;


 
et de mettre en application tes conseils :)
 
Encore merci @+  :jap:

Message cité 1 fois
Reply

Marsh Posté le 30-03-2006 à 14:22:21   

Reply

Marsh Posté le 30-03-2006 à 14:57:43    

mc_cut_killer a écrit :

Maintenant je vais essayer de comprendre l'utilité de ta fonction

Code :
  1. inputAS = document.getElementsByTagName('INPUT');
  2. for(var i=0;i<inputAS.lenght; i++){
  3. if ( inputAS[i].getAttribute('autosuggest') == 1){
  4. return inputAS[i];
  5. }
  6. }
  7. return false;




C'était juste une autre solution de permettant de trouver quel input devait être initAutoCompleté sans passer par un getElementById ( et donc sans avoir besoin d'id).
Pour etre exact, à cette fonction je lui ferais retourner un tableau contenant tous les inputs avec un attribut autocomplete a un et je passerais le tableau dans initAutoComplete.
Interet? Si on arrive en modification sur une facture existante, j'imagine que tous les champs sont déjà alimentés et toutes les lignes créées ... Avec ton truc seul le 1er input aurait l'autocomplete, avec mon bouzin ça se ferait automatiquement pour tous les inputs ayant le tag autocomplete.
 
En fait moi je prefere juste éviter au maximum d'avoir des ids en dur quand tu fais du "dynamique" ...  
 

Reply

Marsh Posté le 30-03-2006 à 15:08:36    

OK, je pense que je vais faire comme tu dit.
 
La j'essaye d'utilisé ma variable nb_ligne pour les différencier mais sans succès :(
 
Edit: si ca marche, enfin on dirait.
 
Voila ce que j'ai fait :

Code :
  1. function initSuggest()
  2.     {
  3.     initAutoComplete(document.getElementById('recherche_produit'),
  4.         document.getElementById('code_produit'+nb_ligne+''));
  5.     }


 

Code :
  1. var code = document.createElement("input" );
  2.     code.setAttribute("type", "text" );
  3.     code.setAttribute("name", 'code_produit_'+nb_ligne+'');
  4.     code.setAttribute("id", 'code_produit'+nb_ligne+'');
  5.     code.setAttribute("size", "15" );
  6.     code.setAttribute("maxlength", "15" );
  7.     code.setAttribute("autocomplete", "off" );


 
Tu en pense quoi ?


Message édité par mc_cut_killer le 30-03-2006 à 15:16:50
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed