Select qui se charge en ajax

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par sigma2008, 1 Décembre 2014.

  1. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    790
    J'aime reçus:
    5
    Bonjour,

    J'ai le formulaire ci-dessous




    Code:
    <SELECT name="lechoix" id="general" onchange="montreSelect();">
    <OPTION value="0">----------</OPTION>
    <OPTION value="1">animaux</OPTION>
    <OPTION value="2">legumes</OPTION>
    </SELECT>
    
    <SELECT name="legumes" id="select2" style="display:none">
    <OPTION value="1">patate</OPTION>
    <OPTION value="2">faillot</OPTION>
    </SELECT>
    
    <SELECT name="animaux" id="select1" style="display:none">
    <OPTION value="1">Chien</OPTION>
    <OPTION value="2">Chat</OPTION>
    <OPTION value="3">Cheval</OPTION>
    </SELECT>
    
    <script type="text/javascript">
    function montreSelect(){
      document.getElementById("select1").style.display='none';
      document.getElementById("select2").style.display='none';
      document.getElementById("select"+document.getElementById("general").value).style.display='block';
    }
    </script>
    
    Ce code affiche le menu legumes et animaux selon la sélection du choix.

    Ce que je veux c'est de charger la liste de légumes et animaux de la base de donnée, pour pas charger les deux listes et les cacher je veux utiliser du ajax ou javascript, donc lorsqueue $valeur=1 je connecte sur la bdd pr charger les legumes et si $valeur=2 je charge ls animaux (je maitrise le html et le php mais pas d'ajax :( pouvez vous m'aider svp.

    merci
     
  2. Axiso
    Axiso WRInaute passionné
    Inscrit:
    8 Avril 2004
    Messages:
    1 205
    J'aime reçus:
    0
    Tu veux vraiment envoyer une requête pour ça ? Si les options de tes listes sont connues et en nombre limité, tu peux les afficher par défaut et gérer seulement leur visibilité, puisque de toute façon tes deux listes ont déjà des identifiants différents.

    ("fayot", pas "faillot". Ou bien "Agnan")
     
  3. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    790
    J'aime reçus:
    5
    Oui je dois utiliser des requêtes car la liste est longue des centaines d'options pour pas agrandir la page :)
     
  4. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
    PHP:
    <span class="syntaxhtml"><span class="syntaxdefault"></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">select id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"unTruc"</span><span class="syntaxdefault"> onchange</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"maFonctionAjax();"</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">OPTION value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"0"</span><span class="syntaxkeyword">>----------</</span><span class="syntaxdefault">OPTION</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">OPTION value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"1"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">animaux</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">OPTION</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">OPTION value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"2"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">legumes</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">OPTION</span><span class="syntaxkeyword">><br /></</span><span class="syntaxdefault">select</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">div id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"reponseEnHTML"</span><span class="syntaxkeyword">></</span><span class="syntaxdefault">div</span><span class="syntaxkeyword">><br /><br /><</span><span class="syntaxdefault">script type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"text/javascript"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">   maFonctionAjax</span><span class="syntaxkeyword">(){<br /></span><span class="syntaxdefault">      </span><span class="syntaxcomment">// le contenu de ton select ou d'un input bref une saisie utlisateur<br /></span><span class="syntaxdefault">      var maValeurChoisie </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> document</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">getElementById</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"unTruc"</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">value</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">      </span><span class="syntaxcomment">// ton objet Ajax<br /></span><span class="syntaxdefault">      var xhr</span><span class="syntaxkeyword">=</span><span class="syntaxdefault">null</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxdefault">      </span><span class="syntaxcomment">// instanciation de l'objet ajax en fonction du navigateur<br /></span><span class="syntaxdefault">      if</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">window</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">XMLHttpRequest</span><span class="syntaxkeyword">){</span><span class="syntaxdefault">xhr</span><span class="syntaxkeyword">=</span><span class="syntaxdefault">new XMLHttpRequest</span><span class="syntaxkeyword">();}<br /></span><span class="syntaxdefault">      else if</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">window</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">ActiveXObject</span><span class="syntaxkeyword">){</span><span class="syntaxdefault">xhr</span><span class="syntaxkeyword">=</span><span class="syntaxdefault">new ActiveXObject</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"Microsoft.XMLHTTP"</span><span class="syntaxkeyword">);}<br /><br /></span><span class="syntaxdefault">      </span><span class="syntaxcomment">// envoie d'un requête au serveur web depuis la page du visiteur par l'objet ajax<br /></span><span class="syntaxdefault">      xhr</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">open</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"GET"</span><span class="syntaxkeyword">,</span><span class="syntaxstring">"http://www.example.com/ajax/script.php?data="</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">+</span><span class="syntaxdefault"> maValeurChoisie</span><span class="syntaxkeyword">,</span><span class="syntaxdefault">false</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">      xhr</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">send</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">null</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">      </span><span class="syntaxcomment">// utilisation de la réponse du serveur (en html) pour remplir la div qui était vide<br /></span><span class="syntaxdefault">      document</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">getElementById</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'reponseEnHTML'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">innerHTML</span><span class="syntaxkeyword">=</span><span class="syntaxdefault">xhr</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">responseText</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">   </span><span class="syntaxkeyword">}<br /></span><span class="syntaxdefault"></script></span></span>
    script.php :
    PHP:
    <span class="syntaxdefault"><?php<br />$myData </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> $_GET</span><span class="syntaxkeyword">[</span><span class="syntaxstring">'data'</span><span class="syntaxkeyword">];<br />....<br /></span><span class="syntaxdefault">traitement avec la base ou autre chose<br /></span><span class="syntaxkeyword">....<br /></span><span class="syntaxdefault">echo </span><span class="syntaxstring">"contenu de la div 'reponseEnHTML'."</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">?></span>
     
  5. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    790
    J'aime reçus:
    5
    Bonjour, Merci ZEB de votre réponse c'est exactement ce que je veux :) sauf que ça ne marche pas voici mon code :

    Code:
    <SELECT id="voitures" name="voiture" onchange="maFonctionAjax();" required>
    				<OPTION></OPTION>
    				<OPTION value="1">Renault</OPTION>
    				<OPTION value="2">Peugot</OPTION>
    				<OPTION value="3">DACIA</OPTION>
    </SELECT>
    						
    				
    		
    				<div id="reponseEnHTML"></div>
    
    				<script type="text/javascript">
    					maFonctionAjax(){
    					  // le contenu de ton select ou d'un input bref une saisie utlisateur
    					  var maValeurChoisie = document.getElementById("voitures").value;
    					  // ton objet Ajax
    					  var xhr=null;
    
    					  // instanciation de l'objet ajax en fonction du navigateur
    					  if(window.XMLHttpRequest){xhr=new XMLHttpRequest();}
    					  else if(window.ActiveXObject){xhr=new ActiveXObject("Microsoft.XMLHTTP");}
    
    					  // envoie d'un requête au serveur web depuis la page du visiteur par l'objet ajax
    					  xhr.open("GET","voiture.php?data=" + maValeurChoisie,false);
    					  xhr.send(null);
    					  // utilisation de la réponse du serveur (en html) pour remplir la div qui était vide
    					  document.getElementById('reponseEnHTML').innerHTML=xhr.responseText;
    				   }
    				</script>
    A savoir que la page voiture qui contient le code (pour tester) :

    Code:
        <?php
        $myData = $_GET['data'];
    
        echo "Braavo !";
        ?>
    
    et la page qui contient le formulaire se trouvent dans le même dossier.

    Quand je choisi entre renault peugot etc ... ça ne donne rien le div est toujours vide !!

    Merci de votre aide :(
     
  6. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
    xhr.open("GET","voiture.php?data=" + maValeurChoisie,false);
    xhr.open("GET","http://www.tondomaine.com/ton-dossier/voiture.php?data=" + maValeurChoisie,false);
     
  7. baud74
    baud74 WRInaute impliqué
    Inscrit:
    21 Juillet 2014
    Messages:
    580
    J'aime reçus:
    0
    regarder dans la console si le fichier voiture.php est bien appelé par la fonction javascript, s'il y a des erreurs javascript.
     
  8. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    790
    J'aime reçus:
    5
    @zeb, oui j'ai déjà essayé : xhr.open("GET","http://localhost:82/webtest/voiture.php?data=" + maValeurChoisie,false);
    Mais ça ne donne rien !

    @baud74 comment voir quelle console ? Firebug ?
     
  9. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    790
    J'aime reçus:
    5
    la console m'affiche une erreur :

    SyntaxError: missing ; before statement
    maFonctionAjax(){

    Puis quand je sélectionne dans le formulaire une autre erreur apparait dans la console :

    ReferenceError: maFonctionAjax is not defined
    <!DOCTYPE html>
     
  10. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
    oui j'ai écrit ça a l'arrache vite fait hier soir j'ai oublié des trucs.

    <script type="text/javascript">
    function maFonctionAjax(){
    // le contenu de ton select ou d'un input bref une saisie utlisateur ...

    il est probable que "SyntaxError: missing ; before statement" soit lié aussi à l'oublie de "function".
     
  11. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    790
    J'aime reçus:
    5
    Et comment que j'ai pas vu XD, oui c'est bon ça marche merci beaucoup ZEB x)
     
  12. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    790
    J'aime reçus:
    5
    ZEB sauve moi :(

    Je veux cette foici sur le même code, lors de l'ouverture de la page j'ai sélectionné un choix par défaut avec (selected) mais le secods select ne se charge pas car il se charge que quand on change avec la souris, un moyen pour qu'il se charge automatiquement avec la page ?
     
  13. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
    <body onload="maFonctionAjax();>
     
  14. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    790
    J'aime reçus:
    5
    Merci zeb ça marche que sur Body ? on ne peut pas mettre le code onload dans une div ?
     
  15. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    790
    J'aime reçus:
    5
    C'est bon j'ai trouvé, j'ai ajouté tout en bas :
    <script type="text/javascript">
    maFonctionAjax();
    </script>
     
Chargement...
Similar Threads - Select charge ajax Forum Date
Crawler une url présente dans un select Développement d'un site Web ou d'une appli mobile 28 Mars 2022
Onclick Select ne fonctionne pas dans Chrome Développement d'un site Web ou d'une appli mobile 21 Mars 2022
Sélectionner les 5 plus proches produits Développement d'un site Web ou d'une appli mobile 11 Décembre 2021
Google sélectionne une autre URL canonique que celle déclarée Référencement international (langues, pays) 31 Mai 2021
Publicité hyper sélective AdSense 8 Avril 2021
Page en double : l'URL envoyée n'a pas été sélectionnée comme URL canonique Référencement international (langues, pays) 2 Avril 2021
Page en double : l'URL envoyée n'a pas été sélectionnée comme URL canonique Problèmes de référencement spécifiques à vos sites 24 Février 2021
Search Console URL canonique sélectionnée par Google : Sans objet Débuter en référencement 27 Janvier 2021
Search Console Page en double : l'URL envoyée n'a pas été sélectionnée comme URL canonique Problèmes de référencement spécifiques à vos sites 4 Septembre 2020
Search Console Page en double sans URL canonique sélectionnée par l'utilisateur? Crawl et indexation Google, sitemaps 1 Octobre 2019
Search Console Page en double sans URL canonique sélectionnée par l'utilisateur Crawl et indexation Google, sitemaps 5 Août 2019
SELECT COUNT avec PDO et récupérer le résultat Développement d'un site Web ou d'une appli mobile 27 Mai 2019
Comment sélectionnez vous votre thème Wordpress? Développement d'un site Web ou d'une appli mobile 15 Janvier 2019
Choix et sélection des annuaires et backlinks ? Débuter en référencement 30 Décembre 2018
Migration = Problème d'url non sélectionné comme canonique Crawl et indexation Google, sitemaps 14 Novembre 2018
L'URL envoyée n'a pas été sélectionnée comme URL canonique Problèmes de référencement spécifiques à vos sites 19 Septembre 2018
URL envoyée pas été sélectionnée comme URL canonique Problèmes de référencement spécifiques à vos sites 3 Juillet 2018
onClick select fonctionne pas avec Chrome Développement d'un site Web ou d'une appli mobile 7 Mars 2018
Problème pour passer un tableau en paramètre d'une requêtet SELECT. Développement d'un site Web ou d'une appli mobile 24 Mars 2017
Récupérer tous les champs d'un select et les marquer "selected" Développement d'un site Web ou d'une appli mobile 22 Mars 2017