[AJAX] Ins�rer donn�es dans tableau html AJAX/JavaScript

Version imprimable

Bonjour :)

Alors voil�.
J'ai une petite application php qui cr�e et rempli dynamiquement un tableau avec les donn�es de ma base de donn�es.

J'ai des rayons compos�s de familles, compos�es de sous-familles.
J'affiche les donn�es de chaque sous-famille du rayon s�lectionn�, le total de la famille et le total du rayon.

Pour plus de lisibilit� je voudrais ne pas afficher les donn�es des sous-familles car il peut y en avoir beaucoup. J'aimerais que l'utilisateur puisse tout de m�me les voir en cliquant sur un bouton qui afficherais le d�tail.

J'ai plusieurs soucis :
Code:

1 2 3 4 5 6 7 8 var xhr = getXMLHttpRequest(); // On récupère un XHR var saison = encodeURIComponent(""); // Je voudrais mettre un variable PHP ici. var numSFamille = encodeURIComponent(""); // Je voudrais mettre un variable PHP ici. xhr.open("POST", "handlingData.php", true); // On envoie en POST xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("s="+saison+"&sf="+numSFamille);
La j'envoi ma demande au serveur mais je n'arrive pas mettre des variables php ici. Est possible ?

Dans mon fichier handlingData.php j'ai donc ma requ�te � effectuer et l'affichage.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php $saison = (isset($_POST['s'])) ? $_POST['s'] : NULL; $numSFamille = (isset($_POST['sf'])) ? $_POST['sf'] : NULL; if($saison && $numFamille){ $requete = "......"; $stmt = oci_parse($connect, $requete); oci_execute($stmt, OCI_DEFAULT); $res = oci_fetch_array($stmt, OCI_NUM + OCI_RETURN_NULLS); oci_free_statement($stmt); resultats($res); // Ma fonction qui affiche les résultats proprement. } ?>
D'abord je ne suis pas sur qu'il faille faire l'affichage ici.

Ensuite j'aimerais que le r�sultats s'affiche dans la case du tableau associ� au bouton.
En fait sur chaque ligne j'ai une case avec le libell� de la sous-famille et le bouton "d�tails", puis une case avec le libell� des informations, puis une case avec les r�sultats pour la saison N et enfin les r�sultats pour la saison N+1.
Et l� je bloque totalement....... Je ne vois pas comment r�cup�rer les cases adjacentes � mon bouton.
De plus je ne vois pas exactement comment r�cup�rer le r�sultat de ma page handlingData.php.
J'ai essay� de faire quelque chose comme �a :
Code:

1 2 3 4 5 6 7 8 9 10 var xhr = getXMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { // Je voudrais mettre mon resultat dans un case particulière d'un tableau } }; xhr.open("GET", "handlingData.php", true); xhr.send(null);
Mais bon je ne suis pas tout a fait sur.

Je continu de lire pas mal de tutos et forums. Mais si quelqu'un pouvait m'aiguiller je pense pouvoir gagner un peu de temps.

Voil� ! Si �a vous int�resse ^^

Merci de votre aide,

Daratar.

1) tu veux utiliser des variables PHP dans le javascript?

2) tu peux utiliser ce genre de chose pour modifier ta cellule de tableau :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function cliqueBoutonLigne(indiceLigne, indiceColonne) { var chaineParametre = "handlingData.php?indice=" + indiceLigne ; // passage du paramètre de ligne à php pour savoir quoi traiter. xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { // modification de la cellule en ligne "indiceLigne" et en colonne "indiceColonne" avec le résulat de l'ajax. document.getElementById("maTable").rows[indiceLigne].cells[indiceColonne].innerHTML = xmlhttp.responseText ; } } xmlhttp.open("GET", chaineParametre + "&random=" + Math.random(), true); xmlhttp.send(); return true ; }
Et pour que �a fonctionne, il faut que dans ton HTML chaque bouton sur chaque ligne d�clenche un appel � cette fonction avec les bons param�tres et ton php formate proprement le retour au format HTML.

04/06/2013, 09h24
Daratar
Bonjour !

Merci de ta r�ponse !

J'ai trouv� comment pass� du php en variable javascript.
Je vais faire comme �a :
Code:

1 2 3 4 $variablePHP = "lol"; <script text="language/javascript> var a = <?php echo $variablePHP ?>; </script>
Juste quelques questions :
Cette ligne

Code:

var chaineParametre = "handlingData.php?indice=" + indiceLigne ;

C'est pour passer des param�tres en GET c'est �a ?

Et pour cette variable

Code:

xmlhttp.responseText

Je dois r�cup�rer comment ? Grace � la ligne au dessus ?

Derni�re question :

Code:

cliqueBoutonLigne(indiceLigne, indiceColonne)

C'est l� que je passe mes variables php c'est �a ?

En tout cas merci de ton aide !
Je me rend compte que c'est pas si compliqu� que ce que je pensais et que c'est m�me hyper puissant !

PS : D�sol� mais je n'arrive pas � mettre les bonnes balises .
J'ai essay� [code type="php] mais �a ne fonctionne pas. D�sol� pour le manque de lisibilit�.

Bonjour,
Sur chaque ligne du tableau :

Code:

1
2
	<button type="button" onclick="afficheSousFamille('<?php echo $saison; ?>', '<?php echo $numSFamille; ?>')">Détails</button>
	<div id="affSousFam<?php echo $numSFamille; ?>"></div>

Script Ajax :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function afficheSousFamille(saison, numSFamille){
	var xhr = getXMLHttpRequest(); // On récupère un XHR
 
	var saison = encodeURIComponent(saison);
	var numSFamille = encodeURIComponent(numSFamille);
 
	// 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){
		document.getElementById('affSousFam'+numSFamille).innerHTML = xhr.responseText;
	}
 
	xhr.open("POST", "handlingData.php", true); // On envoie en POST
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("s="+saison+"&sf="+numSFamille);
}

=> voir : Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

04/06/2013, 15h28
Daratar

�tant donn� que j'ai 3 case � remplir, est ce que je peux faire un truc du genre :

Code:

<script text="language/javascript" src="monfichier.js">

Avec dans le fichier "monfichier.js" une fonction qui appel 3 fonctions.
Une pour remplir la case avec le libell� des infos, une avec les donn�es de la saison N et enfin une derni�re avec les donn�es de la saison N+1.
???
Et mon bouton ferais un onclic sur cette fonction.

D�sole du double post mais...
J'ai test� �a :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function afficheSousFamille(saison, numSFamille){ afficherLibelles(numSFamille); //afficherSaisonN1(saison, numSFamille); //afficherSaison(saison, numSFamille); } function afficherLibelles(numSFamille){ var xhr = getXMLHttpRequest(); // On récupère un XHR xhr.open("POST", "includes/javascript/libelles.php", true); // On envoie en POST xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(null); // 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){ document.getElementById('lib'+numSFamille).innerHTML = xhr.responseText; } }
Et mon bouton qui affiche le d�tail :

Code:

echo '<button type="button" onclick="afficheSousFamille('.$saison.', '.$numSFamille.')">Détails</button>';

Mais quand je clic sur le bouton rien ne se passe. Aurais-je mal index� mais div ?
En tout cas je n'ai pas d'erreur javascript sur Firefox.

Une id�e ?

04/06/2013, 16h55
andry.aime

Bonjour,

Citation:

xhr.send(null);

Tu n'envoie aucune valeur dans ta requ�te AJAX.
Essaie aussi de contr�ler si le xhr.status n'est pas � 200 ou 0 en cas d'erreur.
Dans la page appeler, essaie de mettre un petit echo dans le cas o� aucune valeur n'est trouv�e dans la base pour le debug.

Sinon, peut-on voir le code HTML g�n�r� de la page appelante?

A+.

Re bonjour !

Je pensais que le xhr.send ne servait qu'a envoyer des param�tre, r je ne r�cup�re que du texte.
Et c'est peut �tre l� mon soucis, le format de mon texte.
Dans mon fichier libelle.php il y a :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?php
        echo '<ul>';
                echo '<li>Quantité commandée</li>';
                echo '<li>Quantité reçue</li>';
                echo '<li>Chiffre d\'affaire potentiel</li>';
                echo '<li>Valeur du prix de revient</li>';
                echo '<li>Prix de revient unitaire</li>';
                echo '<li>Prix de vente unitaire</li>';
                echo '<li>Nombre de références</li>';
                echo '<li>Quantité vendue</li>';
                echo '<li>Coefficient de réalisation</li>';
                echo '<li>Marge</li>';
                echo '<li>Taux de marge</li>';
                echo '<li>Coefficient de marge</li>';
        echo '</ul>';
 
?>

Je test le code 0, ect pour le debug. En attendant merci de ton aide :)

04/06/2013, 17h50
andry.aime

Citation:

Envoy� par Daratar

Je pensais que le xhr.send ne servait qu'a envoyer des param�tre, r je ne r�cup�re que du texte.
Et c'est peut �tre l� mon soucis, le format de mon texte.

Oui, il sert � envoyer des variables post, mais toi tu n'envoies rien (null). Prend en consid�ration les autres remarques.

