Discussion :

[L'AMI Yves]

Bonjour à tous les utilisateurs de ce forum.

Je suis un vieux de la vieille en informatique, et pas forcément "à jour" dans mes connaissances.

J'ai développé un site sur mon réseau local, utilisant Apache2, PHP, MySQL et javascript. Il fonctionne à mon entière satisfaction.

Maintenant, je voudrais ajouter une nouvelle fonctionnalité qui va nécessiter un accès en lecture à la base de données. Pour être plus précis, à un certain moment, l'utilisateur va sélectionner un enregistrement parmi ceux qui sont affichés à l'écran, et je désire ouvrir une fenêtre listant un certain nombre d'autres enregistrements contenant des informations semblables.

J'ai bien vu que cela était réalisable avec jQuery, mais je me demande si ça n'est pas utiliser un marteau pilon pour enfoncer une punaise : pour réaliser mon projet, je dois juste exécuter une requête "SELECT", et afficher son résultat.

Merci à ceux qui pourront éclairer ma lanterne.

Question subsidiaire : j'ai vu sur le site de téléchargement de jQuery qu'il était disponible sur les serveurs d'APIs de Google. Je me pose la question de savoir si ce qu'on trouve là est exactement la même chose que chez jQuery, ou si Google n'y a pas ajouté dieu sait quelles cochonsetés (comme disait le regretté JCB).

Un deuxième merci

AMIcalement.

[ABCIWEB]

Non tu n'as pas besoin d'utiliser jQuery uniquement pour faire une requête Ajax. Car si j'ai bien compris tu veux faire une requête onclick sur un bouton et faire afficher le résultat sans nécessiter un rafraichissement de la page, ce qui correspond au principe d'une requête Ajax.

Si c'est bien cela tu peux regarder ce lien.

Avant on utilisait volontiers jQuery y compris pour faire uniquement des requêtes Ajax car sa syntaxe hyper simple permettait d'être compatible sans effort avec tous les navigateurs. Mais ce n'est plus nécessaire actuellement car les navigateurs ont évolués. Suivant les cas l'utilisation de jQuery est encore toujours un peu plus simple pour faire des requêtes Ajax, mais peu s'en faut et effectivement charger jQuery uniquement pour ça revient à utiliser un marteau pilon pour enfoncer une punaise comme tu le disais.

jQuery possède tout un tas de fonctionnalités qui peuvent être utiles, mais il faut apprendre sa syntaxe, il n'est donc intéressant que quand on l'utilise beaucoup, pour gagner du temps dans les gros développements javascript.

Pour ta dernière question, perso je charge jQuery sur mon serveur je suis donc certain d'avoir la bonne version et de ne dépendre que de mon serveur. Mais si tu choisis l'option cdn à priori oui tu peux faire confiance aux serveurs google, sinon il y a aussi d'autres sources.

[L'AMI Yves]

Oui, tu as bien compris ma question. Je vais donc suivre ton lien.

Pour ma deuxième question, je ne vois pas très clair en matière d'optimisation des communications. Est-ce que, pour chaque appel de jQuery, on charge le réseau de quelques 90 Koctets (que ce soit le réseau local ou le réseau Internet), ou bien il est mis en cache par le navigateur (Firefox, en l'occurrence) ?

En tous cas, un grand merci.

AMIcalement.

[L'AMI Yves]

Ah ! Je vais encore poser des questions, mais je vais faire des essais en attendant les réponses (et si mes essais ne marchent pas, les réponses m'expliqueront pourquoi, j'espère).

1) Tout va partir d'un fichier 1.php qui va provoquer l'affichage de ma page. La fonction 2.php, qui va être appelée à l'aide de XMLHttpRequest, va chercher des données pour mettre à jour une table dans cette page. Elle doit donc se trouver dans le même répertoire. On va donc coder "XMLHttpRequest.open('POST', '2.php');". OK ?

2) Cette fonction 2.php va coder et exécuter une requête Mysql, avec des arguments différents à chaque appel. Ces arguments vont donc être passés à la fonction 2.php. Je ne trouve pas (pas encore ...) clair la façon dont le lien ci-dessus explique comment coder les arguments passés à 2.php.

