IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[AJAX] Actualisation de select


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de Pahcixam
    Profil pro
    Développeur Web
    Inscrit en
    Avril 2006
    Messages
    289
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2006
    Messages : 289
    Par défaut [AJAX] Actualisation de select
    Bonjour,

    je me suis mis il n'y a pas longtemps à l'ajax dans mes codes php. J'ai d'ailleur suivit un tuto du site. Seulement j'ai un problème. Mon code affiche trois select de suite, le premier actualise le second qui lui même actualise le 3ème (j'espère que c'est claire). A la première selction tout va bien, mais dès que je change d'option dans un select qui a déjà actualisé le suivant, je me retrouve avec un select dans un select, et ainsi de suite à chaque actualisation !! Ce qui rend le code pas très fonctionnel. Je voudrai donc savoir si je dois ajouter une condition pour eviter ce problème, sachant que je connait pas trop le JS.

    Voici mes sources:

    ajax.js:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    			var xhr = null; 
     
    			function getXhr(){
    				if(window.XMLHttpRequest) // Firefox et autres
    				   xhr = new XMLHttpRequest(); 
    				else if(window.ActiveXObject){ // Internet Explorer 
    				   try {
    			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			            } catch (e) {
    			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			            }
    				}
    				else { // XMLHttpRequest non supporté par le navigateur 
    				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    				   xhr = false; 
    				} 
    			}
     
    			/**
    			* Ajax qui définit les surfaces et les prix
    			*/
    			function prix_surface(){
    				getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function(){
    					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    					if(xhr.readyState == 4 && xhr.status == 200){
    						leselect = xhr.responseText;
    						// On se sert de innerHTML pour rajouter les options a la liste
    						document.getElementById('prix').innerHTML = leselect;
    					}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","include/game/ajax_prix.php",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
    				sel = document.getElementById('secteur');
    				idsecteur = sel.options[sel.selectedIndex].value;
    				xhr.send("idSecteur="+idsecteur);
    			}
    			/**
    			* Ajax qui définit le personnel possible
    			*/
    			function personnel(){
    				getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function(){
    					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    					if(xhr.readyState == 4 && xhr.status == 200){
    						leselect = xhr.responseText;
    						// On se sert de innerHTML pour rajouter les options a la liste
    						document.getElementById('nb_personnes').innerHTML = leselect;
    					}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","include/game/ajax_personnel.php",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
    				sel = document.getElementById('prix');
    				idprix = sel.options[sel.selectedIndex].value;
    				xhr.send("idPrix="+idprix);
    			}
    index.php:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
     
    <?php
    if(isset($_SESSION['id'])){
    include 'config.php';
    echo'<script type="text/javascript">';
    include 'include/ajax.js';
    echo '</script>';
    //Ici on fait les opérations de premières visite | etape 1
     
    	if(($_SESSION['initialise'] == '0') && (!isset($_POST['ok']))){
    	echo '
    	<table border=0 align="justify">
    	<tr><td>
    	<form action="index.php?cat=game&act=index" name="choix_init" method="POST">
    	<INPUT TYPE="radio" CHECKED NAME="choix" VALUE="1"> Je veux creer mon entreprise<br>
    	<INPUT TYPE="radio" NAME="choix" VALUE="2"> Je veux devenir salarier<br>
    	<INPUT TYPE="radio" NAME="choix" VALUE="3"> Je veux travailler pour la mairie<br><br>
    	<input type="submit" name="ok" value="Rejoindre la ville">
    	</form>
    	</td></tr>
    	</table>';
     
    	}
     
    	//Ici on fait les opérations de premières visite | etape 2
    	if(($_SESSION['initialise'] == '0') && ($_POST['ok'] == 'Rejoindre la ville')){
     
    		if($_POST['choix'] == 1){
    		echo "<form name='entreprise'>
    		<select name='secteur' id='secteur' onchange='prix_surface()'>
    		<option value='-1'>Aucun</option>";
     
    		//Secteur d'activité ||||||||||||||||||||||||||||||||
    		for($i=0;$i<sizeof($activites);$i++)
    		{
    		echo "<option value='".$activites[$i]."'>".$activites[$i]."</option>";
    		echo "\n";
    		} 
    		echo "</select>\n\n";
     
    		//Surface |||||||||||||||||||||||||||||
     
    		echo "<div id='prix' style='display:inline'>
    		<select name='prix' id='prix' onchange='personnel()'>";
    		echo "<option value='-1'>Choisir une surface</option>";
    		echo "</select>\n\n</div>";
    		echo "<div id='nb_personnes' style='display:inline'>
    		<select name='nb_personnes' id='nb_personnes'>";
    		echo "<option value='-1'>Choisir le nombre d'employés</option>";
    		echo "</select>\n\n</div>";
    		echo "</form>";		
    		}
    		}
     
     
    	}
     
    }
    ?>
    ajax_prix.php

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    <?php
    include '../../config.php';
            echo "<select name='prix' id='prix' onchange='personnel()'>";
            if(isset($_POST["idSecteur"])){
                    for($i=0;$i<sizeof($surface_dispo);$i++)
                    {
                    $prix = $surface_dispo[$i] * constant('PRIX_'.$_POST['idSecteur']);
                    echo '<option value="'.$surface_dispo[$i].'">'.$surface_dispo[$i].' m&sup2;&nbsp;&nbsp;&nbsp;&nbsp;-->
                    &nbsp;&nbsp;&nbsp;&nbsp;Prix: '.$prix.' pk </option>';
                    echo "\n";
                    } 
                    }
                    echo "</select>\n\n";
    ?>
    ajax_personnel.php

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    <?php
    include '../../config.php';
            echo "<select name='nb_personnes' id='nb_personnes'>";
            if(isset($_POST["idPrix"])){
                    for($i=1;$i<=($_POST["idPrix"]*0.8);$i++)
                    {
                    echo '<option value="'.$i.'">'.$i.' employ&eacute;(s)</option>';
                    echo "\n";
                    } 
                    }
                    echo "</select>\n\n".$_POST["idPrix"];
     
    ?>
    Voila merci.

  2. #2
    Membre éprouvé Avatar de julien.63
    Profil pro
    balayeur
    Inscrit en
    Décembre 2005
    Messages
    1 348
    Détails du profil
    Informations personnelles :
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : balayeur

    Informations forums :
    Inscription : Décembre 2005
    Messages : 1 348
    Par défaut
    peut être que tu pourrais essayer de ne pas viser toujours le même élément html
    . Au lieu d'avoir seulement.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('prix').innerHTML = leselect;
    Tu pourrais avoir trois div qui contiennent chacun un select. Et en fonction de l'étape à laquelle tu te trouves tu vises le div approprié (j'espère moi aussi être clair ). ça aura l'avantage de séparé ton code.

  3. #3
    Membre éclairé Avatar de Pahcixam
    Profil pro
    Développeur Web
    Inscrit en
    Avril 2006
    Messages
    289
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2006
    Messages : 289
    Par défaut
    Salut,

    tout d'abord, merci de ta réponse.

    En ce qui concerne les div, j'ai bien deux div pour les selects géré par ajax, le premier étant gérer uniquement par php à l'execution du script.

    Après je sais pas si j'ai compris, mais une étape veut dire un changement de valeur dans le select ? En gros au onchange ?

    Si c'est ça, je pense que c'est déjà ce que j'ai fait mais bon ..

    Pourrais tu donner un exemple ou autre ?

    Merci

  4. #4
    Membre éclairé
    Inscrit en
    Août 2003
    Messages
    49
    Détails du profil
    Informations forums :
    Inscription : Août 2003
    Messages : 49
    Par défaut
    Je pense que ton erreur viens de là:
    echo "<div id='prix' style='display:inline'>
    <select name='prix' id='prix' onchange='personnel()'>";
    Ton id est censé être unique et tu le met à deux endroit...

    ++

  5. #5
    Membre éclairé Avatar de Pahcixam
    Profil pro
    Développeur Web
    Inscrit en
    Avril 2006
    Messages
    289
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2006
    Messages : 289
    Par défaut
    Merci de ta réponse.

    J'ai fait des test et l'erreur dois effectivement ce trouver par la car voici les résultat:

    quand je change les id des div, j'ai tout de suite un select dans le premier select, et quand je change l'id dans le select (donc dans index.php, ajax_personnel.php, et ajax_prix.php, mon 3 ème select n'est plus alimenté.

    Alors as-tu une idée du problème ?

  6. #6
    Membre éclairé
    Inscrit en
    Août 2003
    Messages
    49
    Détails du profil
    Informations forums :
    Inscription : Août 2003
    Messages : 49
    Par défaut
    Ton idée est de changer l'interieur des "select" et non de le refaire entierement...

    - Change le nom de tes div car ce n'est pas eux que tu utilises dans ton javascript.
    - Supprime ces lignes:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    echo "<select name='prix' id='prix' onchange='personnel()'>";
    ...
    echo "</select>\n\n";
    comme ça tu ne renvois que les options.

    --------

    Sinon change le nom des Select mais fait aussi attention à ce que tu met à jour dans ton JS et pas que le PHP.

Discussions similaires

  1. [AJAX] Actualiser plusieurs selects communs ajax
    Par throrin19 dans le forum Général JavaScript
    Réponses: 22
    Dernier message: 13/01/2009, 14h42
  2. php et ajax : actualisation select si retour sur page
    Par pascale86 dans le forum Langage
    Réponses: 4
    Dernier message: 08/02/2008, 20h11
  3. [PHP-JS] PHP + AJAX : Actualisation
    Par poussinphp dans le forum Langage
    Réponses: 4
    Dernier message: 28/07/2006, 10h22
  4. [AJAX] Actualisation d'une page par AJAX
    Par jack_1981 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 30/06/2006, 13h07
  5. [AJAX] actualiser un élément d'une liste
    Par caro_tpl dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 06/06/2006, 19h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo