ajouter une autre liste deroulante en appuyant sur un boutonRésolu

Question

Bonjour,

En fait, au depart, j'aurais un nombre fixe de listes deroulantes dynamiques (3 paires de liste => cf. schema ci-dessous). Ces listes disposees dans un tableau (pour une meilleure mise en page) permettent une recherche par categorie cad que l'utilisateur selectionne la categorie dans laquelle il recherche son information dans la premiere liste et precise une sous-categorie dans la seconde.
Ca ressemblerais a ca...
               LISTE 1                                       LISTE 2
               LISTE 1                                       LISTE 2
               LISTE 1                                       LISTE 2
Comme vous l'avez remarquer j'ajoute en faite a chaque fois une nouvelle ligne.
J'aimerais savoir comment je pourrais une fois la page chargée par le navigateur, insérer une nouvelle ligne comme celles que vous voyez juste au-dessus, en fin du tableau, en appuyant sur un bouton "AJOUTER"... SANS RECHARGER LA PAGE !! ou alors uniquement en chargant la nouvelle ligne (via AJAX je pense).

La premiere question.... primordiale est donc : 
Existe-t-il une fonction qui permette d'ajouter du code dans une page HTML ? et a un endroit precis (pour moi ce serait dans une nouvelle ligne du tableau) ?
J'ai vu que y avait les fonctions document.write() et writeln() mais elles generent carrement une nouvelle page (effacent le code originel).

Deuxieme question : 
Est-ce que y aurait moyen de recuperer (recopier) carrement la partie du code HTML qui code justement l'affichage de ces listes (via une fonction JAVAScript par exemple) ?
Sinon il faudra sans doute que j'utilise AJAX pour refaire une demande au server et charger la nouvelle ligne, non?

Merci d'avance pour vos reponses ;)

PetoleTeam · Accepted Answer

B


onjour...
Il est un fait que pour affecter une fonction, avec des paramétres, à un événement il n'y a que les fonctions anonyme comme celle que tu écris ci dessus.

Mais pourquoi réaffecter à l'événement onchange la même fonction que l'objet qui est cloné.
Si l'objet cloné à onchange = "go(this);" le clone aura la même fonction sur son événement onchange.
Le this représente l'objet qui déclenche le onchange, d'ou dans la fonction go il suffit de récupérer l'ID de l'objet, point n'est besoin dans ce cas de réaffecté une fonction à l'événement onchange.

Mais ai je bien compris ton soucis...

Le principal étant que tout baigne.



;0)

PetoleTeam · Answer

B
onjour...
La première question.... primordiale est donc :
Toute les premières questions sont par définition primordiales…

pour ajouter des éléments dans une page HTML il existe au moins deux méthodes
- la moins élégante consiste à ajouter a la fin du body le texte voulu en faisant
document.innerHTML +=   'Texte en plus';

- La plus élégante est d'utiliser les fonctions idoines tel que createElement() ou encore createTextNode()

pour les tableaux il y a insertRow() et insertCell()

  Est-ce que y aurait moyen de recuperer (recopier)  
OUI en récupérant le innerHTML de l'élément à copier et en l'affectant à l'élément destination
exemple :
var O_Srce   = document.getElementById( 'DIV_SRCE');
var O_Dest = document.getElementById( 'DIV_DEST');
var Chaine = O_Srce.innerHTML;
O_Dest.innerHTML = Chaine;

pour bien plus d'informations il y a, entre autres, http://fr.selfhtml.org/

;0)

vinceb87 · Answer

Bonjour, et merci pour ta reponse qui m'a ete bien utile ;) Cependant, un petit probleme persiste! En effet, maintenant que j'ai recopier la ligne qui m'interressait je voudrais changer le nom attribué au select... Un petit bout de code sera sans doute plus explicite : Voila alors j'espere que vous pourrez m'aider parce que ca fait un moment que je bloque la-dessus. Merci d'avance ;) Vince

vinceb87 · Answer

Re PetoleTeam,
et par contre ton truc avec le fait d'affecter le contenu innerHTML de l'un a l'autre...
B ca n'a pas l'air de fonctionner des masses :S c'est peut etre moi qui m'y prends mal...

Merci quand meme,
J'continue de chercher mais j'pense que je vais finir par laisser tomber :(

PetoleTeam · Answer

B
onjour...
Je concéde que la première réponse était un peu générale, dans ton cas...
Perso je ferais comme suit...



var Compteur=  0;







 //------------------------- 


function Create_New_Liste(){
  Compteur ++;






  //-- Recup de l'objet Table







  var O_Table  = document.getElementById( 'T_TABLE');
  var NbrLigne =  O_Table.rows.length;
   //-- Creation d'une ligne 
  var O_Row  = O_Table.insertRow( -1);
  //-- Creation de la cellule
  var O_Cell =  O_Row.insertCell(-1);
   //-- Recup du Select 
  var O_Select  = document.getElementById( 'S_LIST');
  //-- Creation d'un clone
  var O_Clone =  O_Select.cloneNode(true);
   //-- Changement id et name 
  O_Clone.id    = "S_NEW_" +Compteur;
  O_Clone.name = "S_NEW_" +Compteur;
  //-- Ajout dans la cellule
  O_Cell.appendChild( O_Clone);
}




Peu de différence avec ce que tu as essayé...
;0)

vinceb87 · Answer

Salut Petole Team,
et merci pour ta reponse détaillée...

J'ai ajouter cette ligne de code a la fonction pour m'afficher le contenu de la derniere ligne :
 alert(O_Table.rows[NbrLigne].innerHTML); 
Ta fonction affiche bien la nouvelle liste mais malheureusement seul l'id est modifié... le "name" reste identique.
J'ai aussi essayer de modifier l'attribut onchange de mon select, ca fonctionne egalement.

Je commence donc vraiment a douter qu'on puisse modifier l'attribut "name" d'un select...

A l'origine, le name me permet uniquement de recuperer la valeur des differentes select de mon formulaire, dans la nouvelle page appelée, grace à :
 $_POST["name_du_select"];  (method="post" en PHP).

Alors si je pouvais me passer du name et utiliser plutot l'id, ca serait nickel.

Sinon je pense qu'une alternative serait de crée soit meme un nouveau select avec les attributs correspondants et d'y ajouter le meme contenu (les meme options).
J'ai deja essayé mais je n'arrive a attribué qu'un seul attribut au select et je n'arrive pas à attribuer le contenu de l'ancien select(O_Select) au nouveau(O_Clone).

Sinon encore un petite question a part... a quoi font reference tes T_,O_,S_ dans les noms de variable ? :)

Merci encore pour ton aide precieuse PetoleTeam et si quelqu'un d'autre pourrait ns aider il est le bienvenu ! :D
Je sais qu'on ai pas loin du resultat final alors encore un peu de courage s'il vous plait.

J'attends avec impatience vos reponses,
Vince.

vinceb87 · Answer

Salut bon je pense avoir trouver le probleme!!!
En fait ca marche mais c'est l'alert qui donne de la merde!!
En gros, si tu demande carrement le nom du select par :

alert(O_Clone.name);  ou sinon tu fou dans le select un onchange="alert(this.name);"

il te donne la valeur a jour de "name" alors que si tu utilises comme je l'ai fait :

alert(O_Table.rows[NbrLigne].innerHTML); 

alors il t'affiche la valeur originelle de "name"!!!
C'est fou ca !! c quand meme pas un bug de javascript, j'ai loupé un truc!!!!

Bref, je suis bien content de constater qu'en fait le probleme ne venait pas de moi! 
Meme si ce qui vient d'arriver est super bizarre a mon gout!!

vinceb87 · Answer

Ouais bon me revoila encore!
Alors comme je disais, apparemment il modifie bien le nom et tout mais la fonction onchange=go(x); n'est pas appelee!!
J'ai beau modifier la selection du select (, aucune reaction!! Normalement ca devrait repopuler une autre liste situee juste a cote.

Ca veut dire quoi ce bordel ? pourtant la syntaxe est plus que correcte. 
Les nouvelles listes créées ne seraient la que pour faire jolie ? :S

Je comprends plus rien.

PetoleTeam · Answer

B onjour... Essayons de reprendre dans l'ordre... a quoi font reference tes T_,O_,S_ dans les noms de variable ? :) c'est juste une façon de nommer les objets manipulés - O_Table -> Objet Table, O_Cell - > Objet cellule plutôt que de mettre des nom de variables du type montableaudereference comme l'on voit parfois... - pour les ID j'ai l'habitude de nommé S_xxx les SELECTs D_xxx les DIVs etc... et en majuscule en plus c'est tout. Chacun ses petites manies. alert(O_Table.rows[NbrLigne].innerHTML); en régle générale on ne travail pas avec le innerHTML pour connaître les propriètés d'un objet mais avec l'objet lui même. Dans le cas présent j'ai testé l'existence de l'objet AUCUN PROBLEME même si IE, est lui seul, affiche un innerHTML incorrect. On notera que quoiqu'il arrive IE reconnaît l'objet par son NAME même si le innerHTML est incorrect. C'est peut être un BUG, mais pas de javascript, qui est sans concéquence si l'on travail avec l'objet lui même. J'ai beau modifier la selection du select La je suis surpris les tests réalisés sont tout à fait correct la fonction liée au onchange fait parti du clonage. Le problème serait-il ailleurs ? A suivre mon fichier TEST TEST_AJOUTER_983466 Fais en bon usage... ;0)

vinceb87 · Answer

Merci,

mais le problème n'est pas résolu pour autant !! DSL.
En fait, dans ta fonction Create_Ligne( where_),si en plus de modifier le nom et l'id, tu modifies aussi le onchange de ton nouvel objet : 

O_Clone.onchange = "Show_Select(this);";

Et bien tu te rendras compte que cela ne fonctionne plus !!
Et c'est plutot la que se situe mon probleme ;)

En esperant y arriver un jour...
@+

vinceb87 · Answer

Et sinon, ouais j'utilise IE... C'est juste que c'est le seul navigateur que j'ai sur mon PC de stage. :D

vinceb87 · Answer

Bon en fait, ca y ait ca été résolu!!
Fallait taper :

 O_Clone1.onchange = function(){go(this.id);};

au lieu de :

 O_Clone1.onchange = 'go('+this.id+');' ;

Maintenant ca marche nickel!!
Trop cool.

Merci encore pour ton aide et bonne continuation!

vinceb87 · Answer

Ouais tu as tout a fait raison!!
j'ai du m'emmeler un peu les pinceaux a force d'avoir la tete entre ces lignes de code :P
En tout cas merci pour cette precision, qui rend le code plus rigoureux je dirais ;)

Ajouter une autre liste deroulante en appuyant sur un bouton

13 réponses

Votre réponse

Discussions similaires