Forum d'entraide PHPFrance

La question étonne peut-être... Je fais une page avec des liens (<a href...) avec la possibilité d'aller chercher des informations annexes dans une base MySQL. Je voudrais donc afficher ces informations dans un genre de popup. Pour ça, ma page dispose d'une <div> vide avec l'option "display:none". Quand le visiteur clique, je voudrais aller chercher l'info, et la mettre dans le innerHTML de ma <div>. Et comme c'est du MySQL, il faut que mon <a href> appelle un module php. Mais en fait, ça ne marche pas. J'ai l'impression que, même si je ne mets aucun en-tête html dans ce php, il change quand même de page, et il me dit que le document.getElementByI('popup') est vide.

Je vois poindre une solution bourrin : dans mon fichier principal, je lis toutes les informations dans une table javascript, et, avec mon lien, je vais sélectionner l'élément de la table qui va bien...

Est-ce que vous confirmez que c'est ça ou rien ?

AMIcalement.

dans le href, tu peux mettre l'appel d'une fonction javascript, qui elle, va appeler ton script php, pour récupérer le contenu à afficher dans le div.
mais la solution d'avoir tout déjà chargé dans du javascript, peut être la meilleure solution suivant le contexte.

Bonjour,

Pour les appels au serveur sans rechargement de page, il existe effectivement une solution en javascript avec AJAX (voir le forum FAQ pour des explications et tutoriels sur le sujet).

Autre solution, utiliser une iframe dans ton div, et utiliser la balise target dans tes liens pour que la page appelée s'ouvre dans l'iframe. Il ne te resterait plus alors qu'à gérer l'affichage ou non du div/de la frame.

Sinon, quitte à tout charger dès le départ, ne t'embête pas avec un tableau javascript, génère juste plusieurs <div> à la suite en display none, et affiche celui demandé par l'utilisateur. Ca demandera bien moins de ressources au navigateur

Sinon, quitte à tout charger dès le départ, ne t'embête pas avec un tableau javascript, génère juste plusieurs <div> à la suite en display none, et affiche celui demandé par l'utilisateur. Ca demandera bien moins de ressources au navigateur

Non !

Vraiment, un conseil, tu veux remplir dynamiquement des éléments HTML avec des données qui sont dans ta base de données, donc tu auras besoin d'un module PHP A CE MOMENT LA !

Et pas avant !

Remplir 100% des infos pour ensuite les masquer/afficher en fonction du lien sur lequel on clique, ça revient à + de HTML inutile dans la page, et à + de ressources SQL perdues inutilement !

La meilleure marche à suivre reste donc comme te l'a dit Ryle de passer par de l'AJAX.

Voici en gros la procédure :
1/ Clique sur un lien déclenche une requête AJAX faite via Javascript
2/ Le Javascript va donc appeler une page PHP
3/ Celle ci va renvoyer du code, ici c'est en fonction de ce que tu préfères si tu débutes là dedans, le mieux étant d'envoyer un template HTML déjà rempli via ton PHP, mais tu peux aussi n'envoyer que les données et remplir avec Javascript.
4/ On insère la réponse envoyée par PHP dans le HTML qu'on a actuellement.

Du coup, on aura que la requête qui nous intéresse qui sera lancée, seulement quand on en aura besoin, et qui ne remplira que l'endroit que nous voulons afficher.
Eviter à tout prix les multiples <div> pré remplies avec un jeu de display:none/block.

pour afficher ces div, il faut faire une requete sur le serveur. si l'internaute fait 3 actions qui aboutissent à un appel à un script php par de l'ajax, cela fait 3 requetes à la base de donnée; et il a vraisemblablement fallu faire une requete pour générer la page.
donc non, tout faire en ajax n'est pas plus économe en ressource.

pour afficher ces div, il faut faire une requete sur le serveur. si l'internaute fait 3 actions qui aboutissent à un appel à un script php par de l'ajax, cela fait 3 requetes à la base de donnée; et il a vraisemblablement fallu faire une requete pour générer la page.
donc non, tout faire en ajax n'est pas plus économe en ressource.

Chacun de ces requêtes est isolée. Ici, on a le cas où l'utilisateur ne verra pas forcément le contenu puisqu'il est caché par défaut.
Donc il n'y a aucune utilité à le pré-remplir, ça ne fait que de la ressource dépensée en plus.
Charger toute une page en AJAX, c'est simplement faire TROP d'appels JS (en excluant certains frameworks JS) pour rien, puisqu'au premier chargement le PHP peut s'occuper de remplir la page.

Cependant, ne pas lancer cette (ou ces) requête(s) tant qu'elles ne sont pas nécessaire réduira considérablement le temps de chargement d'une page et améliorera l'UX.

Il suffit de prendre l'exemple d'une pagination sur 500k résultats. Il y a 2 façons de faire, soit on charge tout dès le premier chargement de la page et on pagine sur ces résultats en JS/CSS (et là on met un temps fou à charger la page), soit on charge seulement les résultats de la première page (on pagine du coup seulement sur un "nombre de résultats total"), et à chaque changement de page on effectue une nouvelle requête ne chargeant que les suivants (et tout est bien plus fluide et rapide).

@nestecha : bien d'accord, c'est pourquoi je n'ai proposé la solution des div masqués qu'en 3eme recours, c'est une solution facile mais pas "propre"

Néanmoins, le choix de la solution et la comparaison des performances ne peut avoir de véritable sens que si l'on connaît le contexte. Combien d'utilisateurs vont se servir de la fonctionnalité, combien de "blocs" y a-t-il en base, combien de "blocs" chaque utilisateur regarde-t-il... il y a toujours un seuil à partir duquel démultiplier le nombre d'appels au serveur est plus intéressant que de n'en faire qu'un seul gros dès le départ. Pour parler performance il faut donc savoir si dans l'usage on atteint ou non ce seuil

Perso, je trouve la solution ajax plus élégante, mais elle est plus longue à mettre en oeuvre, demande plus de travail pour quelqu'un qui ne connait pas bien javascript (ceci étant, c'est pas du temps de perdu ! )
Une solution à base d'appels ajax mais plus simple à mettre en oeuvre car tout est déjà fait et documenté, c'est de partir sur des librairies de lightbox du genre fancybox (à condition effectivement de vouloir une "popup" sur ta page et pas l'alimentation d'un onglet ou autre )