Discussion :

[Bhaalrock]

Bonjour,

J'ai une application qui appelle différentes pages au clic d'un bouton (onclick) avec la méthode ajax et fonctionne parfaitement bien avec tous les navigateurs excepté internet explorer!
Ce qui est spécial c'est qu'une fois hébergée, l'application fonctionne parfaitement bien sur mon poste avec IE (version IE9), mais ça ne passe pas sur les postes des collègues! (version IE9 et IE10).
J'ai lu différents forum à ce sujet et il est conseillé d'ajouter : header("Cache-Control: no-cache"); au début de chaque page.php appelée par ajax. Mais malheureusement cela ne fonctionne toujours pas.
Si quelqu'un a une idée sur le sujet.

Voici mon script :

Code javascript :

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/**
* Méthode pour sauvegarder les variables et les envoyer à la fonction goOutils()
*/
function fill_input_cache(id, val){
	document.getElementById(id).value = val;
	// alert(id + ' -> ' + val); // pour TEST !
	// on lance la fonction goOutils()
	goOutils();
}
/**
* Méthode qui permet l'utilisation du script sur les différents navigateurs
*/
function getXhr(){
	var xhr = null; 
	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; 
	} 
	return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton au choix 1 (modifie le contenu du choix 2)
*/
function goMateriaux(id_famille){
	var xhr = 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('materiaux').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxMateriaux.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Envoyer
	xhr.send("id_famille="+id_famille);
}
/**
* Méthode qui sera appelée sur le click du bouton au choix 1 (Modifie le contenu du choix 3)
*/
function goCharacter(id_famille){
	var xhr = 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('character').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxCharacter.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Envoyer
	xhr.send("id_famille="+id_famille);
}
/**
* Méthode qui sera appelée sur le click du bouton aux choix 1, 2 et 3 (Requête finale)
*/
function goOutils(){ 
	var xhr = getXhr();
	var id_famille = document.getElementById('choix_id_famille').value;
	var id_matiere = document.getElementById('choix_id_matiere').value;
	var id_tc_simple = document.getElementById('choix_id_tc_simple').value;
	var id_tc_multi = document.getElementById('choix_id_tc_multi').value;
	var nb_levres = document.getElementById('choix_nb_levres').value;
	// alert('id_famille = ' + id_famille + ', id_matiere = ' + id_matiere + ', id_tc_simple = ' + id_tc_simple + ', id_tc_multi = ' + id_tc_multi + ', nb_levres = ' + nb_levres);
	// 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('outils').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxOutils.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Envoyer
	xhr.send("id_famille="+id_famille+"&id_matiere="+id_matiere+"&id_tc_simple="+id_tc_simple+"&id_tc_multi="+id_tc_multi+"&nb_levres="+nb_levres);
}

Merci de votre aide

Cordialement

[Bhaalrock]

Voici le script php de la première page.php appelée si ça peut aider :

Code php :

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
<?php
header("Cache-Control: no-cache");
 
	echo "<p name='materiaux'>";
	if(isset($_POST["id_famille"]))
	{
	// Déclaration des paramètres de connexion
$host = "localhost";
$user = "root";
$bdd = "projet";
$passwd = "";
 
 // On se connecte à MySQL
			mysql_connect($host, $user, $passwd) or die ("erreur de connexion au serveur");
			mysql_select_db($bdd) or die ("erreur de connexion à la base de données");
 
	 // On récupère tout le contenu de la table materiaux
$query = mysql_query("SELECT materiaux.*
					FROM materiaux, famille_outils, jointure_famille_materiaux
					WHERE materiaux.id_matiere = jointure_famille_materiaux.id_matiere
					AND famille_outils.id_famille = jointure_famille_materiaux.id_famille
					AND famille_outils.id_famille = ".$_POST["id_famille"]." ");
 
		while($donnees = mysql_fetch_assoc($query))
		{
?> 				
			<ul class="thumbnails">
			<li>
			<center><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
				<?php
				echo "<button class='material_button btn' onclick='fill_input_cache(\"choix_id_matiere\", this.value); visibleReturn(\"return2\")' value='".$donnees["id_matiere"]."'><img src=".$donnees["repere_matiere"]." title= '".$donnees["info_matiere"]."'<br/><br/>".$donnees["nom_matiere"]."</button>";
				$val = "".$donnees["info_matiere"]."";
				?>
			</a>
			<a class="infobulle">
			<img src='images/icone-inter.jpg' id='infobulle' <?php echo "title= '".$donnees["info_matiere"]."' onclick='test(\"info\")' value='".$donnees["id_matiere"]."' "; ?>></img>
			</a>
			</li>
<?php
		}
	}
	echo "</p>";
?>
			</ul>