Partage
  • Partager sur Facebook
  • Partager sur Twitter

Jquery Json Changer liste après envoie option

    17 septembre 2017 à 18:22:48

    Bonjour à tous, 

    J'aimerai donc comme le titre le signale, changer ma liste en fonction du choix de mon select et après l'envoie de mon form.

    Je pèche à partir du moment ou il faut changer les informations, c'est à dire que j'y arrive mais pour un seul cas uniquement.

    La partie json

    {
      "sports":  [
            {
              "code_sport": "s10",
              "intitule": "Escrime"
            },
            {
              "code_sport": "s16",
              "intitule": "Judo"
            }
          ],
      "disciplines": [
            {
              "code_discipline": "d1001",
              "intitule": "Epee individuel  messieurs",
              "code_sport": "s10"
            },
            {
              "code_discipline": "d1002",
              "intitule": "Epee individuel  dames",
              "code_sport": "s10"
            },
            {
              "code_discipline": "d1003",
              "intitule": "Fleuret individuel  messieurs",
              "code_sport": "s10"
            },
            {
              "code_discipline": "d1004",
              "intitule": "Fleuret individuel  dames",
              "code_sport": "s10"
            },
            {
              "code_discipline": "d1005",
              "intitule": "Sabre individuel  messieurs",
              "code_sport": "s10"
            },
            {
              "code_discipline": "d1006",
              "intitule": "Sabre individuel  dames",
              "code_sport": "s10"
            },
            {
              "code_discipline": "d1007",
              "intitule": "Epee par equipe  messieurs",
              "code_sport": "s10"
            },
            {
              "code_discipline": "d1008",
              "intitule": "Epee par equipe  dames",
              "code_sport": "s10"
            },
            {
              "code_discipline": "d1009",
              "intitule": "Fleuret par equipe  messieurs",
              "code_sport": "s10"
            },
            {
              "code_discipline": "d1010",
              "intitule": "Fleuret par equipe  dames",
              "code_sport": "s10"
            },
            {
              "code_discipline": "d1011",
              "intitule": "Sabre par equipe  messieurs",
              "code_sport": "s10"
            },
            {
              "code_discipline": "d1012",
              "intitule": "Sabre par equipe  dames",
              "code_sport": "s10"
            },
            {
              "code_discipline": "d1601",
              "intitule": " + 100 kg",
              "code_sport": "s16"
            },
            {
              "code_discipline": "d1602",
              "intitule": "  90 kg",
              "code_sport": "s16"
            },
            {
              "code_discipline": "d1603",
              "intitule": "  63 kg",
              "code_sport": "s16"
            },
            {
              "code_discipline": "d1605",
              "intitule": "  68 kg",
              "code_sport": "s16"
            },
            {
              "code_discipline": "d1616",
              "intitule": "  78 kg",
              "code_sport": "s16"
            }
          ],
        "sportifs": [
            {
              "numlicence": "p3",
              "code_sport": "s10",
              "nom": "Obry",
              "prenom": "Hugues",
              "datenaiss": "19/05/1973",
              "pays": "France"
            },
            {
              "numlicence": "p2",
              "code_sport": "s10",
              "nom": "Flesselcolovic",
              "prenom": "Laura",
              "datenaiss": "06/11/1971",
              "pays": "France"
            },
            {
              "numlicence": "p7",
              "code_sport": "s10",
              "nom": "Gourdain",
              "prenom": "Matthieu",
              "datenaiss": "04/05/1974",
              "pays": "France"
            },
            {
              "numlicence": "p53",
              "code_sport": "s16",
              "nom": "Douillet",
              "prenom": "David",
              "pays": "France"
            }
          ],
        "medailles": [
            {
              "id": "Argent",
              "code_discipline": "d1001",
              "numlicence": "p3"
            },
            {
              "id": "Bronze",
              "code_discipline": "d1002",
              "numlicence": "p2"
            },
            {
              "id": "Argent",
              "code_discipline": "d1005",
              "numlicence": "p7"
            },
            {
              "id": "Or",
              "code_discipline": "d1601",
              "numlicence": "p53"
            }
          ]
      }
    


    la partie html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>TP AJAX jQuery</title>
    </head>
    <body>
        <div class="contenu">                
            <h1>Test AJAX en jQuery</h1>
        </div>
    	<FORM>
    		<SELECT id="nom" size="1">
    			<OPTION value="judo">judo
    			<OPTION value="escrime">escrime
    		</SELECT>
    	<button id="button1" type="submit">valider</button>
    	</FORM>
        <div id="disciplines"></div>
    	
    	
    	
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script text="javascript">
    // appel AJAX avec la fonction $.ajax	
     $.ajax( {
    url: "jo.json",
    type : "get",
    success : afficheRes,
    dataType: "json"
    });
     
     function afficheRes(dataJSON) {
     // fonction d'affichage
    var res = $("<ul>"); // creation d'une liste d'éléménts
    var disciplines = dataJSON.disciplines; // le tableau 
    for (var i=0 ; i < disciplines.length ; i++) {
    bleu = disciplines[i].code_sport; //récupere le code sport
    txt1 = disciplines[i].intitule; //recupere l'intitulé
    s = "s16";
    b = "s10";
    
    
       $("#nom option").each(function(){
     if ( $(this).val() == "judo" && bleu == b )
     {
       // Comparaison du code sport si code sport = s16 on display sinon on ne fait rien
    res.append("<li>"+txt1+"</li>"); // ajoute balise <li> + l'intitule 
    
    	}
     else  
    { 
    
    }
    
      });
    
    
    }
    
    $("#disciplines").append(res); // ajout de la liste dans la div d'id disciplines
    }
    
    
        </script> 
    </body>
    </html>
    

    Merci d'avance à ceux qui m'aiderons. 

    • Partager sur Facebook
    • Partager sur Twitter
    Comment vous représentez-vous ça : l'endroit ou l'espace se termine ? | Iss Live Feed
      18 septembre 2017 à 17:40:34

      Salut, dans ton code tu n'appelle qu'un fois seulement la requête ajax, et c'est à la lecture du script (=> chargement de la page)

      Si j'ai bien compris et que tu veux faire un formulaire interactif, il faut que tu lance ta requête à chaque fois que tu soumet le formulaire :

      $("FORM").submit(function(e){//ajoute un id à ta form plutôt que d'utiliser ce sélecteur

      e.preventDefault(); // empêche la page de se recharger

      doRequeteAjax(); //effectue la requête

      });

      et ta fonction pour faire l'ajax :

      function doRequeteAjax(){

      $.ajax(...);

      }

      • Partager sur Facebook
      • Partager sur Twitter
        19 septembre 2017 à 16:26:53

        Effectivement, je ne prenais pas le problème dans le bon sens! Merci pour ton aide !
        • Partager sur Facebook
        • Partager sur Twitter
        Comment vous représentez-vous ça : l'endroit ou l'espace se termine ? | Iss Live Feed

        Jquery Json Changer liste après envoie option

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown