[AJAX] Débutante Ajax - Action 'onClick'

Version imprimable

Bonjour :D

Dans le cadre d'un stage de fin de DUT je dois modifier une application à l'aide d'Ajax (afin d'éviter tout rechargement de ma page).

Etant toute nouvelle dans l'Ajax, je rencontre quelques difficultés.

Mon problème est le suivant, j'ai fait des petits tests avec une fonction qui affiche un 'message d'alert' sur le clic de mon bouton.
Cette fonction fonctionne parfaitement :D

Mais le "onClick" du bouton doit en réalité lancer deux fonctions écritent en php; une de calcul, et une d'affichage.

- function calcul_TVA_TOTAL(){...}
- function aff_tva(-1,$sens){...}

C'est en fait un simple tableau "+" "-" que je modifie, je cherche à faire en sorte que sur le clic d'un "+" ou d'un "-" les sous-menus s'affichent ou se cachent sans rechargement de la page. Pour certains sous-menus cela ne pose pas de problème mais pour d'autres l'affichage nécessite des calculs préalables.

Comment inserer ses deuxfonctions dans mon code js ? :?

Ci-dessous ma fonction de test :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function go(){ 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){ alert(xhr.responseText); } } xhr.open("GET","page/ajax.php",true); xhr.send(null); }
Merci d'avance pour l'aide que vous pourrez m'apporter ;)

23/04/2008, 12h01
E.Bzz

Bonjour,
il faut que tu lances la fonction de calcul et synchrone

Code:

xhr.open("GET","page/ajax.php",false);

De cette manière, la fonction d'affichage devra attendre la réponse de celle de calcul avant d'être lancée.

Attention par contre, la gestion de la réponse ne se fait pas exactement de la même manière en synchrone et en asynchrone (cf. les tutos)

A+
23/04/2008, 12h06
gwinyam
Salut!

Rien de bien formidable, je pense être en mesure donc de pouvoir t'aider.

Tout d'abord, tu ne peux pas intégrer directement ton code PHP dans Javascript, enfin pas dans cette idée là.

Ce que tu dois faire, c'est réaliser un script php qui appelle tes deux fonctions, que tu stockeras dans un fichier appelé par exemple: tva_ajax.php
Comme ceci par exemple :
Code:

1 2 3 <?php calcul_TVA_TOTAL(); echo aff_tva(-1,$sens);
Je suppose que la fonction aff_tva() renvoie juste la valeur nécessaire à l'affichage.

Ensuite depuis ta page HTML qui affiche le bouton, tu vas tout simplement mettre ceci dans ton bouton:

Code:

<input type="button" onclick="tva();">

Dans une balise SCRIPT tu mets:
Code:

1 2 3 4 5 6 7 8 9 var url = 'tva_ajax.php'; new Ajax.Request(url, { method: 'get', onSuccess: function(tva) { var ladiv = $('divdaffichageTVA'); ladiv.innerHTML = tva.responseText; } });
Ensuite, tu n'as juste qu'à rajouter une balise div avec un attribut id="divdaffichageTVA" là où tu veux que ton résultat s'affiche. Et c'est parti!8-)

EDIT: rah E.Bzz a été plus rapide:aie:
EDIT 2: j'ai oublié de dire qu'il fallait que tu récupères le framework Prototype et que tu la déclares dans ta page:mrgreen:
Tu peux trouver ça ici: http://www.prototypejs.org/
23/04/2008, 12h12
E.Bzz

Citation:

Envoyé par gwinyam

EDIT 2: j'ai oublié de dire qu'il fallait que tu récupères le framework Prototype et que tu la déclares dans ta page:mrgreen:
Tu peux trouver ça ici: http://www.prototypejs.org/

Sauf que pour un DUT, le but est sûrement de le faire soi-même, sans se cacher derrière une librairie ;)

A+
23/04/2008, 12h15
gwinyam

Citation:

