[Résolu] AJax et liste liées par marcassin - page 1

Bonsoir, je suis en train de faire un site comme ça pour m'entrainer, et je voudrais juste mettre des listes liées. J'ai bien suivis le tutoriel AJAX qu'il y a sur le site, et j'ai repris l'exemple qu'il y avait, puisque l'exemple est ce que je veux faire. Le soucis est que chez moi ça ne marche pas, et je suis dessus depuis 2 jours. je bloque et je n'avance pas du tout, et je ne trouve pas mon erreur ...
Peut être que vous elle vous sautera aux yeux, mais bon, comme je commence à peine le javascript et l'AJAX, c'est peut être pour ça

Pour infos, ce script est juste une liste déroulante de pays, qui une fois qu'on en a choisis un, une une autre liste est crée avec plein de région correspondant à ce pays.

Voici mon code :

Mon fichier liste.php

<script type="text/javascript" src="oXHR.js"></script>
       <script type="text/javascript">
<!-- 
function selectpays(oElem)
 {
 
        var xhr = getXMLHttpRequest();
        var value =  oElem.options[oElem.selectedIndex].value;
        if(value != "none") {
                if(xhr && xhr.readyState != 0) {
                        xhr.abort(); 
                }
				xhr.open("POST", "js_shearch.php", true); 
                xhr.onreadystatechange = function() { 
                        if(xhr.readyState == 4 ) {
                                makeList(xhr.responseXML);
                                document.getElementById("loading").innerHTML = "";
                        } else if(xhr.readyState == 2 || xhr.readyState == 3) {
                                document.getElementById("loading").innerHTML = "<p>Chargement en cours</p>";
                        }
                }
 
                // xhr.open("POST", "js_shearch.php", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send('pays=' + value);
        }
 
}
 
function makeList(oData) {
        var oOptions = oData.getElementsByTagName("option");
        var oSelect  = document.getElementById("regionSelect");
        
        oSelect.innerHTML = "";
        for(var i=0,c=oOptions.length;i<c;i++) {
                var oOption = document.createElement("option");
                oOption.value = oOptions[i].getAttribute("value");
                oSelect.appendChild(oOption);
                oOption.innerHTML = oOptions[i].firstChild.nodeValue;
        }
}
//-->
</script>

   </head>
    
   <body>


<div id="choix_filtre">
                <div id="loading"></div>
                <div id="pays">
                        <select id="paysSelect" onchange="selectpays(this);">
                                <option value="none">sélection du pays</option>
                                <?php
                                        
                                        $query = mysql_query("SELECT * FROM pays ORDER BY id");
                                        while($back = mysql_fetch_array($query))
										{
                                                echo "<option value=" . $back['nom'] . ">" .$back['nom']. "</option>";
                                        }
                                ?> 
                        </select>
                </div>
                <div id="region">
                        <select id="regionSelect"></select>
                </div>
        </div>

// Reste du body

mon fichier js_shearch.php :

<?php 
                
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>";
echo "<select>";
 
if(isset($_POST['pays']) && $_POST['pays'] != "") {
        $pays = htmlentities($_POST['pays']);
        include("config.php"); // connectio à mysql
        $query = mysql_query("SELECT * FROM region WHERE pays=". $pays ." ORDER BY id") or die(mysql_error());
        while($back = mysql_fetch_assoc($query)) {
                echo "<option value=\"".$back['nom']."\">".$back['nom']."</option>\n";
        }
}

 
echo "</select>";
 
?>

et mon fichier oXHR.js, où j'ai rien touché, un bête copier/coller :

function getXMLHttpRequest() 
{
        var xhr = null;
 
        if(window.XMLHttpRequest || window.ActiveXObject) 
		{
                if(window.ActiveXObject) 
				{
                        try {
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                } 
				else 
				{
                        xhr = new XMLHttpRequest();
                }
        } 
		else 
		{
                alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
                return null;
        }
 
        return xhr;
}

Merci d'avance si vous trouvez !!

marcassin

24 février 2009 à 0:49:56

Tillertan

24 février 2009 à 19:40:45

Tu n'as pas fais comme sur le tuto.

Tuto:

oOption = document.createElement("option");
		oInner  = document.createTextNode(nodes[i].getAttribute("name"));
		oOption.value = nodes[i].getAttribute("id");
		
		oOption.appendChild(oInner);
		oSelect.appendChild(oOption);

Toi:

var oOption = document.createElement("option");
                oOption.value = oOptions[i].getAttribute("value");
                oSelect.appendChild(oOption);
                oOption.innerHTML = oOptions[i].firstChild.nodeValue;

A chaque boucle, tu fais "innerHTML =", donc le contenu est à chaque fois effacé et non ajouté.

24 février 2009 à 21:35:14

C'est bon, j'ai compris l'erreur effectivement j'ai du mal recopier le tuto ou alors j'ai fait autre chose. Enfin bon, merci beaucoup à toi, j'ai compris mon erreur, et en plus j'ai remarqué d'autres erreurs sur le code

Merci encore

AJax et liste liées

AJax et liste liées

Supprimer

Modérer

Signaler le message aux modérateurs