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