3) Le but de tout cela est de remplir une table HTML. Est-il possible que 2.php génère une réponse au format XML ayant la forme suivante

Code xml :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
  <tr onclick='truc(1)'>
    <td>bla
    <td>bla
    <td>bla
    <td>bla
  </tr>
  <tr onclick='truc(2)'>
    <td>bla
    <td>bla
    <td>bla
    <td>bla
  </tr>

que j'utiliserai sous la forme

Code javascript :

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

table.tbody.innerhtml=XMLHttpRequest.responseText

?

AMIcalement.

[ABCIWEB]

Pour ma deuxième question, je ne vois pas très clair en matière d'optimisation des communications. Est-ce que, pour chaque appel de jQuery, on charge le réseau de quelques 90 Koctets (que ce soit le réseau local ou le réseau Internet), ou bien il est mis en cache par le navigateur (Firefox, en l'occurrence) ?

En tous cas, un grand merci.

AMIcalement.

Non le navigateur met le code en cache. L'avantage du cdn c'est que l'on suppose que le visiteur ayant déjà visité de nombreux sites internet, est déjà tombé sur ce lien, donc qu'il a déjà le code en cache. Si tu utilises ton serveur pour stoker le code, tu peux utiliser le .htaccess pour indiquer quelles ressources doivent être mises en cache et la durée de ce cache. Par exemple:

Code .htaccess :

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

1
2
3
4
5
6
7
<IfModule mod_expires.c>
     ExpiresActive on
     ExpiresByType application/x-javascript "access plus 1 year"
     ExpiresByType application/javascript "access plus 1 year"
     ExpiresByType text/javascript "access plus 1 year"
     ExpiresByType image/* "access plus 1 year"
</IfModule>

Donc avec ce code, dans l'hypothèse où la librairie jQuery se trouve sur ton serveur, elle ne sera chargée qu'une fois par an pour chaque visiteur, tout comme les images. Au final, sauf une fois par an, c'est aussi rapide que cdn. Cela dit le cdn permet quand même d'avoir un cache plus petit sur l'ordinateur du visiteur puisqu'un moins grand nombre de fichiers y seront stockés. Mais bon, 90Ko ce n'est jamais que l'équivalent d'une seule image moyen format, donc ce n'est pas non plus si important (anecdotique par rapport à l'ensemble des images stockées), surtout aujourd'hui avec des ssd rapides et pas chers.

[ABCIWEB]

1) Tout va partir d'un fichier 1.php qui va provoquer l'affichage de ma page. La fonction 2.php, qui va être appelée à l'aide de XMLHttpRequest, va chercher des données pour mettre à jour une table dans cette page. Elle doit donc se trouver dans le même répertoire.

Non pas nécessairement dans le même répertoire, il suffit d'indiquer la bonne adresse par rapport à ton script, tu peux tout aussi bien indiquer 'mon_repertoire/2.php'.

2) Je ne trouve pas (pas encore ...) clair la façon dont le lien ci-dessus explique comment coder les arguments passés à 2.php.

Dans le lien que je t'ai donné précédemment, vers le premier tiers de la page, voir l'exemple avec la méthode "send()". A noter que l'on se sert souvent de FormData pour alimenter le send, soit en définissant des clés/valeurs avec la méthode "append", soit en passant tout le formulaire en argument dans FormData, soit en faisant un mixte des deux.

3) Le but de tout cela est de remplir une table HTML. Est-il possible que 2.php génère une réponse au format XML ayant la forme suivante

Code xml :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
  <tr onclick='truc(1)'>
    <td>bla
    <td>bla
    <td>bla
    <td>bla
  </tr>
  <tr onclick='truc(2)'>
    <td>bla
    <td>bla
    <td>bla
    <td>bla
  </tr>

que j'utiliserai sous la forme

Code javascript :

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

table.tbody.innerhtml=XMLHttpRequest.responseText

?

Tant qu'à faire puisque c'est pour insérer dans une page html, autant retourner du html. Par contre il faudra réinitialiser tes "onclick" avec addEventListener à la suite de ton insertion sinon tes fonctions "truc" ne seront par reconnues. Enfin bon commence par faire ta requête ajax et d'insérer le html en retour correctement. On verra dans un second temps pour l'événementiel importé.

[L'AMI Yves]

Merci encore une fois.

J'ai appelé "XML" ce que j'ai écrit, mais, en terme de texte pur, c'est exactement du HTML aussi bien. Y a-t-il quelque chose qui change dans la façon dont PHP le traite ?

Pour ce qui est de mes essais, après pas mal de temps passé à corriger les { et les ; ici ou là, j'ai fini par avoir un code qui tourne, mais j'en suis à chercher à atteindre mon module php!

voici le message :

Code HTML :

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

1
2
3
4
5
6
7
8
9
404 : <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /var/www/courant/comptabilite/ListeTiers.php was not found on this server.</p>
<hr>
<address>Apache/2.4.29 (Ubuntu) Server at 192.168.1.2 Port 80</address>
</body></html>

Or il y est bel et bien...

Je sèche !

AMIcalement

[ABCIWEB]

Et tu atteins ce fichier en rentrant cette adresse directement dans la barre d'adresse de ton navigateur ? Même chose si tu mets un lien basique (<a href...) vers ce fichier dans le html ?

[L'AMI Yves]

C'est encore toi qui répond...

A vrai dire, je ne comprends pas très bien ta question, mais il n'y a aucun doute que le fichier invoqué est dans le même répertoire (sur le serveur) que celui qui génère la page (qui est en php aussi).

Par contre, un élément nouveau qui va peut-être te permettre de m'expliquer : quand je vais dans "activité réseau" de l'inspecteur de Firefox, je vois qu'il cherche mon fichier dans

Code :

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

1
2
3
GET
	http://192.168.1.2/var/www/courant/comptabilite/ListeTiers.php?Tiers="bla bla bla"
État404

alors qu'il m'informe, un peu plus bas, de l'endroit d'où c'est parti :

Code :

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

1
2
3
4
Host
	192.168.1.2
Referer
	http://192.168.1.2/comptabilite/ligne.php

Il est donc clair que quelque chose fait que la théorie ne marche pas chez moi : les fichiers ne sont pas recherchés au même endroit. Mais y a-t-il quelque part une variable qui indique la racine à partir de laquelle il faut chercher les fichiers php du site, et/ou une autre qui indique la même chose pour XMLHttpRequest ?

[ABCIWEB]

Tu peux utiliser la balise html base (à mettre dans le head) pour définir l'adresse de ton site et recomposer les adresses relatives.

Il y a aussi window.location.origin en javascript qui peut te donner l'adresse de base de ton site dont tu pourras te servir pour construire ton chemin. Fais un console.log(window.location.origin) pour voir.

[L'AMI Yves]

L'instruction

Code javascript :

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

httpRequest.open('GET', window.location.origin + '/ListeTiers.php?Tiers="' + Tiers +'"', true);

marche !

Merci.

Alors, bien sûr, je tombe sur le problème suivant : dans un précédent post, j'avais décrit le texte renvoyé par mon module php, sous une forme que j'avais appelée "XML", car elle montrait des "<>" et des "</>", et je pensais que c'était équivalent à du HTML.

Alors la question est maintenant de savoir pourquoi l'instruction

Code javascript :

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

TableIA.tbody.innerhtml=httpRequest.responseText;

(qui contient donc le code HTML de la table, du premier "<td>" au derneir "</td>") ne fonctionne pas.

Avant l'appel à XMLHttpRequest, le <tbody> de la table est défini ainsi :

Code HTML :

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

1
2
3
4
5
 
        <tbody>
          <tr><td>&nbsp</td><td></td><td></td><td></td></tr>
        <!-- sera rempli par la procédure XMLHttpRequest -->
        </tbody>

et, à la réponse de

Code javascript :

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

             TableIA.tbody.innerhtml=httpRequest.responseText;

j'ai un message me disant que TableIA.tbody n'existe pas.

Je suppose que ma connaissance du modèle DOM de <table> est insuffisante, mais Google ne m'a rien appris...

Peut-être qu'ABCIWEB aura encore un peu de disponibilité... ou bien quelqu'un d'autre...

En tous cas, merci d'avance.

AMIcalement.

[ABCIWEB]

Tu dis que tu veux insérer des td alors que tu as déjà une ligne dans ta table, c'est donc des tr (des lignes complètes) qu'il conviendrait d'insérer. Pour ajouter des noeuds dans un élément existant du dom on peut utiliser appendChild.

Cela dit, si ta table est vide, autant la créer toute entière en php et ensuite l'insérer dans le dom avec innerHtml, ce sera plus simple.

Concernant "TableIA" je ne sais pas ce que c'est. Fais console.log(TableIA) pour voir ce qui est défini et ce qui ne l'est pas. D'une manière générale utilises console.log() pour vérifier tes éléments et la console du navigateur (touche F12) pour voir le résultat.

[L'AMI Yves]

Encore une fois merci.

Voici comment est initialisée "TableIA" avant d'appeler la routine js inviquant XMLHttpQuery :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
      <table id="TableIA">
        <thead>
          <tr>
            <th>Date</th><th>Compte</th><th>Sous-compte</th><th>Montant</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>&nbsp</td><td></td><td></td><td></td></tr>
        <!-- sera rempli par la procédure XMLHttpRequest -->
        </tbody>          
      </table>

J'ai ajouté la ligne "<tr>" dans le <tbody>pour essayer de résoudre le premier "<tbody> does not exist".

Mais j'ai réfléchi à ce que tu me dis : le php appelé par XMLHttpRequest génère la suite des instructions HTML qui seraient placées entre <tbody> et </tbody>, sous forme d'une chaîne de caractères, comme ce qu'on code dans "echo(....);" quand du php doit générer du html. Apparemment, "innerHTML" avec ça, c'est pas bon !

Est-ce que, pour venir modifier le contenu de l'écran, qui a déjà été interprété par le navigateur, on ne peut tout simplement pas insérer du code html complexe ?

En d'autres termes, ai-je raison de supposer qu'il faudrait que ma TableIA soit préalablement entièrement structurée, avec toutes ses cellules vides, et alors je pourrais utiliser innerHtml uniquement pour modifier individuellement les contenus des cellules ?

L'alternative serait du genre "insertrow", "insertcell" et addeventlistener ?

[ABCIWEB]

Comme déjà dit, le plus simple est que ta requête ajax (donc 2.php comme tu le nommais précédemment) retourne un tableau complet et entièrement structuré c'est à dire avec les balises <table><tr><td>..<td></tr></table>. En admettant que ta table initiale (dans 1.php) soit contenue dans un bloc div avec comme identifiant "content_table" <div id= "content_table">, tu pourras faire en retour de requête ajax : document.getElementById("content_table").innerHTML = xhr.responseText; (à supposé que tu aies déclaré précédemment var xhr = new XMLHttpRequest();).

[L'AMI Yves]

Encore et toujours merci ABCIWEB.

J'avais fait un essai en appliquant innerHTTP sur la section <tbody> de la table, et ça n'avait pas marché (<tbody> does not exist !). J'en avais déduit (à tort ?)que la construction du modèle DOM ne devait pas être lancée dans ce cas. Tu sembles indiquer le contraire.

Ce matin, après t'avoir lu, j'ai crié "Bon sang, mais c'est bien sûr !" et j'ai foncé... Mais ça ne marche toujours pas.

La raison est-elle que, dans mon module 2.php, je prétends générer le "responseText" par des

Code php :

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

echo "HTML";

ou des

Code php :

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

"?>HTML"

de la même manière que le php génère le HTTP des pages "habituelles" (il n'y a donc pas de

Code php :

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

return $responseText;

dans mon "2.php) ?

[L'AMI Yves]

Le mieux que j'aie pu obtenir, en jouant avec responseType, responseText et responseXML, à l'endroit où j'attendais ma table, c'est

--> [Object HTMLdocument]

Jespère que quelqu'un saura me dire ce qu'il manque...

AMIcalement.

[L'AMI Yves]

Arrêtez tout : ça marche !

Mais bouh dis ! la documentation est quand-même absconse !

Alors il fallait
- que le responseType soit à blanc (ou text)
- qu'il n'y ait pas d'erreur dans le code HTML produit.

C'est tout simple... et c'est le nœud du problème.

Merci à ABCIWEB.

Salutation à tous ceux qui nous ont lu jusqu'ici.

Et à bientôt...

AMIcalement.

[ABCIWEB]

Arrêtez tout : ça marche !

Mais bouh dis ! la documentation est quand-même absconse !

Cela dépend de laquelle tu utilises. Pour trouver de la bonne doc sur une fonction javascript, il suffit de taper son nom suivi d'un espace puis de "mdn" dans un moteur de recherche. La première réponse sera celle de la doc Mozilla (la meilleure).

J'étais entrain de te faire un exemple basique, il peut servir pour ceux qui voudraient un exemple complet. Ci-dessous deux fichiers avec des commentaires pour la construction de la requête Ajax:

Notez que j'utilise window.location.origin pour récupérer l'adresse racine du site (ce n'est pas obligatoire). Dans cette exemple la destination de la requête Ajax (dans xhr.open) est définie par rapport à cette adresse, le fichier "Destination_Ajax.php" est donc supposé être à la racine du site. A adapter suivant vos besoins.

Fichier html

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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
</head>
 
<body>
<h3 id="lien" data-attr="toto">Cliquer sur ce titre pour compléter le paragraphe</h3>
<div id="content_text"></div>
 
<script>
const
        lien = document.getElementById("lien") // Cible le lien par son id
        ,cible = document.getElementById("content_text") // Cible le conteneur par son id
        ,root   = window.location.origin // Dossier racine du site
        ;
 
// Requête Ajax
function handleChange() {
        // Initialise un objet XMLHttpRequest
        var xhr = new XMLHttpRequest();
        
        // Ecouteur d'évènement
        xhr.onreadystatechange = function(){
                // si requête ok
                if (xhr.readyState == 4 && xhr.status == 200){
                        // On peuple la cible avec la réponse ajax
                        cible.innerHTML = xhr.responseText;
                }
        }
        
        // Instancie la requête
        xhr.open('GET', root+'/Destination_Ajax.php', true);
        // Envoie de la requête. Si on utilise le protocole POST on peut envoyer des paramètres dans send()
        xhr.send();
}
 
// Création de l'événement on click sur le lien et appel de la fonction handleChange
if (lien){ 
        lien.addEventListener('click', function(e){
                
                        handleChange();
                        
                }, false );
}
</script>
</body>
</html>

Fichier destination de requête Ajax, nommé "Destination_Ajax.php".

Code php :

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

1
2
3
4
5
<?php
// On peut renvoyer du html comme ici, ou plusieurs variables dans un tableau avec la fonction php "json_encode"
$string = '<table><tr><td>toto</td><td>tata</td></tr><tr><td>titi</td><td>tutu</td></tr></table>';
echo $string;
?>