11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] 2e liste liée dynamique... vide ! Pourquoi ? A l'aide, svp

Bonjour à tous !

Je réalise des listes liées dynamiques.
J'ai un souci, juste après le choix de la 1er boîte déroulante :
La suivante ne se met pas à jour d'elle-même !

Pouvez-vous m'aider ?
D'avance, je vous en remercie.
En pièces jointes les 4 tables sql utilisées.

Voici le code HTML (partie supérieure entre head et /head :

<script type="text/javascript">
<!--
// categorie00
function gocategorie00() {
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'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 à la liste
			document.getElementById('categorie01').innerHTML = leselect;
		}
	}	
	// Ici on va voir comment faire du post
	xhr.open("POST","php/ajaxcategorie01.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat00
	sel = document.getElementById('categorie00');
	idcategorie00 = sel.options[sel.selectedIndex].value;
	xhr.send("parent="+idcategorie00);
}

// categorie01
function gocategorie01() {
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'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 à la liste
			document.getElementById('categorie02').innerHTML = leselect;
		}
	}	
	// Ici on va voir comment faire du post
	xhr.open("POST","php/ajaxcategorie02.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat01
	sel = document.getElementById('categorie01');
	idcategorie01 = sel.options[sel.selectedIndex].value;
	xhr.send("parent="+idcategorie01);
}

// categorie02
function gocategorie02() {
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'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 à la liste
			document.getElementById('categorie03').innerHTML = leselect;
		}
	}	
	// Ici on va voir comment faire du post
	xhr.open("POST","php/ajaxcategorie03.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat01
	sel = document.getElementById('categorie02');
	idcategorie02 = sel.options[sel.selectedIndex].value;
	xhr.send("parent="+idcategorie02);
}

// categorie03
function gocategorie03() {
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'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 à la liste
			document.getElementById('categorie04').innerHTML = leselect;
		}
	}	
	// Ici on va voir comment faire du post
	xhr.open("POST","php/ajaxcategorie04.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat01
	sel = document.getElementById('categorie03');
	idcategorie03 = sel.options[sel.selectedIndex].value;
	xhr.send("parent="+idcategorie03);
}

-->
</script>
</head>


Voici une partie du code HTML entre les balises body et /body :

    <table id="tableoptions" border="0" cellspacing="0" style="vertical-align:middle;">
    	<tr>
        <td width="150"></td>
        <td width="310"></td>
        </tr>
        <tr>
        <td colspan="2" style="padding:7px;" bgcolor="#0E72B5" class="blanc bold">Prix en ligne instantané</td>
        </tr>
        <tr>
        <td colspan="2" style="padding:7px;">
        Afin d'établir un devis,<br>veuillez choisir parmi toutes les options suivantes :</td>
        </tr>
        <tr id="tr00">
        <td style="padding:7px;">Document</td>
        <td style="padding-left:5px;">
        	<select id="categorie00" style="width:280px;" onChange="gocategorie00();">
            <option value="none">Choisissez, svp !</option>
            <?php
				require_once("php/connexionMysql.inc.php");
				$query = mysql_query("SELECT * FROM shop_categorie00 ORDER BY libelle");
				while ($back = mysql_fetch_assoc($query)) {
					echo "\t\t\t\t<option value='".$back['id']."' >".$back['libelle']."</option>\n";		
				}
			?>
            </select>
            <span id="loader00" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr01">
        <td style="padding:7px;">Descriptif</td>
        <td style="padding-left:5px;">
        	<select name="categorie01" style="width:280px;">
                <option value="none">Choisissez, svp !</option>
                <span id="loader01" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
            </select>
        </td>
        </tr>
        <tr id="tr02">
        <td style="padding:7px;">Format</td>
        <td style="padding-left:5px;">
        	<select name="categorie02" style="width:280px;">
                <option value="none">Choisissez, svp !</option>
                <span id="loader02" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
            </select>
        </td>
        </tr>
        <tr id="tr03">
        <td style="padding:7px;">Papier</td>
        <td style="padding-left:5px;">
        	<select name="categorie03" style="width:280px;">
                <option value="none">Choisissez, svp !</option>
                <span id="loader03" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
            </select>
        </td>
        </tr>
        <tr id="tr08">
        <td style="padding:7px;">Prix d'impression</td>
        <td style="padding-left:5px;"><span class="c14 bold"><?php echo $pvht."€ HT"; ?></span><span class="c10"><?php echo "( ".$pvht."€ TTC)"; ?></span></td>
        </tr>
        <tr id="tr09">
        <td style="padding:7px;">&nbsp;</td>
        <td style="padding-left:5px;"><a href="panier.php">Ajouter au panier</a></td>
        </tr>
    </table>



Voici php/ajaxcategorie01.php

<?php
	require_once("php/connexionMysql.inc.php");
	echo "<select name='categorie01' id='categorie01' onchange='gocategorie01()'>";
	if (isset($_REQUEST['idCategorie00'])) {
		$query = mysql_query("SELECT * FROM shop_categorie01".
			" WHERE parent=".$_REQUEST['idCategorie00'].
			" ORDER BY id");
		while ($back = mysql_fetch_assoc($query)) {
			echo "<option value='".$back['id']."'>".$back['libelle']."</option>";	
		}
	} else {
		
	}
	echo "</select>";
?>


Voici php/ajaxcategorie02.php

<?php
	require_once("php/connexionMysql.inc.php");
	echo "<select name='categorie02' id='categorie02' onchange='gocategorie02()'>";
	if (isset($_REQUEST['idCategorie01'])) {
		$query = mysql_query("SELECT * FROM shop_categorie02".
			" WHERE parent=".$_REQUEST['idCategorie01'].
			" ORDER BY id");
		while ($back = mysql_fetch_assoc($query)) {
			echo "<option value='".$back['id']."'>".$back['libelle']."</option>";	
		}
	} else {
		
	}
	echo "</select>";

?>


Voici php/ajaxcategorie03.php

<?php
	require_once("php/connexionMysql.inc.php");
	echo "<select name='categorie03' id='categorie03' onchange='gocategorie03()'>";
	if (isset($_REQUEST['idCategorie02'])) {
		$query = mysql_query("SELECT * FROM shop_categorie03".
			" WHERE parent=".$_REQUEST['idCategorie02'].
			" ORDER BY id");
		while ($back = mysql_fetch_assoc($query)) {
			echo "<option value='".$back['id']."'>".$back['libelle']."</option>";	
		}
	} else {
		
	}
	echo "</select>";

?>

upload/32999-shopcat00.jpg
upload/32999-shopcat01.jpg
upload/32999-shopcat02.jpg
upload/32999-shopcat03.jpg
Modifié par jytest (16 Nov 2011 - 18:59)
Hello,

Je déplace dans le salon JS vu que le noeud du problème a l'air d'être là.

Franchement, pas le temps ou l'envie d'analyser en détail la masse de code que tu nous propose. Tu ne pourrais pas commencer à débuguer un peu par toi-même pour voir où ça coince au juste et, si tu ne comprends pas pourquoi ça coince, nous demander des explications ou des pistes? En l'état j'ai peur que ce sujet ne soit pas très intéressant pour les intervenants potentiels...

Une remarque sur le code JavaScript: tu as 4 fonctions sans paramètres qui ont l'air de faire à peu près la même chose. Il me semble évident que tu devrais factoriser ton code en créant une fonction unique à laquelle tu passes des paramètres.
Sujet clos
Aller à