Discussion :

[charlottebardet]

Bonjour

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

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 :

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

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

[E.Bzz]

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

Code :

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

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+

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

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

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

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

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

Dans une balise SCRIPT tu mets:

Code javascript :

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

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!

EDIT: rah E.Bzz a été plus rapide
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
Tu peux trouver ça ici: http://www.prototypejs.org/

[E.Bzz]

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

[gwinyam]

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

[E.Bzz]

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

A+

[charlottebardet]

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 :

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
 
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à mais j'vais bien y'arriver quand même^^

[gwinyam]

Comprends plus

[E.Bzz]

Comprends plus

Moi non plus

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

A+

[charlottebardet]

Lol

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

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

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

display:block; display:none;

C'est du code CSS que tu contrôles avec du Javascript. Aucun rapport direct avec PHP

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

[gwinyam]

Je dirais que oui, avec un niveau de certitude à 80%

[charlottebardet]

Oki oki

[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

[gwinyam]

C'est la partie qui pique

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

[E.Bzz]

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

Tu parles d'un tableau <table>...</table> ou d'un array (structure mémoire) ??

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