Envoyé par E.Bzz

Sauf que pour un DUT, le but est sûrement de le faire soi-même, sans se cacher derrière une librairie ;)

Je suppose qu'effectivement, ça doit jouer, mais je pense que l'utilisation de moyens connus, reconnus et performants peut aussi être valorisante ;)

Après à elle de faire son choix ;)
23/04/2008, 12h25
E.Bzz

Citation:

Envoyé par gwinyam

je pense que l'utilisation de moyens connus, reconnus et performants peut aussi être valorisante ;)

Bien sûr (encore que ça valorise surtout Google et le copié/collé) !

Mais c'est aussi le meilleur moyen pour utiliser Ajax à toute les sauces, sans même en comprendre le fonctionnement (masqué par la librairie).

Enfin bon : effectivement le choix existe :mrgreen:

A+

Merci pour ta réponse !

J'ai bien fait tout ce que tu m'as dis mais en fait, ma fonction aff_tva(-1,$sens){} ne renvoit pas une valeur nécessaire à l'affichage, elle affiche directement, elle remplie mon tableau en fait :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
function aff_tva($h,$sens){
		if($h==-1){
			$t[0] = $this->tva0_total;
			$tx[0] = 1;
			$t[1] = $this->tva21_total;
			$tx[1] = 2;
			$t[2] = $this->tva55_total;
			$tx[2] = 3;
			$t[3] = $this->tva196_total;
			$tx[3] = 4;	
		}
		else{
			$t[0] = $this->tva0[$h];
			$tx[0] = 1;
			$t[1] = $this->tva21[$h];
			$tx[1] = 2;
			$t[2] = $this->tva55[$h];
			$tx[2] = 3;
			$t[3] = $this->tva196[$h];
			$tx[3] = 4;
		}
 
		$temp = '';
		$temp2 = '';
		$longueur = count($t);
		$desordre = true;
		while($desordre){
			$desordre = false;
			for($i=0;$i<($longueur-1);$i++){
				if($sens == 'ASC'){
					if($t[$i]>$t[$i+1]){
						$temp = $t[$i];
						$temp2 = $tx[$i];
						$t[$i] = $t[$i+1];
						$tx[$i] = $tx[$i+1];
						$t[$i+1] = $temp;
						$tx[$i+1] = $temp2;
						$desordre = true;
					}
				}
				else{
					if($t[$i]<$t[$i+1]){
						$temp = $t[$i];
						$temp2 = $tx[$i];
						$t[$i] = $t[$i+1];
						$tx[$i] = $tx[$i+1];
						$t[$i+1] = $temp;
						$tx[$i+1] = $temp2;
						$desordre = true;
					}					
				}
			}
		}		
 
		for($j = 0;$j<$longueur;$j++){			
			if($tx[$j]==1) $this->aff_tva0($h);
			else if($tx[$j]==2) $this->aff_tva21($h);
			else if($tx[$j]==3) $this->aff_tva55($h);
			else if($tx[$j]==4) $this->aff_tva196($h);
		}
	}

Je nage un peu là :roll: mais j'vais bien y'arriver quand même^^

23/04/2008, 13h45
gwinyam

Comprends plus :?
23/04/2008, 13h53
E.Bzz

Citation:

Envoyé par gwinyam

Comprends plus :?

Moi non plus :aie:

@ charlottebardet > quel est le rapport avec Ajax et les enchaînements d'appel, objet de la question initiale ??

A+
23/04/2008, 14h09
charlottebardet

Lol :oops:

Donc, je m'explique :

L'application que je dois modifier fonctionne sur le principe des onglets (onglet1, onglet2, onglet3 ...). A l'intérieur de chacun de ces onglets se situent des petits tableaux "+" "-" présentant différentes gdesParties.

On peut ainsi ouvrir ou fermer gdePartie1, gdePartie2, gdePartie3 ... en cliquant sur les "+" ou les "-".

Pour ce qui est de l'affichage instantané (sans rechargement de toute la page) lorsqu'on clique sur un "+" ou de la disparition lorsqu'on clique sur un "-" je l'ai fait en php à l'aide des display:block; display:none;

Mais à l'intérieur de ses gdesParties se situent également des sousParties que l'on peut également ouvrir ou fermer avec des "+ et "-".

Le problème avec ses sous-parties c'est qu'elles nécessite des calculs avant de pouvoir être affichées.
Mes calculs sont donc réalisés avec la fonction calcul_TVA_TOTAL().

L'affichage se fait ensuite à l'aide de la fonction aff_tva(-1,$sens) que je vous ai mis plus haut.

Ma page est donc forcement rechargée si je clique sur mon "+" !

Mon tuteur m'a donc recommandé d'utiliser Ajax...

Au secours :cry:
23/04/2008, 14h25
gwinyam

Oulà...

Alors attends, je reformule pour voir si j'ai bien compris.

T'as des scripts qui génèrent des contenus d'onglets. Dans les contenus en question, t'as des "sections rétractables/extensibles" dans lesquels il peut y avoir des données à calculer. C'est bien ça?

Et t'as une fonction calcul_TVA_TOTAL() qui réalise les calculs et une fonction aff_tva() qui en affiche les résultats, je suis toujours?

A quoi correspond le code que tu nous a présenté? Parce que pour moi, celui-ci ne fait que du traitement et aucun affichage et pourtant il semble que ce soit la fonction aff_tva() :?

Je me demande si tu n'as pas confondu la notion d'affichage du tableau et celle du formattage des données retournées par calcul_TVA_TOTAL(). Ce qui me semblerait plus logique puisqu'à priori aff_tva() remplit un tableau PHP (ce qui ne fait en RIEN l'affichage). Tableau qui serait ensuite exploiter pour remplir un tableau HTML.

Ah au fait, ça:

Code:

display:block; display:none;

C'est du code CSS que tu contrôles avec du Javascript. Aucun rapport direct avec PHP;)
23/04/2008, 14h30
charlottebardet

Oui c'est bien ça !

En fait la fonction aff_tva() était déjà écrite (je modifie un code déjà existant :?) ! Du coup c'est vrai que je ne me suis pas beaucoup penchée dessus ....

Donc ce que tu m'a expliqué au tout début devrait marcher ?
23/04/2008, 14h51
gwinyam

Je dirais que oui, avec un niveau de certitude à 80%:aie:
23/04/2008, 14h52
charlottebardet

Oki oki
23/04/2008, 14h53
charlottebardet

"Ensuite, tu n'as juste qu'à rajouter une balise div avec un attribut id="divdaffichageTVA" là où tu veux que ton résultat s'affiche. Et c'est parti!"

Je ne comprends pas... là où je veux qu'il s'affiche ? Mais c'est mon tableau qui est sensé se remplir :roll:
23/04/2008, 15h10
gwinyam

C'est la partie qui pique:mrgreen:

Bon il y a un truc que je pige pas en fait dans ta fonction dite "d'affichage", c'est qu'elle ne fait que créer un tableau PHP mais elle n'affiche à priori absolument rien.:?

Tu peux te renseigner auprès de ton supérieur ou de ton responsable sur comment elle était utilisée jusque là?
23/04/2008, 15h15
E.Bzz

Citation:

Envoyé par charlottebardet

Mais c'est mon tableau qui est sensé se remplir :roll:

Tu parles d'un tableau <table>...</table> ou d'un array (structure mémoire) ??
23/04/2008, 15h26
gwinyam

Je crains qu'il y ait de la confusion entre l'utilisation théorique des langages et leur nom chez cette demoiselle... Déjà le cas à propos des propriétés CSS utilisées avec PHP :?

Le problème quand on apprend à se servir de plusieurs langages en même temps et qui interagissent ensemble... :?