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

**Daratar** · 03/06/2013, 11h56

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 :

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

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

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

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 :

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

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.

**Periah** · 03/06/2013, 16h29

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

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

**Daratar** · 04/06/2013, 09h24

Bonjour !

Merci de ta réponse !

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

Code :

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

1
2
3
4
$variablePHP = "lol";
<script text="language/javascript>
var a = <?php echo $variablePHP ?>;
</script>

Juste quelques questions :
Cette ligne

Code :

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

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

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

Et pour cette variable

Code :

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

xmlhttp.responseText

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

Dernière question :

Code :

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

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

Invité · 04/06/2013, 09h56

Bonjour,
Sur chaque ligne du tableau :

Code :

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

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 :

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

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

**Daratar** · 04/06/2013, 15h28

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

Code :

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

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

**Daratar** · 04/06/2013, 15h56

Désole du double post mais...
J'ai testé ça :

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

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

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 ?

**andry.aime** · 04/06/2013, 16h55

Bonjour,

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

**Daratar** · 04/06/2013, 17h12

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 :

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

**andry.aime** · 04/06/2013, 17h50

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

**Daratar** · 05/06/2013, 11h13

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

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

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

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

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

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

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

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

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

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

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

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

AJAX

Discussions similaires

Partager

Partager