[AJAX] Changer critere de recherche d'une requete

Version imprimable

14/01/2009, 16h30
dam28800

[AJAX] Changer critere de recherche d'une requete

Bonjour à tous,

Je vous explique mon problème :

Actuellement j'ai un tableau qui me compte les commandes pour l'année 2008.
Avec des flèches sous forme d'image, j'ai fait un lien sur la même page.
Par la méthode GET j'ajoute à l'année plus ou moins 1.
Cela me permet de naviguer entre les années sans passer par un formulaire.

Le problème c'est que ma page se recharge à chaque fois.

Est il possible de passer par de l'Ajax pour solutionner ce problème, c'est à dire changer mon critère de recherche de ma requête (c'est à dire la variable année) en cliquant sur la flèche sans recharger ma page ?

Merci d'avance de votre aide !
14/01/2009, 17h10
Bovino

Normalement oui, les paramètres que tu envoies lors d'une requête sont créés au moment de l'envoi...

Merci,

Alors j'ai commencé mais bon je suis un peu bloqué...

Sur ma page PHP j'ai mis un lien de test :

Code:

<a href="vente.php?vente=y" onclick="go2()">test</a>

Avec mon code ajax dans le haut :

Code:

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
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;
			}
 
 
 
			function go2(){
				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('sous_famille').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("GET","ajax_famille.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('vente');
				vente = sel.options[sel.selectedIndex].value;
				xhr.send("vente="+vente);
			}

14/01/2009, 17h39
dam28800

Oups le message est parti trop vite...

Je disais donc que j'essay d'adapter ce code mais dans mon code ajax je ne vois pas comment m'y prendre avec ma fonction go2()

Si quelqu'un à un début de solution ?

Merci d'avance !
14/01/2009, 18h10
Bovino

Code:

<a href="vente.php?vente=y" onclick="go2();return false">test</a>

Pour inhiber l'action du href.

Ok, je vais essayer merci de ton aide.

En revanche ma fonction go2() te semble t'elle correcte car je ne comprend pas certaine ligne :

Code:

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
 
function go2(){
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;
 
// A partir de la je pense qu'il faut changer des choses mais je ne vois pas quoi ?
// En effet c'est le script d'une liste liée en menu deroulant
 
document.getElementById('sous_famille').innerHTML = leselect;
					}
				}
 
// Ici on va voir comment faire du post
xhr.open("GET","ajax_famille.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('vente');
vente = sel.options[sel.selectedIndex].value;
xhr.send("vente="+vente);
}

Merci d'avance de ton aide.

15/01/2009, 11h05
DoubleU

Dans ta fonction go2, tu utilises les méthodes de traitement qui correspondent à une requete en POST (le header "application/x-www-form-urlencoded", le xhr.send) mais pourtant dans ton open tu déclares ta requete en GET.

Essaie de la passer en POST et dis nous ce que ca donne, le code me semblant correct à part ca.

Ben en fait ça ne donne rien...
Quand je clique sur mon lien je souhaiterais faire apparaitre un texte (dans un premier temps ensuite je ferai ma requête) et il n'apparaît pas.

Voilà ce que j'ai mis dans la page ajax_famille.php :

Code:

1
2
3
 
if(isset($_POST["vente"]))
{ echo 'test'; }

Et ma fonction Go2() :

Code:

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
function go2(){
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;
 
// A partir de la je pense qu'il faut changer des choses mais je ne vois pas quoi ?
// En effet c'est le script d'une liste liée en menu deroulant
 
document.getElementById('sous_famille').innerHTML = leselect;
					}
				}
 
// Ici on va voir comment faire du post
xhr.open("POST","ajax_famille.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('vente');
vente = sel.options[sel.selectedIndex].value;
xhr.send("vente="+vente);
}

Mais je pense qu'elle est beaucoup trop longue pour simplement faire ce que je veux non ?

Merci de votre aide !

15/01/2009, 14h29
Bovino

Tu as pensé à faire ça :

Citation:

Code:

<a href="vente.php?vente=y" onclick="go2();return false">test</a>

?
15/01/2009, 14h32
dam28800

Oui monsieur.

Mais rien n'y fait.
15/01/2009, 15h00
Bovino

Citation:

// A partir de la je pense qu'il faut changer des choses mais je ne vois pas quoi ?
// En effet c'est le script d'une liste liée en menu deroulant

Ah... j'avais pas lu les commentaires... Tu n'as pas de select ?
15/01/2009, 15h05
dam28800

Exact !

En fait j'ai juste un lien a href.
Dès que je clique sur ce lien, je souhaite sans recharger ma page, faire appel à ma page ajax_famille en lui disant d'afficher test.

Après dans un second temps j'aurai deux lien qui me permettront de jongler entre les années et donc de modifier l'année dans ma page ajax_famille qui changera le résultat de ma requête.

Actuellement je le fait par un GET cela fonctionne mais bon je pense que cela serait mieux avec un petit script ajax, mais comme je suis pas bien doué...

Merci d'avance de ton aide.

Code:

1
2
vente = new Date();
xhr.send("vente="+vente);

15/01/2009, 15h18
dam28800
Oki oki,

Alors je viens de tester et au niveau de mon code ça donne :

Page PHP :
Fonction Ajax :
Code:

1 2 3 4 5 6 function go2() { vente = new Date(); xhr.send("vente="+vente); }
Code HTML :

Code:

<a href="vente.php?vente=y" onclick="go2();return false">Quand je clique Hi ! dois apparaître</a>

Et ensuite dans ma page Ajax :
Code:

1 2 3 4 5 if(isset($_POST["vente"])) { echo 'Hi !'; }
Bon autant dire que quand je clique rien ne se passe...
Je ne suis pas obligé de mettre le ?vente=y dans mon lien ?
Vu que quand je clique il doit faire appel à la fonction go2() ?
C'est sur cette dernière que je patoge...

Merci de ton aide.
15/01/2009, 15h30
Bovino

Si, il vaut mieux, cela peut servir d'alternative si JavaScript (et donc Ajax) est désactivé !

Code:

1
2
3
4
5
function go2()
{
vente = new Date();
xhr.send("vente="+vente);
}

Non, le morceau de code que je t'ai donné, c'est juste pour remplacer les dernières lignes de ta fonction, pas toute la fonction !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function go2(){
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;
 
// A partir de la je pense qu'il faut changer des choses mais je ne vois pas quoi ?
// En effet c'est le script d'une liste liée en menu deroulant
 
document.getElementById('sous_famille').innerHTML = leselect;
					}
				}
 
// Ici on va voir comment faire du post
xhr.open("POST","ajax_famille.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
vente = new Date();
xhr.send("vente="+vente);
}

15/01/2009, 15h34
dam28800

Ok bon ben je vais regarder ce qui ne va pas dans ma fonction go2().

Si entre temps quelqu'un à une idée ?

Merci d'avance !