Discussion :

[toto62]

bonjour , le titre est explicite...
j'ai créé un formulaire , qui permet une recherche dans un base de donnée MySQL.mais cette recherche peut être longue je voulais donc afficher un sablier pour faire attendre le visiteur...mais mon code fonctionne sous Mozilla mais pas sous IE ou google chrome.

html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
        <form method="get" id="rech" action="recherche.php" onsubmit="return afficher();" >
        <input type="submit" value="rechercher" onclick="pac()" />
	</form>

javascript

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
 
function afficher()
{
	var div = document.getElementById("resultat");
	var form = document.getElementById("rech").elements;
	var txtCheck = "";
 
	if(form.enLigne.checked)
		txtCheck += "&enLigne=on";
	if(form.avecPhoto.checked)
		txtCheck +="&avecPhoto=on";
	if(form.ageCroisant.checked)
		txtCheck +="&ageCroisant=on";
 
 
	var contenu = file("../scriptPHP/scriptRecherche.php?lieu="+form.lieu.value+"&ageMin="+form.ageMin.value+"&ageMax="+form.ageMax.value+txtCheck+"&tailleMin="+form.tailleMin.value+"&tailleMax="+form.tailleMax.value);
	div.innerHTML = contenu;
 
	return false;
}
function pac()
{
	var div = document.getElementById("att");
 
	div.style.display = "block";
 
}
function file(fichier)
{
    if(window.XMLHttpRequest) // FIREFOX
        xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // IE
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    else
        return false ;
 
    xhr_object.open("GET", fichier, false);
    xhr_object.send(null);
 
	if(xhr_object.readyState == 4) 
		return xhr_object.responseText ;
     else 
		return false ;
}

merci.

[hornetbzz]

Pas certain que la création de ton objet soit fonctionnelle pour IE :

Essaies plutôt avec ce principe qui fonctionne avec FF et IE (j'ai pas testé ss Opera) à à adapter pour ta fonction "function file(fichier)" (que je découperai en 2 fonctions distinctes au passage (1 pour créer l'objet xhr, l'autre pour jouer avec ton objet) :

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
function getXMLHttpRequest() {
	var xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");		// IE
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest();  						// FireFox
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest..."); // Les vieux navigateurs
		return null;
	}
 
	return xhr;
}

[RomainVALERI]

Pour ton histoire de tempo, essaie quelque chose dans ce style :

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
function afficher()
{
	var div = document.getElementById("resultat");
	var form = document.getElementById("rech").elements;
	var txtCheck = "";
	
	if(form.enLigne.checked)
		txtCheck += "&enLigne=on";
	if(form.avecPhoto.checked)
		txtCheck +="&avecPhoto=on";
	if(form.ageCroisant.checked)
		txtCheck +="&ageCroisant=on";
	
        document.getElementById("IdDeTonImageDeSablier").style.display = "";
	var contenu = file("../scriptPHP/scriptRecherche.php?lieu="+form.lieu.value+"&ageMin="+form.ageMin.value+"&ageMax="+form.ageMax.value+txtCheck+"&tailleMin="+form.tailleMin.value+"&tailleMax="+form.tailleMax.value);
	div.innerHTML = contenu;
        document.getElementById("IdDeTonImageDeSablier").style.display = "none";
	
	return false;
}
function pac()
{
	var div = document.getElementById("att");
	
	div.style.display = "block";
	
}
function file(fichier)
{
    if(window.XMLHttpRequest) // FIREFOX
        xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // IE
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    else
        return false ;
		
    xhr_object.open("GET", fichier, false);
    xhr_object.send(null);
    
	if(xhr_object.readyState == 4) 
		return xhr_object.responseText ;
     else 
		return false ;
}

...en ayant pris soin de placer l'image du sablier (éventuellement animée) dans ta page, avec l'ID qui va bien, et un style display none par défaut en css ^^

edit : voir msg plus bas, cette implémentation ne fonctionnerait qu'avec un appel ajax synchrone (3eme param de la fonction open positionné à true)

[toto62]

merci de vos réponse mais j'arrive toujours au même résultat...
en faite j'ai l'impression que tant que l'on ne sort pas de la fonction afficher la page n'est pas modifier sous IE et google chrome donc mon sablier ne s'affiche pas...est-ce possible?

[RomainVALERI]

Heu...attends je te raconte des c*** ...des bêtises. ^^

De la manière dont je t'ai parlé, ça ne marcherait qu'avec une requête synchrone : ici ça ne conviendrait pas.
Non, il faut que le style.display = none soit placé dans le code exécuté au retour de l'appel ajax (donc dans ta fonction onreadystatechange), sinon il est exécuté immédiatement, quoi qu'il advienne de l'appel par la suite.

[hornetbzz]

Je te donne un exemple qui devrait t'aider :

Au global il faut :

- une fonction qui te créé ton objet XMLhttp : c'est la fonction que je t'ai mise plus haut (getXMLHttpRequest)

- un écouteur d'évènement qui va associer la génération de ta requête à un évènement sur ta page, par exemple sur un clic effectué sur un <div> de ta page: Regardes la doc. En résumé, il faut créer un <div> dans ta page html, et dans ton code js, affecter un évènement sur ce <div>.

- ton appel de requête xhr déclenché par un évènement sur ta page (à prédéfinir) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

XHRrequest(ShowRequestResult, CommandToPost(command), globale_js1, true , i , false, 0, '') ;

- ton sablier (non affiché) dans ta page html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
	<!-- LOADER -->
	<span id="loader" style="display:none;"><img src="../images/ajax-loader.gif" alt="loading" /></span>

- une fonction qui génère la requête et qui gère le status de retour.
Par exemple :

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
function XHRrequest(callback, formatted_command, treatment_file, xhr_Async_mode, num_id, pop, duree_pop_sec, pop_url) {

	// Init
		var debug = true;

	// Envoi des infos à la page de traitement php (methode POST)
		var xhr 	= getXMLHttpRequest();
		var sMethod	= "POST";
		var sUrl	= treatment_file;
		var bAsync	= (xhr_Async_mode === undefined)? true : xhr_Async_mode ;
	
	xhr.onreadystatechange = function() {
			if (xhr.readyState < 4) {
				document.getElementById("loader").style.display = "inline";  // C'est ça l'appel à ton sablier, tu le fais apparaitre ici et tu le fais disparaitre plus loin si ta requete a abouti
				if (pop) {
					duree_pop_sec = duree_pop_sec * 1000;
					PopUp('http://www.tondomaine.fr/ta_directory_pop_up/'+ pop_url, 'open', 'test', '400', '250', 'left', 'center', duree_pop_sec, false);
				}
			 }
			if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
				document.getElementById("loader").style.display = "none"; // C'est ça l'appel à ton sablier, pour le fermer quand le retour est Ok
				if (formatted_command != false) {
					callback(xhr.responseText, num_id);
				}
		}
	};
	
	// Envoyer la requete par la methode POST
		if (sUrl && formatted_command != false) {
			xhr.open( sMethod, sUrl , bAsync );
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			xhr.send(formatted_command);
		}
		else{
			if (debug) alert('no treatment request sent :' + sUrl + ', ' + formatted_command);
		}
}

- Une fonction de callback qui sera appelée au retour de ta requête ajax

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function ShowRequestResult(oText, id_number ) {
// 1ere fonction de callback de XHRrequest()
 
	if (oText == "Ok") { // c'est ce qui est renvoyé par ton serveur
	... tu changes tes affichages par exemple
	}
	else {
         ... tu préviens ton client qu'il y a un problème
	}
}

Même un mega noob comme moi y est arrivé: si tu procèdes par étape en comprenant bien qui fait quoi (client-serveur), ça va le faire .

[toto62]

je doit être un peu débile car je ne comprend pas...