A+.

Bonjour � tous !

La nuit porte conseil ! J'ai r�solu mon probl�me ! (Enfin VOUS l'avez r�solu ^^")

Je viens quand m�me faire un r�capitulatif ici au cas ou quelqu'un en aurait besoins :

Alors pour commencer j'ai donn� des nom uniques � mes "div" pour pouvoir les identifier.

Code:

1
2
3
4
5
6
echo '<div id="'.$numSFamille.'">';
echo '</div>';
echo '<div id="'.$saisonAnterieur.''.$numSFamille.'">';
echo '</div>';
echo '<div id="'.$saison.''.$numSFamille.'">';
echo '</div>';

Ensuite j'ai ajout� mon bouton "D�tails" au d�but de la ligne.

Code:

echo '<input type="button" value="Détails" onclick="afficheSousFamille('.$saison.', '.$numSFamille.')"/>';

Vient ensuite la partie javascript/AJAX.
Le code de ma fonction getXMLHttpRequest() :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function getXMLHttpRequest() {
	var xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
 
	return xhr;
}

Puis le code de ma fonction afficheSousFamille(saison, numSFamille) et des fonctions qu'elle appelle :

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
function afficheSousFamille(saison, numSFamille){
	afficherLibelles(numSFamille);
	afficherSaisonN1(saison, numSFamille);
	afficherSaison(saison, numSFamille);
}
 
function afficherLibelles(numSFamille){
	var xhr = getXMLHttpRequest(); // On récupère un XHR
 
	xhr.open("POST", "includes/javascript/libelle.php", false); // On envoie en POST
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send();
 
	// 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){
		document.getElementById(numSFamille).innerHTML = xhr.responseText;
	}
}
 
function afficherSaisonN1(saison, numSFamille){
	var xhr = getXMLHttpRequest(); // On récupère un XHR
 
	var saison = encodeURIComponent(saison-2);
	var numSFamille = encodeURIComponent(numSFamille);	
 
	xhr.open("POST", "includes/javascript/handlingData.php", false); // On envoie en POST
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("s="+saison+"&sf="+numSFamille);
 
	// 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){
		document.getElementById(saison+''+numSFamille).innerHTML = xhr.responseText;
	}
}
 
function afficherSaison(saison, numSFamille){
	var xhr = getXMLHttpRequest(); // On récupère un XHR
 
	var saison = encodeURIComponent(saison);
	var numSFamille = encodeURIComponent(numSFamille);
 
	xhr.open("POST", "includes/javascript/handlingData.php", false); // On envoie en POST
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("s="+saison+"&sf="+numSFamille);
 
	// 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){
		document.getElementById(saison+''+numSFamille).innerHTML = xhr.responseText;
	}
}

Vous remarquerez que j'ai ouvert mes xhr avec l'attribut false. En effet en mode asynchrone je n'arrivais pas � obtenir de r�sultats. Pour moi �a marche puisque mes requ�tes sont l�g�res. Si c'est trop lourd faites attention.

Et enfin le contenue de mes fichiers "handlingData.php" et "libelle.php" qui me renvoient ce que je eux afficher dans les cases :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
//handlingData.php
$saison = (isset($_POST['s'])) ? $_POST['s'] : NULL; // Les paramètres sont en post.
$numSFamille = (isset($_POST['sf'])) ? $_POST['sf'] : NULL;
if($saison && $numSFamille){
include("../connexion.php");
$connect = connexion();
if($connect){
	$requete = "......."; //Je vous montre pas les infos de la bases àa sert a rien :p
	$stmt = oci_parse($connect, $requete);
	oci_execute($stmt, OCI_DEFAULT);
 
	$res = oci_fetch_array($stmt, OCI_NUM + OCI_RETURN_NULLS);
	oci_close($connect);
}
resultats($res); // Une fonction à moi qui fait un affichage propre.
?>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- libelle.php-->
<ul>
	<li>Quantité commandée</li>
	<li>Quantité reçue</li>
	<li>Chiffre d'affaire potentiel</li>
	<li>Valeur du prix de revient</li>
	<li>Prix de revient unitaire</li>
	<li>Prix de vente unitaire</li>
	<li>Nombre de références</li>
	<li>Quantité vendue</li>
	<li>Coefficient de réalisation</li>
	<li>Marge</li>
	<li>Taux de marge</li>
	<li>Coefficient de marge</li>
</ul>

Et voil� ! Tout marche !
Je tiens � remercier :
andry.aime
jreaux62
Periah
pour l'aide qu'il m'ont apport�.
Merci � eux :)

Je met le sujet en r�solu puisque �a marche :)