Se connecter / S'enregistrer

Résolu Intégration d'une importante liste déroulante liée en Javascript

Solutions (5)
Tags :
  • photo
  • Javascript
  • Html
  • Programmation
|
Bonjour à tous,

Je reviens vers vous après avoir obtenu de précieux conseils lors de précédents posts.

Voilà, j'effectue actuellement un important travail sur mon site www.sts-missionnavettespatiale.net. Au jour d'aujourd'hui, le site en question propose des vignettes photographiques renvoyant vers une version grand format hébergée par imageshack.us. Cette solution me convenait jusqu'à présent mais, afin de permettre au visiteur de rester à l'intérieur du site, j'entreprend la construction de page HTML dédiées à chaque version grand format liées aux dites vignettes.

L'ensemble de ces pages, doivent être sélectionnables individuellement par l'intermédiaire d'une page d'accueil. Sur cette page est proposée une liste déroulante liée. (1 - Choix d'une mission, 2 - Choix d'une photo de cette mission.=

Le fonctionnement de cette liste déroulante liée est assurée en grande partie par un javascript adapté pour l'occasion.

Ma question est la suivante:

Ce code javascript va être sollicité pour 134 missions, comportant chacune entre 6 et 7 photographies différentes. Est-ce que je dois m'attendre, au vu de l'importance des données qu'il comportera en définitif, à des problèmes de fonctionnement, ou cette importance de données n'a pas d'incidence sur le fonctionnement générale de cette liste déroulante liée.

Je vous joint le code javascript en question pour plus de clarté. ATTENTION, pour l'instant ce code ne comporte que 8 choix possibles. A terme, il en comportera 134.

Merci de m'avoir lu, et merci pour vos observations éventuelles.




  1. <SCRIPT language="JavaScript">
  2. <!--
  3. <!--
  4. function Choix(form) {
  5. i = form.pays.selectedIndex;
  6. form.dep.options.length=0;
  7. Item = new Option("Choisir une image", "", false, false);
  8. form.dep.options[0]=Item;
  9. form.dep.selectedIndex = 0;
  10. switch (i) {
  11. case 1 : var txt = new Array ('sts-133'); var url = new Array ('photo_sts-132_equipage.html','','','','');
  12. break;
  13.  
  14. case 2 : var txt = new Array ('sts-133'); var url = new Array ('photo_sts-132_equipage.html','','','','');
  15. break;
  16.  
  17. case 3 : var txt = new Array ('','Equipage','Lancement','Configuration assemblage ISS','Caméra perche OBSS','Garrett Reisman - EVA1 - Antenne SGANT','Module russe Rassvet','Garret Reisman - EVA3','Equipages ISS/Navette','Atterrissage','Emblème mission'); var url = new Array ('','photo_sts-132_equipage.html','photo_sts-132_decollage.html','photo_sts-132_iss_dia.html','photo_sts-132_obss.html',"photo_sts-132_sgant.html","photo_sts-132_rassvet.html","photo_sts-132_eva3.html","photo_sts-132_iss_equipage.html","photo_sts-132_atterrissage.html","photo_sts-132_patch.html");
  18. break;
  19.  
  20. case 4 : var txt = new Array ('','Equipage','Lancement','Configuration arrimage ISS','Mastracchio EVA-1','Mastracchio EVA-2','Mastracchio et Anderson EVA-3','Equipages ISS/Navette','ISS après désarrimage','Atterrissage','Emblème mission'); var url = new Array ('','photo_sts-131_equipage.html','photo_sts-131_decolage.html','photo_sts-131_configuartion_iss.html','photo_sts-131_Rick_Mastracchio_eva1.html','photo_sts-131_Rick_Mastracchio_eva2.html','photo_sts-131_Rick_Mastracchio_eva3.html','photo_sts-131_equipage_iss_navette.html','photo_sts-131_iss.html','photo_sts-131_atterrissage.html','photo_sts-131_patch.html');break;
  21.  
  22. case 5 : var txt = new Array ('','Equipage','Lancement','Configuration assemblage ISS','ISS avant amarrage','Endeavour photographiée depuis l ISS','Tranquility et Cupola','Installation Tranquility','Robert Behnken et Nicholas Patrick EVA-1','Astronaute Nicholas Patrick et Cupola EVA-3','Equipages ISS/Endeavour','Président Obama', 'Atterrissage','Emblème de mission'); var url = new Array ('','photo_sts-130_equipage.html','photo_sts-130_lancement.html','photo_sts-130_configuration_iss.html','photo_sts-130_iss_après_amarrage.html','photo_sts-130_endeavour.html','photo_sts-130_cupola.html','photo_sts-130_tranquility.html','photo_sts-130_eva-1.html','photo_sts-130_derniere_eva.html','photo_sts-130_equipage_iss.html','photo_sts-130_obama.html','photo_sts-130_atterrissage.html','photo_sts-130_patch.html');break;
  23.  
  24. case 6 : var txt = new Array ('','Equipage','Atlantis Pad 39A','Lancement','Configuration assemblage ISS','Expérience MISSE-7/Antenne SASA','Robert Satcher EVA-1','Michael Foreman/Randolph Bresnik EVA-2','Randolph Bresnik EVA-3','Equipages ISS/Atlantis','Atlantis après désarrimage','Atterrissage','Emblème de mission'); var url = new Array ('','photo_sts-129_equipage.html','photo_sts-129_39A.html','photo_sts-129_lancement.html','photo_sts-129_config.html','photo_sts-129_misse7.html','photo_sts-129_eva1.html','photo_sts-129_eva2.html','photo_sts-129_eva3.html','photo_sts-129_equip_iss.html','photo_sts-129_atlantis.html','photo_sts-129_atterrissage.html','photo_sts-129_patch.html');break;
  25.  
  26. case 7 : var txt = new Array ('','Equipage','Lancement','Configuration arrimage ISS','Nicole Stott','Nicole Stott EVA-1','Christer Fuglesang EVA-2','Christer Fuglesang EVA-3','Membres équipage ISS/Discovery','ISS après désarrimage','Atterrissage','Emblème de mission'); var url = new Array ('','photo_sts-128_equipage.html','photo_sts-128_lancement.html','photo_sts-128_iss_config.html','photo_sts-128_stott.html','photo_sts-128_eva1.html','photo_sts-128_eva2.html','photo_sts-128_eva3.html','photo_sts-128_crew_ISS_discovery.html','photo_sts-128_iss.html','photo_sts-128_atterrissage.html','photo_sts-128_patch.html');break;
  27.  
  28. case 8 : var txt = new Array ('','Equipage','Lancement','Configuration assemblage ISS','Plateforme JEM-EF et bras Canadarm2','Christopher Cassidy EVA-5','Christopher Cassidy et Dave Wolf EVA-2','Salut de Christopher Cassidy EVA-5','Equipages ISS-Endeavour','ISS après désarrimage','Atterrissage','Emblème de mission'); var url = new Array ('','photo_sts-127_equipage.html','photo_sts-127_lancement.html','photo_sts-127_config_iss.html','photo_sts-127_jem_ef.html','photo_sts-127_ChristopherCassidy_eva5.html','photo_sts-127_ChristopherCassidy_eva3.html','photo_sts-127_ChristopherCassidy_eva5(2).html','photo_sts-127_equipage_iss_endeavour.html','photo_sts-127_iss.html','photo_sts-127_atterrissage.html','photo_sts-127_emblème.html');break;
  29.  
  30. }
  31.  
  32. for (i=0;i<txt.length;i++) { Item = new Option(txt[i], url[i], false, false); form.dep.options[i+1]=Item; }}
  33.  
  34. // -->
  35.  
  36. function MM_jumpMenu(targ,selObj,restore){ //v3.0
  37. eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  38. if (restore) selObj.selectedIndex=0;
  39. }
  40. //-->
  41. </SCRIPT>

Contenus similaires
Meilleure solution
partage
|
Tout comme Seb33300, je préconise aussi l'utilisation d'Ajax, car mettre un énorme javascript va être très consommateur au niveau du client et risque de géner tes visiteurs.
Cela va aussi être dommageable pour les ressources serveur car tu enverras, peut-être inutilement, un grand nombre de données qui ne seront pas utilisées ensuite.
  • Commenter cette solution |
Score
0
òh
òi
|
Bonsoir à tous,

Je reprend le cours de ce sujet. En ce qui concerne la fabrication d'une liste déroulante liée pour la fabrication d'une page galerie sur mon site, j'ai abandonné l'idée et me suis résolu à proposer des vignettes cliquables.

Mais bon, je croyais pouvoir échapper à une programmation Ajax sur cette problèmatique, comme me le conseillait crazycat@ic, mais je sens que je vais y être contraint. En effet, mon travail sur le site m'amène à réaliser un descriptif des charges utiles de toutes les missions de la navette. Le principe est le même, je doit créer une page d'accueil avec cette fois-ci obligatoirement une liste déroulante liée. 1ère liste: les missions - 2ème liste les charges utiles de la mission sélectionnée. J'ai visité pas mal de pages sur le web concernant l'élaboration de ce type de listes avec Ajax.

A ce stade, j'ai besoin de vos lumières pour des questions qui vont peut-être vous paraître de base.

En suivant un tuto http://siddh.developpez.com/articles/ajax/#LIV-A proposé sur le net, j'ai compris qu'il faut que je crée une table de donnée.

Cette table de donnée est-elle à créer avec une page .html, .php, .js ?


Une fois que j'ai ma page d'accueil en html, je dois réaliser un bout de code comme cela:

<?php
echo "<select name='livre'>";
if(isset($_POST["idAuteur"])){
mysql_connect("localhost","root","root");
mysql_select_db("test");
$res = mysql_query("SELECT id,titre FROM livre
WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";
}
}
echo "</select>";
?>

... où dois-je intégrer ce dernier ? Dans une page dédiée en php ? à l'intérieur de ma page html ? Je ne sais plus !

Si vous avez des conseils, merci, cela me permettra de commencer à pondre quelque chose sur mon ordi. Mais je pense que je vous poserais d'autres questions pour la suite.

A bientôt

DGFIP




  • Commenter cette réponse |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par DGFIP.
  • Commenter cette réponse |
Score
0
òh
òi
|
Merci pour ta réponse Seb33300, le code fonctionne bien sûr au niveau de mon ordi. Il est clair qu'il va falloir que je le test en ligne. Comme tu dis, je serais fixé. Ma question portait sur l'importance (la grosseur) du code javascript, et les effets que cela peut avoir sur le bon fonctionnement de la page. Mais tu as répondu à la question, en m'indiquant que les navigateurs récents exécutaient de façon optimum les codes javascript (quelque soit leur importance ?).

Maintenant, pour la suggestion de données en ajax, je vais m'intéresser à la question, bien que je ne maîtrise pas du tout cet aspect de la programmation. Je vais apprendre.

En attendant, merci pour ta réponse.

DGFIP
  • Commenter cette réponse |
Score
0
òh
òi
|
La seule façon de le savoir c'est de faire le test.

Mais sur les navigateurs recent, l’exécution de code javascript a beaucoup été optimisé ces dernier temps. Donc cela ne devrais pas trop oser de problème.

Mais si jamais c'est le cas, au lieu de tout charger dans des variables javascript, il faudra récupérer les données en ajax.
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS