11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour tout le monde !

Alors voilà, je suis en stage depuis peu et on m'a demandé de développer en utilisant de l'Ajax / Jquery / Json, chose que je n'avais jamais fait auparavant, donc un peu dans la galère de temps en temps ! Smiley biggol

Donc mon problème ici, est que je récupère à partir d'un script php avec ma requête SQL, l'id de la société que j'ai tapé dans le champ, grâce à ce bout de php :

    $req = mysql_query('SELECT intitule_site, societe.id as id FROM site, societe WHERE site.id_soc = societe.id AND nom="'.$_POST["soc"].'"');
    
    $result = array();
     
    $i = 0;
    while ($row_site = mysql_fetch_assoc($req))
    {
        $result[$i]['intitule_site'] = $row_site['intitule_site'];
        $result[0]['id'] = $row_site['id'];
        $i++;
    }
    
    echo json_encode($result);


Que j'appelle avec cet Ajax :
          $.ajax({    // Appel du script de récupération des infos sur les sites de l'entreprise saisie
    			type: 'POST',
    			url: 'scripts_php/recup_sites.php',
    			dataType: 'json',
    			data: 'soc=' + $('.nom_soc').val(),
    			success:     // Si le script a correctement retourné les valeurs, on éxecute la fonction pour parser son résultat
    				function(json) {
    				parseJSONsite(json);
    				}
    		});


Et que je parse grâce à ce code :
 function parseJSONsite(json) {
    
    var select = $('.off'); 
	
    for ($i = 0; $i < json.length; $i++) {   // Pour tous les objets récupérés
        
                     // console.log(json) ;
                     select.append('<option>' + json[$i]['intitule_site'] + '</option>');    // créé les <option> du select
                     
                     $('.id_soc').val(json[0]['id']);                                 
                };


  };


Maintenant mon problème vient de
a écrit :
$('.id_soc').val(json[0]['id']);
, qui, met la valeur de l'id récupéré en Json correctement dans le champ caché "id_soc" (vérifié par un alert juste après), mais lorsque je sors de la fonction parseJSONsite, le champ "id_soc" est automatiquement vidé, donc je ne peux pas m'en servir pour éxecuter mon script suivant ...

Si je n'ai pas été claire, n'hésitez pas à poser des questions.

Merci d'avance !! Smiley ravi
Modifié par Seyu (12 Jan 2012 - 09:40)
Bonjour,

C'est ce que j'ai fait.
D'ailleurs ça me semble bizarre, car lorsqu'il est en "hidden", et que j'inspecte le code source avec google chrome, l'id de l'input est bien "2". Mais lorsque je veux le récupérer dans mon deuxième parseur grâce à ce code :

$('.id_soc').val();


Il est vide.

Et quand il est en "text", il reste tout le temps vide.

Mais quelque chose d'autre m'interpèle, c'est que j'ai mis des alert aux ' coins de mon code pour voir où l"id avait la bonne valeur et où il la perdait, et je me suis rendue compte que l'ordre des alert n'était pas correct, je m'explique en exemple:

alert 1 : $('.id_soc').val(); -> Retourne 0

<parseur>
alert 2 : $('.id_soc').val(); -> Retourne 2
</parseur>

alert 3 : $('.id_soc').val(); -> Retourne 0

Bizarrement, les alert s'affichent dans le sens : Alert 1 -> Alert 3 -> Alert 2 ...
Dans un premier temps, plutôt que d'attribuer X fois de suite la même valeur a ton input (ici json[0]['id']), vérifie que ce que tu attribue n'est pas vide et dans ce cas seulement tu l’insère dans ton input.

Ensuite vérifie ton while:
Quelque soit le résultat que tu parcoures tu attribue toujours l'id dans l'élement indice 0 (j'ai bien compris que c'etait pour ensuite etre sur du truc en tapant json[0]['id'], mais c'est pas super propre). Attribue tes valeurs correctement et ensuite rajoute un if dans ta fonction parseJSONsite pour l'attribution dans ton input.

Autre question, est-il possible que ta requête php te retourne plusieurs résultats ? si ce n'est pas le cas, tu rajoute un LIMIT 1 a la fin de ta requête (juste pour être sur) et tu ne retourne pas un tableau de résultats mais directement un tableau avec les 2 valeurs dont tu as besoin Smiley langue
Salut,

Pour ta dernière question, oui, ma requête renvoie systématiquement plusieurs résultats.

J'ai ajouté des tests premièrement dans mon php :

    while ($row_site = mysql_fetch_assoc($req))
    {
        $result[$i]['intitule_site'] = $row_site['intitule_site'];
        
        if (!isset($result[0]['id']))
        {
             $result[0]['id'] = $row_site['id'];
        }
        
        $i++;
    }


Et deuxièmement dans mon js :

                     if(!($('.id_soc').val())) // Si la value de l'input n'est pas renseignée
                     {
                        $('.id_soc').val(json[0]['id']);  
                     }


Maintenant l'id s'affiche correctement dans mon input.
Malheureusement, quand je veux utiliser cette donnée pour la passer en paramètre de mon deuxième parseur :

           $.ajax({    
    			type: 'POST',
    			url: 'scripts_php/recup_contacts.php',
    			dataType: 'json',
    			data: 'id=' +  $('.id_soc').val(),   // Ici le problème
    			success:   
    				function(json) {
    				parseJSONcontacts(json)    
    				}
    		});	


Cela ne fonctionne pas. Et toujours pour la même raison qu'au début.
J'ai refait un alert entre les deux de la value de l'input est il n'y a rien.
Et le 2 s'affiche dans le champ uniquement APRES l'alert, pourtant il est inséré lors du premier parseur, qui est lui, AVANT le deuxième ...

Exemple de test de mes alert :

Pour
          $.ajax({    // Appel du script de récupération des infos sur les sites de l'entreprise saisie
    			type: 'POST',
    			url: 'scripts_php/recup_sites.php',
    			dataType: 'json',
    			data: 'soc=' + $('.nom_soc').val(),
    			success:     // Si le script a correctement retourné les valeurs, on éxecute la fonction pour parser son résultat
    				function(json) {
    				parseJSONsite(json);
    				[b]alert ($('.id_soc').val());   // L'alert renvoie correctement l'id[/b]
    				}
    		});   

            
    	   
           $.ajax({    // Appel du script de récupération des infos sur les contacts de l'entreprise saisie
    			type: 'POST',
    			url: 'scripts_php/recup_contacts.php',
    			dataType: 'json',
    			data: 'id='+  $('.id_soc').val(),
    			success:     // Si le script a correctement retourné les valeurs, on éxecute la fonction pour parser son résultat
    				function(json) {
    				parseJSONcontacts(json)    
    				}
    		});	


Mais si je mets

          $.ajax({    // Appel du script de récupération des infos sur les sites de l'entreprise saisie
    			type: 'POST',
    			url: 'scripts_php/recup_sites.php',
    			dataType: 'json',
    			data: 'soc=' + $('.nom_soc').val(),
    			success:     // Si le script a correctement retourné les valeurs, on éxecute la fonction pour parser son résultat
    				function(json) {
    				parseJSONsite(json);
    				}
    		});   

            [b]alert ($('.id_soc').val());  // L'alert ne renvoie rien[/b]
    	   
           $.ajax({    // Appel du script de récupération des infos sur les contacts de l'entreprise saisie
    			type: 'POST',
    			url: 'scripts_php/recup_contacts.php',
    			dataType: 'json',
    			data: 'id='+  $('.id_soc').val(),
    			success:     // Si le script a correctement retourné les valeurs, on éxecute la fonction pour parser son résultat
    				function(json) {
    				parseJSONcontacts(json)    
    				}
    		});	


Alors que l'attribution de l'id devrait déjà être faite dans la fonction parseJSONsite.
Modifié par Seyu (11 Jan 2012 - 14:19)
Bon,
bah je sais pas si c'est très propre ou quoi, mais comme la valeur existait seulement pendant l'éxecution du sucess de la première requete ajax, j'ai simplement mis mon deuxième bout d'ajax à l'intérieur de la success : function() du premier, comme suit :

$.ajax({  
    			type: 'POST',
    			url: 'scripts_php/recup_sites.php',
    			dataType: 'json',
    			data: 'soc=' + $('.nom_soc').val(),
    			success:     
    				function(json) {
    				parseJSONsite(json);
    			//	alert ($('.id_soc').val());
    			
    			var tabContacts = new Array(); 
    	   
                       $.ajax({   
                			type: 'POST',
                			url: 'scripts_php/recup_contacts.php',
                			dataType: 'json',
                			data: 'id=' +  $('.id_soc').val(),
                			success:     
                			     function(json) {
                				parseJSONcontacts(json)    
                				}
                		});
    				}
    		});
Franchement je ferais bien un debug plus poussé mais y'a vraiment un truc qui me gène dans ton code, c'est la répétition des attributions de valeur (dans ton while et dans ta fonction parseJSONsite()).

Peux tu faire des modifs pour que ce soit deja plus propre en terme de code ensuite j'y verrais surement plus clair (si je te demande ça, c'est pour eviter de faire 25 allers-retours de test de tel et tel trucs):

Change ton php en:

<?php
$req = mysql_query('SELECT intitule_site, societe.id as id FROM site, societe WHERE site.id_soc = societe.id AND nom="'.$_POST["soc"].'"');

    $result = array();
    $i = 0;
    $id = "";

    while ($row_site = mysql_fetch_assoc($req)){
        $result[$i]['intitule_site'] = $row_site['intitule_site'];
        $result[$i]['id'] = $row_site['id']; //Cette ligne c'est au cas ou tu en aies besoin, mais facultatif pour ce dont on parle
        if ($row_site['id']){
                $id = $row_site['id'];
        }
        $i++;
    }
    $result['id'] = $id;
    echo json_encode($result);

?>



Ensuite dans ton code js:


function parseJSONsite(json) {
    var select = $('.off'); 
    for ($i = 0; $i < json.length; $i++) { 
        select.append('<option>' + json[$i]['intitule_site'] + '</option>');    // créé les <option> du select
    };
    $('.id_soc').val(json['id']);  // Comme ça on attribue une seule fois la valeur, c'est beaucoup plus propre en le sortant de la boucle for
    // Rajoute eventuellement un alert ici pour voir si la valeur est bien attribuée
  };



Pour ce qui est de ton alert, ça doit etre parce que quand le alert est executé, la requete ajax n'est pas encore retournée, donc la valeur n'est pas attribuée au moment du alert.

Ce que tu peux tenter, c'est d'imbriquer la deuxieme requete ajax dans le success de la premiere, ce qui permettrait d'etre sur que la requete est bien terminée et que la valeur est bien attribuée Smiley smile
J'ai fait un double post juste avant pour dire que j'avais réussi à faire fonctionner tout ça !! Smiley lol
D'ailleurs j'ai effectivement eu l'idée d'imbriquer le deuxième bout d'ajax dans le success du premier, ce qui a bien marché ^_^

Maintenant ça ne ressemble plus vraiment à ça car j'y allais progressivement, mais la requête est maintenant plus complète donc ton code ne fonctionnerait plus (j'ai changé les id etc).

En tout cas merci de ton aide ! Smiley smile