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