Envoyer une variable dans un div en JS et la récupérer en php

**bakapunch** · 10/06/2015, 17h14

Bonjour.

Je développe actuellement une application web en php/sql.
Je ne suis pas développeur et je n'ai aucune connaissance en JS (mais vraiment aucune), c'est pour cela que je viens chercher de l'aide ici.

Voici mon problème:
Sur une de mes pages j'ai un tableau généré en php d'après ma base de données (une ligne correspond à une entrée).
Chacune de ces lignes correspond en fait à un matériel (oui je fais un catalogue de matériel) et affiche seulement quelques infos.
Je voudrais qu'en cliquant sur un bouton (placé dans chaque ligne du tableau) ça m'affiche sur ma page un div dans lequel j'ai toutes les informations sur ce produit (donc exécuter une requete SQL à partir de l'ID envoyé en Javascript)

Je pourrai me débrouiller en php pour ouvrir une page dans un nouvel onglet (avec l'ID de mon produit envoyé en $_GET) mais je trouve ça moyen.

Plus j'écris et moins j'ai l'impression d'être clair...

En gros je voudrais faire ça:

sur ma page de catalogue:

Code html :

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

1
2
3
<tr>
<td><input type="button" value="ID issu de la bdd" onclick="affiche mon div en envoyant l'ID en paramètre"</td>
</tr>

et dans mon div récupérer l'ID envoyé en paramètre pour lancer ma requête SQL

Je répète que je n'ai aucune connaissance en JS, du coup je voudrais récupérer mon ID en PHP (mais a priori je suis obligé de l'envoyer en JS)
Pourquoi le JS si je n'y connais rien?
Il ne faut pas que ma page soit rechargée car mon tableau est généré à partir d'un formulaire de recherche (je ne veux donc pas réinitialiser le formulaire à chaque fois que je clique sur un bouton "Voir la fiche").

Merci d'avance aux preux chevaliers qui voudront bien monter sur leurs destriers blancs pour venir me sauver !

**Watilin** · 10/06/2015, 19h54

Ton problème est un cas d'école : tu as besoin d'Ajax !

Ajax ça peut faire peur mais en fait c'est très simple : tu as un objet JavaScript (XMLHttpRequest, le nom est barbare mais le concept est simple) qui te permet de faire des requêtes vers le serveur sans recharger la page.

Je vais te présenter les choses simplement en supposant que tu as un navigateur à jour. En effet, les implémentations récentes de XMLHttpRequest offrent des facilités pour le développeur.

D'abord on commence par créer un objet Ajax :

Code :

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

var ajax = new XMLHttpRequest();

Ensuite, on fait chauffer le moteur (c'est un diesel

) en lui donnant la méthode de connexion et l'URL.

Code :

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

ajax.open("GET", "ton-script-serveur.php?id=" + idMateriel);

Il faudra que tu aies un script côté serveur adapté pour répondre à tes requêtes Ajax ; je reviendrai sur ce point.

Avec la méthode GET, tu passes les paramètres dans l'URL, c'est donc à ce moment-là que tu dois les ajouter. Avec POST, tu les passes à la fin, au moment de lancer la requête, mais restons sur GET pour l'instant.
La variable idMateriel, tu devras la récupérer à partir de l'attribut value du bouton.

Les requêtes Ajax sont asynchrones, c'est-à-dire que la page reste interactive et les différents scripts continuent de tourner pendant que la requête part vers le serveur et en attendant que la réponse arrive. Comme tu ne sais pas à l'avance à quel moment exact la réponse va arriver, tu dois utiliser l'évènement onload :

Code :

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

1
2
3
ajax.onload = function() {
  document.getElementById("ton-div").innerHTML = this.responseText;
};

La fonction que tu attaches ainsi n'est pas appelée par toi, mais par le navigateur au moment voulu (c'est ce qu'on appelle une fonction de rappel). Au sein de cette fonction, l'objet ajax est représenté par this, on peut donc utiliser ses différentes propriétés dont responseText que j'ai mis dans mon exemple.

J'utilise innerHTML provisoirement, et j'ai supposé que tu veux afficher les informations dans une <div id="ton-div"> qui existe déjà dans la page. On peaufinera ce point si tu veux.

La dernière étape c'est lancer la requête :

Code :

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

ajax.send();

Comme tu le vois, c'est plutôt simple, il n'y a pas besoin de beaucoup de code. Le seul concept qui peut dérouter au début, c'est la fonction de rappel.

À présent tu as besoin que tes requêtes ajax se lancent quand tu cliques sur un bouton. Par commodité on va créer une fonction, appelons-la requestInfo :

Code :

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

1
2
3
4
5
6
7
8
9
function requestInfo(button) {
  var idMateriel = button.value;
  var ajax = new XMLHttpRequest();
  ajax.open("GET", "ton-script-serveur.php?id=" + idMateriel);
  ajax.onload = function() {
    document.getElementById("ton-div").innerHTML = this.responseText;
  };
  ajax.send();
}

Cette fonction reçoit en paramètre l'objet bouton cliqué, par une sorcellerie que j'explique juste après. Elle récupère l'id du matériel dont on veut les infos, prépare une requête ajax, la lance, et inscrit la réponse du serveur dans la <div>.

La sorcellerie se produit au moment du clic sur un bouton. Quand on choisit de mettre des onclick dans le code HTML comme tu l'as fait, on code sans le savoir dans des conditions un peu particulières, notamment la variable this représente le bouton. On l'utilise donc :

Code html :

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

<input type="button" value="ID issu de la bdd" onclick="requestInfo(this)" />

En quelques sortes, le bouton se passe lui-même en paramètre à la fonction requestInfo.

Avec tout ça tu as des boutons capables de faire des requêtes Ajax. Si tu ouvres la console de ton navigateur (touche F12) et que tu vas sur l'onglet réseau, tu vois tes requêtes et tu vois qu'elles font des 404 car tu n'as pas encore créé le script serveur correspondant. On va s'en occuper maintenant.

Prête attention à la façon dont j'utilise la réponse dans mon script client : j'utilise la propriété responseText, c'est-à-dire en gros « la réponse du serveur au format brut sans aucune transformation », et je l'injecte dans la structure de la page avec innerHTML. Autrement dit, la réponse du serveur sera interprétée comme du code HTML. On peut indiquer le type de la réponse avec un Content-Type :

Code PHP :

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

1
2
<?php
header('Content-Type: text/html; charset=utf-8');

J'en ai profité pour indiquer le charset ; si tu n'utilises pas UTF-8, remplace-le par le tien.

Le serveur ne fait pas la différence entre une requête Ajax et une requête classique ; les paramètres GET se trouvent au même endroit. Tu récupères ton id dans le tableau $_GET. C'est une bonne idée de vérifier que le paramètre a été fourni, et qu'il est du bon type (je suppose un nombre).

Code PHP :

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

1
2
3
4
5
6
7
8
9
10
11
if (!isset($_GET['id'])) {
  echo 'Vous devez indiquer un id.';
  exit;
}
 
if (!is_numeric($_GET['id'])) {
  echo 'L\'id n\'est pas un nombre.';
  exit;
}
 
$id = (int) $_GET['id'];

Ces messages d'erreur sont pour toi, développeur ; un utilisateur de ton site n'est pas censé les voir car il n'est pas censé accéder à la page via une requête non ajax (note que c'est possible). Pour l'instant ces messages donnent des indications techniques pour t'aider à déboguer tes éventuels problèmes, mais dans la version finale de l'application, tu devrais donner le moins d'indications possibles sur la façon dont tu as codé, par mesure de sécurité.

Avec ça tu as toutes les cartes en main, il te reste à faire ta requête SQL avec l'id, et construire le bout de code HTML à renvoyer. Ça va ressembler à ce que tu as déjà fait pour construire ton tableau. Je ne t'aide pas sur cette partie car je n'ai pas assez de détails, et ce n'est pas le sujet de ce topic.

Voilà, je t'ai donné les grandes lignes et quelques outils pour apprivoiser ajax. De manière générale avec JavaScript, ne sous-estime pas la console du navigateur, elle est vraiment puissante et elle t'aidera tous les jours. Si tu as des questions, je surveille ce topic

**bakapunch** · 11/06/2015, 11h40

Waw!
Merci Watilin!
C'est ce que j'appelle un vrai coup de main pour les nuls!

Sur le papier ce que tu me proposes à l'air de correspondre et pas trop compliqué (même si Ajax et JS c'est assez obscur pour moi).

Je vais tester ta solution dès que possible (je développe pour le travail mais c'est loin d'être ma principale mission, je le fais quand j'arrive à me bloquer un créneau de libre).
Tout ça pour dire que j'assaye dès que je peux et je reviens vers toi pour te dire si ça marche bien ou pas (d'après mon expérience de dév rien ne marche jamais du premier coup...)

En tout cas merci et à bientot

**bakapunch** · 16/06/2015, 09h45

Désolé pour le retard mais j'ai pu tester ta solution seulement hier.

Tout marche impec, un grand merci!

J'ai pu écrire mon script php, générer mon formulaire, etc...

Encore merci pour ta réponse, je pense que je vais l'utiliser dans de nombreuses pages de mon catalogue.

Pour aller un peu plus loin j'aurai une autre question:

Si je veux que mon div s'affiche comme une fenêtre popup (genre page alert en JS si je ne me trompe pas), c'est à dire au centre de ma page avec le fond en grisé (reste de la page inactif tant qu'on a pas fermé la fenêtre) je dois le faire en JS ou je peux le faire uniquement avec du CSS?

Sinon pour fermer mon div actuel, si je mets un bouton dans mon div qui appelle la fonction requestInfo() avec un $_GET['id']=0: si je mets les bonnes conditions dans mon script php genre if((isset($_GET['id'])) AND ($_GET['id']>0)) le script ne devrait pas être exécuté et cela équivaudrait à fermer le div non?
Il y a une autre manière plus propre?

**Watilin** · 16/06/2015, 11h33

Envoyé par bakapunch

Si je veux que mon div s'affiche comme une fenêtre popup (genre page alert en JS si je ne me trompe pas), c'est à dire au centre de ma page avec le fond en grisé (reste de la page inactif tant qu'on a pas fermé la fenêtre) je dois le faire en JS ou je peux le faire uniquement avec du CSS?

C'est du JS, car il y a un clic. CSS ne prévoit rien pour gérer les clics.

Sinon pour fermer mon div actuel, si je mets un bouton dans mon div qui appelle la fonction requestInfo() avec un $_GET['id']=0: si je mets les bonnes conditions dans mon script php genre if((isset($_GET['id'])) AND ($_GET['id']>0)) le script ne devrait pas être exécuté et cela équivaudrait à fermer le div non?
Il y a une autre manière plus propre?

Oui, il y a plus propre. Ce n'est pas la peine de faire une requête réseau quand tu n'as pas besoin de données du serveur. Tu peux vider le div, le masquer ou encore le retirer du DOM.
Pour le vider :

Code :

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