Discussion :

[dam28800]

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 !

[Bovino]

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

[dam28800]

Merci,

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

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

Code :

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

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

Avec mon code ajax dans le haut :

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
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);
			}

[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 !

[Bovino]

Code :

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

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

Pour inhiber l'action du href.

[dam28800]

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 :

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
 
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.

[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.

[dam28800]

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 :

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

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

Et ma fonction Go2() :

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
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 !

[Bovino]

Tu as pensé à faire ça :

Code :

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

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

?

[dam28800]

Oui monsieur.

Mais rien n'y fait.

[Bovino]

// 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 ?

[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.

[Bovino]

Code :

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

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

[dam28800]

Oki oki,

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

Page PHP :
Fonction Ajax :

Code :

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

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

Code HTML :

Code :

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

<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 :

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

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.

[Bovino]

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

[Bovino]

Code :

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

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 :

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
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);
}

[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 !