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

**charlottebardet** · 23/04/2008, 11h49

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** · 23/04/2008, 12h01

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** · 23/04/2008, 12h06

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** · 23/04/2008, 12h12

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

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** · 23/04/2008, 12h15

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

**E.Bzz** · 23/04/2008, 12h25

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

A+

**charlottebardet** · 23/04/2008, 12h37

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** · 23/04/2008, 13h45

Comprends plus

**E.Bzz** · 23/04/2008, 13h53

Envoyé par gwinyam

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** · 23/04/2008, 14h09

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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager