11548 sujets

JavaScript, DOM et API Web HTML5

Requête AJAX non affichée sous IE

Bonjour,

je suis actuellement en train de développer une base inventaire pour mon travail.

Je précise que je ne suis pas développeur mais je connais assez bien les languages de programmations WEB.

Je cherche donc à créer un formulaire via des champs select multiples(pour le type d'équipement par exemple) qui active une requête AJAX pointant vers un script PHP interrogeant lui même une base MYSQL le tout venant alimenter le champs select suivant (pour les modèles de chaque type d'équipement par ex)etc jusqu'à créer une requête finale qui sortirait l'ensemble des équipements filtrés via le formulaire.

Jusque là tout va bien, cela marche nikel sous Firefox mais pas pour IE qui me laisse un champs select vide après l'appel de la requête.
J'ai inséré la fonction "alert" pour afficher le contenu de la réponse AJAX qui me renvoit bien le contenu de la requête SQL aussi bien sous IE que sous Firefox.

C'est juste que le contenu de la requête AJAX ne semble pas être pris en compte sur IE.

Je travaille sur IE8 via l'intranet local donc sûrement via le rendu IE7.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Inventaire reseau</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="inventaire.css" />

<script type="text/javascript"> 

	function createInstance()
	{
        var req = null;
		if (window.XMLHttpRequest)
		{
 			req = new XMLHttpRequest();
		} 
		else if (window.ActiveXObject) 
		{
			try {
				req = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e)
			{
				try {
					req = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) 
				{
					alert("XHR not created");
				}
			}
	        }
        return req;
	};

 

        function submitForm(id_source,id_destination,url)
        {

                var req2 =  createInstance();

                var id_source_valeur = document.getElementById(id_source).value;
                var data2 = id_source+"="+id_source_valeur;

                req2.onreadystatechange = function()
                {
                        if(req2.readyState == 4)
                        {
                                if(req2.status == 200)
                                {
					alert(req2.responseText);
                                        storing(req2.responseText,id_destination,id_destination+"2",id_source);
                                }
                                else
                                {
                                        alert("Error: returned status code " + req2.status + " " + req2.statusText);
                                }
                        }
                };

                req2.open("POST",url,true);
                req2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                req2.send(data2);
        }

        function storing(RESULT,id_source,id_destination,origin)
	{


        if(document.getElementById(origin).value == "none")

		{
		document.getElementById(id_destination).style.display="none";
		document.getElementById(id_source).style.display="none";
		}

	else
		{

                document.getElementById(id_destination).style.display="inline";
                document.getElementById(id_destination).style.backgroundColor="#CDE";

		document.getElementById(id_source).innerHTML=RESULT;
		document.getElementById(id_source).style.display="block";
		}
	}

 
 
</script>

</head>
<body>
<div id="global">

	<a name="debut"></a>

	<div id="titre">
		<h1>Inventaire reseau</h1>
		<p class="blanc">Bonjour, bienvenue sur l'outil d'inventaire</p>
	</div>

	<div id="sommaire">
		<p>Selectionner les parametres  : </p>

		<div id="precedent">
			<div id="alf">
			</div>
			<div id="test">




<form id="ajax" method="post" action="requete_finale.php">


	<span class="legend">Nom de machine</span>

	<input type="text" name="hostname" />
	<label for="Nom_de_machine"></label>

	<input type="radio" name="choix" value="active" checked="checked" />
	<label for="">Active</label>

	<input type="radio" name="choix" value="stock" />
	<label for="">Stock</label>

	<br />

	<span id="IP" class="legend">Adresse IP</span>

	<input type="text" name="ip" />
	 
	<span id="usage" class="legend">Usage</span>

	<select id="signature">

		<option value='none'>Indifferent</option>

		<option value=' Core backbone'>Core backbone</option>
 <option value=' Edge device'>Edge device</option>
 <option value=' Routers'>Routers</option>
 <option value=' Encoding module'>Encoding module</option>
 <option value=' Console server'>Console server</option>
 <option value=' Firewall module'>Firewall module</option>

 <option value=' Load balancer'>Load balancer</option>
 <option value=' WAN optimizer'>WAN optimizer</option>
 <option value=' Layer 3-7 Firewall'>Layer 3-7 Firewall</option>

	</select>



	<span id="marque2" class="legend">Marque</span>

	<select id="marque" onchange="submitForm('marque','modele','requeteAJAX.php')">
	
	<option value='none'>Indifferent</option>
	 <option value=' Cisco'>Cisco</option>
 <option value=' Nokia'>Nokia</option>
 <option value=' Juniper'>Juniper</option>
 <option value=' Avocent'>Avocent</option>

 <option value=' Dell Inc.'>Dell Inc.</option>

	</select>


	<span id="modele2" class="legend">Modele</span>
	<select id="modele">
	<span id="modele3"></span>
	</select>

        <span id="pays2" class="legend">Pays</span>
	<select id="pays" onchange="submitForm('pays','site','requeteAJAX2.php')">
	<option value='none'>Indifferent</option>
	</select>

        <span id="site2" class="legend">Site</span>

	<select id="site" onchange="submitForm('site','batiment','requeteAJAX3.php')">
        <span id="site3"></span>
	</select>

        <span id="batiment2" class="legend">Batiment</span>
	<select id="batiment" onchange="submitForm('batiment','local','requeteAJAX4.php')">
        <span id="batiment3"></span>
	</select>

        <span id="local2" class="legend">Local</span>
	<select id="local" onchange="submitForm('local','baie','requeteAJAX5.php')">
        <span id="local3"></span>
	</select>

        <span id="baie2" class="legend">Baie</span>
	<select id="baie">
        <span id="baie3"></span>

	</select>


<input type="submit" name="Submit" value="Envoyer"> 

</form>

</div>
</div>
</div>
</div>
</body>
</html>

Modifié par stylgard (25 Jan 2011 - 12:12)
Bon finalement j'ai résolu mon problème, AJAX n'avait rien à voir la dedans.

C'est juste que le code XHTML généré n'était pas clean.
Sujet clos
Aller à