Comment utiliser JQuery avec VSC

**mormic** · 08/11/2023, 10h35

Bonjour à tous.
Je développe une petite application client/serveur sur un microcontroleur ESP32 avec Visual Studio Code.
j'utilise Javascript, Ajax pour gérer ma page HTML.
J'aimerais utiliser la librairie JQuery mais cela n'est pas natif et semble bien compliqué à mettre en oeuvre.
Quelqu'un a-t'il déjà implémenté JQuery sur VSC et pourrait m'aider ?
Merci

**umfred** · 09/11/2023, 11h08

il faut récupérer la librairie jquery ou pointer sur un CDN jquery
https://jquery.com/download/

Pour l'ESP32, il y a un tuto https://techtutorialsx.com/2018/09/1...erving-jquery/

**mormic** · 09/11/2023, 16h09

merci Umfred pour ce lien.
Avec Visual Studio Code, j'ai mis le fichier 'jquery-3.7.1.min.js' dans mon répertoire 'data' où il y a mon code HTML, CSS et javascript.
Dans HTML j'ai indiqué '<script src="jquery-3.7.1.min.js" </script>'
Mais il y a déjà le script '<script src="code.js" async></script>'
Cela n'a pas l'air de faire bon ménage car la fermeture du nouveau script est rouge.
Ma question: peut-on utiliser JQuery et JS standard en même temps; dans ce cas quelle est la syntaxe?
Ou bien c'est soit l'un ou soit l'autre?

**mormic** · 09/11/2023, 17h05

Je viens d'écrire ainsi et cela ne fonctionne pas:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Gestion domotique Mormic</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script
            src="code.js" async 
            src="jquery.js">
        </script>
    </head>
    <body>

Le code jquery n'est pas interprété!
exemple:

Code :

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

$("#accuse").text("Mise à jour");

**umfred** · 09/11/2023, 18h05

met le jquery avant, l'ordre a de l'importance. mais dans ton dernier code, tu as renommé le fichier jquery ? et retire le async car pour exécuter ton code.js tu as besoin que jquery soit chargé.

https://www.alsacreations.com/astuce...ync-defer.html

**mormic** · 10/11/2023, 12h26

Bonjour Umfred
Mon HTML:

Code :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Gestion domotique Mormic</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="jquery.js"></script>        
        <script src="code.js" async></script>   
    </head>
    <body>

Si j'enlève async, cela ne fonctionne plus.
Dans l'état actuel; les commandes JQuery ne fonctionnent pas.
C'est désespérant!

**umfred** · 10/11/2023, 19h24

Forcément, puisque ça va risquer de charger code.js avant jquery.js et donc si code.js a besoin de jquery, bah souci.

Qu'est-ce qui ne fonctionne plus en enlevant async ?

(on est plus dans une problématique web que VSC)

ou alors tu fais l'import de jquery dans code.js => import * from "./jquery.cs";

**mormic** · 11/11/2023, 19h10

bonsoir umfred

Qu'est-ce qui ne fonctionne plus en enlevant async ?

Ma page HTML ne s'affiche plus entièrement.

fais l'import de jquery dans code.js => import * from "./jquery.cs";

La librairie jquery est chargée dans le répertoire data de mon VSCode.
Au moment de la compilation cette librairie est versée dans la mémoire SPIFFS de mon ESP32.
Puis, lorsqu'un client fait un requète, je suppose qu'avec le code.js, le jquery.js est aussi envoyé.
Alors l'import que tu me proposes, comment sera t'il envoyé vers le client?
Et pourquoi l'éditeur VSCode ne reconnaît pas les syntaxes jquery?

Si cela peut t'éclairer voici mes écritures:
HTML:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!--******************************************************************
********* Formulaire Domotique Mormic avec asycWebServer sur ESP32 *****
******************************************Michel MORICE aoÃ»t 2023**-->
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Gestion domotique Mormic</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="jquery.js"></script>        
        <script src="code.js" async></script>   
    </head>
    <body>
        <h1>Domotique Mormic</h1>
        <div class="boutons">
            <p>
              <button class="bb">1</button>
              <button class="bb">2</button>
              <button class="bb">3</button>
             <button class="bb">F</button>
            </p>
            <p>    
              <button class="bb">4</button>
              <button class="bb">5</button>
              <button class="bb">6</button>
             <button class="bb">E</button>
            </p>
            <p>
              <button class="bb">7</button>
              <button class="bb">8</button>
              <button class="bb">9</button>
             <button class="bb">D</button>
            </p>
            <p>
             <button class="bb">A</button>
             <button class="bb">0</button>
             <button class="bb">B</button>
             <button class="bb">C</button>
            </p>
        </div>
		<br>
        <div>
            <p class="resul" id="kb1"></p>
            <p class="resul" id="kb2"></p>
            <p class="resul" id="kb3"></p>
            <p class="resul" id="kb4"></p>
            <p class="resul" id="kb5"></p>
            <p class="resul" id="kb6"></p>
            <p class="resul" id="kb7"></p>
            <p class="resul" id="kb8"></p>
            <br>
            <p id="libel"></p>
        </div>
        <br>
        <button id="raz">Remise a zero</button>
        <br>
        <p id="accuse">Commande clavier active</p>
        <br>
        <button id="etatVol">Etat des volets</button>
        <div id="container"></div>
        <button id="etatRel">Etat des relais locaux</button>
       <div>
            <button class="relais" id="r1">1</button>
            <button class="relais" id="r2">2</button>
            <button class="relais" id="r3">3</button>
            <button class="relais" id="r4">4</button>
        </div>
     </body>
</html>

CSS:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/********************************************************************
**********   Feuille de styles pour Essai AsyncWebServer  ***********
******************************************Michel MORICE aoÃ»t 2023***/
html{
  font-family: Arial, Helvetica, sans-serif;
  display: inline-block;
  text-align: center;
}
h1{
  color: greenyellow;
  padding: 4px 4px 1px 4px;
}
.boutons{
  width: 300px;
  border: 2px solid blue;
  padding: 10px;
  margin: auto;
  margin-bottom: 4px;
}
.bb{
  font-size: 30px;
  padding: 10px 20px;
  margin:auto;
}
.resul{
  display: inline-block;
  width: 30px;
  height: 20px;
  padding: 5px;
  border: 1px solid blue;
  margin: 2px;
}
#libel{
  display: inline-block;
  width: 600px;
  height: 20px;
  padding: 5px;
  border: 1px solid blue;
  margin: 2px;  
}
#accuse{
display: inline-block;
padding: 5px;
border: 1px solid red;
}
.titre{
  margin-bottom: 4px;
}
.divParent {
  display: inline-block;
  margin: 10px 10px;
}
.divParent div {
  width: 50px;
  height: 100px;
  border: 1px solid #000000;
  background: gray;
  text-align: center;
  vertical-align: bottom;
  display: table-cell;
}
.divParent span {
  display: inline-block;
  width: 50px;
  text-align: center;
}
.relais{
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background-color:cornflowerblue;
  margin-right: 20px;
  margin-top: 5px;
  text-align: center;
}

JS:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
//import {jQuery} from "./jquery.js";
let touche;
let message="";
let etatVol = [0,0,0,0,0,0,0,0,0], etatRel = ['F','F','F','F'];
let kb = ['','','','','','','','',''];
let etape = 0;
let libel = "";
let taux =0; 
let finSaisie = false, validEnvoi = false;
//******************chargement des etats au load de la page*******************************
window.onload = function(){
        etape = 1;
        appServeur("/API?Cmd=E&volet=A&valeur=0",ack);  //demande l'etat des volets
}
//**********************Chargement des volets *****************************************
function chargeEtatVolet(){
    let mescanvas = '';
    for(let i = 1; i < 10; i++) {
        mescanvas += `<div class="divParent"><span>V${i}</span><div class="position" id="v${i}"></div><span>${etatVol[i-1]}%</span></div>`;
    }
    document.getElementById('container').innerHTML = mescanvas;
    for (const taux of document.getElementsByClassName('position')) {
        let pourcent = taux.parentElement.lastChild.innerText;
        taux.style.backgroundImage = `linear-gradient(to top, #a8eb12 ${pourcent}, gray 0%)`;       
    }
}
function majVolets(){       //apres une demande EA0
    for(let j=0; j<message.length/2;j++){
        if(message.substring(j*2,j*2+2)=="OT") etatVol[j]= 100;
        else etatVol[j]= parseInt(message.substring(j*2,j*2+2));                //tableau etatVolet de 0 à 8 pour 9 volets
    }
}
//*******************Mise à jour etat relais locaux*****************************************
function majRelais(){
    let z="",bgc="";
    for(let j=0; j<4;j++){
        z="r" + (j+1);
        etatRel[j] = message.substring(j,j+1);
        bgc = (etatRel[j]=="O")? 'red' : 'cornflowerblue';
        document.getElementById(z).style.backgroundColor = bgc;
    }
}
//*******************evenement click sur voyant relais local********************************
let relais, mouv;
let listeRelais = document.querySelectorAll(".relais");
listeRelais.forEach(function(k){
    k.addEventListener("click", function(r){
        relais = r.target.innerHTML;
        etape = 6;
        mouv = (etatRel[parseInt(relais)-1]=="F")? "O":"F";
        appServeur("/API?Cmd=C&relais=" + relais + "&mouv=" + mouv, ack);
    })
})
//*********************evenemnts saisies du clavier recu en HTML*****************************
let msgErr = "tapez C pour corriger";
let demandeResult=false;
let listeBouton = document.querySelectorAll(".bb");
let kbSaisie=1;
let lUrl="";
listeBouton.forEach(function(i){
    i.addEventListener("click", function(e){
        touche = e.target.innerHTML;
        //debut de la saisie
        if(validEnvoi && touche=="C"){
            finSaisie=true;
         }
        else{
            kb[kbSaisie] = touche;
            document.getElementById("kb" + kbSaisie).textContent = touche;
            kbSaisie++;
            if(kbSaisie>3){validEnvoi=true;}    //valide l'envoi par touche C
        }
        if(finSaisie){           
            switch(kb[1]){
                case '0':
                    kb[1]='O'; 
                    etape = 2;
                    libel="Ouverture volet " + kb[2];
                    if(kb[3]=='0' && kb[4]=='0'){
                        libel += " de 100%";
                        taux = 100;                       
                    } 
                    else{
                        taux = parseInt(kb[3]) * 10 + parseInt(kb[4]);
                        libel += " de " + taux + "%";
                    }
                    lUrl = "/API?Cmd=" + kb[1] + "&volet=" + kb[2] + "&valeur=" + taux.toString();
                break;
                case 'F':
                    etape = 3;
                    libel = "Fermeture totale volet " + kb[2];
                    taux = 0;
                    lUrl =  "/API?Cmd=" + kb[1] + "&volet=" + kb[2];
                break;
                case 'E':
                    if(kb[2]=='A' && kb[3]=='0'){
                        etape = 1;
                        lUrl = "/API?Cmd=E&volet=A&valeur=0";        
                    }
                    else if(kb[2]=='B' && kb[3]=='0'){
                        etape = 5;
                        lUrl = "/API?Cmd=E&relais=B&valeur=0";
                    }
                break;
                case 'C':
                    if(kb[2]>='1' && kb[2]<='4'){
                        relais = kb[2];
                        etape = 6;
                        mouv = (etatRel[parseInt(kb[2])-1]=="F")? "O":"F";
                        lUrl = "/API?Cmd=C&relais=" + relais + "&mouv=" + mouv;        
                    }
                break;
                default: libel="Erreur"; 
            }
            document.getElementById("libel").textContent = libel;
            appServeur(lUrl, ack);
        }
    })  
})
//************************remise a zero****************************************************
function raz(){
    for(let i=1;i<=8;i++){
        kb[i] = '';
        document.getElementById("kb"+i).textContent = '';
    }
    libel=""; validEnvoi=false; finSaisie=false;
    document.getElementById("libel").textContent = '';    
    document.getElementById("accuse").textContent = "Commande clavier active";
    kbSaisie=1;
}
//********************Evenement click sur RAZ***********************************
document.getElementById("raz").addEventListener("click",function(){
    raz();
});
//*********************evenement click sur touche etat relais locaux***********************
document.getElementById("etatRel").addEventListener("click",function(){
    etape = 5;
    appServeur("/API?Cmd=E&relais=B",ack);
});
//*********************evenement click sur touche etat volets *****************************
document.getElementById("etatVol").addEventListener("click",function(){
    etape = 1;
    appServeur("/API?Cmd=E&volet=A&valeur=0",ack);
});
//************************envoi de la commande**********************************************
function appServeur(url,fonction){
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){       //creation evenement attente d'une reception
        if(this.readyState==4 && this.status==200){
            message="";
            fonction(this);
        }
    };
    //envoi de la requete par un GET l'url contient la commande API qui renvoit l'ack 
    xhttp.open("GET", url, true);
    xhttp.send();
}
//*********************execution de la fonction a l'accuse reception**********************
function ack(xhttp){
    message=xhttp.responseText;
    if(message.substring(0,2) == "Ok"){
        message=message.substring(2);
        switch(etape){
            case 1:
                document.getElementById("accuse").textContent = "Mise à jour etat des volets";
                majVolets();
                chargeEtatVolet();
            break;
            case 2:                
                if(message.substring(0,1)== kb[2] && message.substring(1,2)== 'O'){
                    etatVol[parseInt(kb[2])-1] = taux;     //si volet 3 -> etatVol[2] = taux 
                    chargeEtatVolet(); 
                }               
            break;
            case 3:
                if(message.substring(0,1)== kb[2] && message.substring(1,2)== 'F'){
                    etatVol[parseInt(kb[2])-1] = taux;     //si volet 3 -> etatVol[2] = taux 
                    chargeEtatVolet(); 
                }
            break;
            case 4:
                if(message.substring(3)=="00"){  
                    document.getElementById("accuse").textContent = "Volet " + message.substring(2,3) + " en fermeture totale";
                    etatVol[kb[3]-1]=0;
                    chargeEtatVolet();
                }
                else{
                    document.getElementById("accuse").textContent = "Volet " + message.substring(2,3) + " en ouverture de " + message.substring(3) + "%";   
                    etatVol[parseInt(kb[3])-1] = message.substring(3);
                    chargeEtatVolet();
                }   
            break;
            case 5:     //retour commande EB: MAJ relais locaux
                //$("#accuse").text("Mise à jour etat des relais locaux");
                document.getElementById("accuse").textContent= "Mise à jour etat des relais locaux";
                majRelais();
            break;
            case 6:     //Commande relais locaux  1 a 4 - etat[0 a 3] 
                let x =""; let z="r" + relais;
                if(message.substring(0,1)== relais && message.substring(1)=='O'){
                    x = "ON";
                    etatRel[parseInt(relais)-1] = 'O';
                    document.getElementById(z).style.backgroundColor = 'red';
                    //$(z).css("background-color", "red");
                }
                else if(message.substring(0,1)== relais && message.substring(1)=='F'){
                    x="OFF"; 
                    etatRel[parseInt(relais)-1] = "F";
                    document.getElementById(z).style.backgroundColor = 'cornflowerblue';
                    //$(z).css("background-color", "cornflowerblue");
                }
                document.getElementById("accuse").textContent = "Relais " + relais + ": " + x;
 
            break;
            default:     //
 
            break;
        }
    }
    else{
        document.getElementById("accuse").textContent = "Erreur - Recommencer";
        document.getElementById("libel").textContent = message;
    }
    setTimeout(raz,3000);
}

main.cpp: (serveur)

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
//********************initialisation du serveur**************************************
void initServeur(){
  //****pageHtml****
  serveur.on("/comVol", HTTP_GET, [](AsyncWebServerRequest *req){
    req->send(200,"text/html", pageHTML);
    clientConnected=true;
  });
  //****style.css****
  serveur.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *req){
    req->send(200, "text/css", pageCSS);
  });
  //****code.js****
  serveur.on("/code.js", HTTP_GET, [](AsyncWebServerRequest *req){
    req->send(200, "application/javascript", pageJS);
  });
  //****JQuery.js****
  serveur.on("/jquery.js", HTTP_GET, [](AsyncWebServerRequest *req){
    req->send(200, "text/javascript", pageJQ);
  });
  //****API****
  serveur.on("/API", HTTP_GET, [](AsyncWebServerRequest *req){
    String reponse = "" , equipement= "", taux = "";
    String commande[4], action[4];
    int nbArgs = req->args();
    for(int i=0;i<nbArgs;i++){
      Serial.printf("ARG[%s]: %s\n", req->argName(i).c_str(), req->arg(i).c_str());
      commande[i] = req->argName(i); action[i]=req->arg(i);
    }
    //demande ouverture volet
    if( commande[0] == "Cmd"  && action[0] == "O" && commande[1] == "volet") {
      equipement = req->arg(1);
      taux = req->arg(2);
      reponse = "Ok" + equipement + "O" + taux;
      req->send(200,"text/plain", reponse);
      if(taux=="100") taux="00";
      cmdCl[0]= 'O'; cmdCl[1]= equipement.charAt(0); cmdCl[2]= taux.charAt(0); cmdCl[3]=taux.charAt(1);
      cmdCl[4]='Z'; cmdCl[5]='\0';
      commandeRecu=true;
    }
    //demande fermeture volet
    else if(commande[0] == "Cmd" && action[0] == "F" && commande[1] == "volet" ){
      equipement = req->arg(1);
      reponse = "Ok"+ equipement + "F" + "00";
      req->send(200,"text/plain", reponse);
      cmdCl[0]= 'F'; cmdCl[1]= equipement.charAt(0); cmdCl[2]= 'Z'; cmdCl[3]='\0';
      commandeRecu=true;
    }
    //demande etat volet(s)
    else if(commande[0] == "Cmd" && action[0] == "E" && commande[1] == "volet" ){
      equipement = req->arg(2);
      String tempo = "";
      if(equipement != "0"){    //un seul volet
        if(etatVol[equipement.toInt()-1] == 0){
        reponse = "Ok" + equipement + "00"; //en fermeture totale
        }
        else{
          tempo = (etatVol[equipement.toInt()-1] == 100)? "OT" : String(etatVol[equipement.toInt()-1]-100);
          reponse = "Ok" + equipement +  tempo;
        }
        req->send(200,"text/plain", reponse);
      }
      else{               //tous les volets
        reponse = "Ok";
        for(i=0; i<NB_VOLETS; i++){
          if(etatVol[i]== 0) tempo = "00"; else if(etatVol[i]==100) tempo="OT"; else tempo= String(etatVol[i]-100);
          reponse += tempo;
        }
        req->send(200,"text/plain",reponse);
      }
    }
    //commande relais locaux
    else if(commande[0]== "Cmd" && action[0] == "C" && commande[1] == "relais" && action[1].charAt(0)<'5'){
      reponse = "Ok" + action[1] + action[2];
      req->send(200,"text/plain",reponse);
      cmdCl[0]= 'C'; cmdCl[1]= action[1].charAt(0); cmdCl[2]=action[2].charAt(0);  
      cmdCl[3]='Z'; cmdCl[4]='\0';
      commandeRecu=true;  //CxO/FZ\0
    }
    //demande etat des relais locaux
    else if(commande[0]=="Cmd" && action[0]=="E" && commande[1]=="relais" && action[1]=="B" && action[2]=="0"){
      reponse ="Ok";
      for(i=0;i<NB_RELAIS;i++){
        reponse += (etatRel[i]==0)? "F":"O";
      }
      req->send(200,"text/plain",reponse);
    }
    //commande relais distants
    else if(commande[0]=="Cmd" && action[0]=="C" && commande[1]=="relais" && action[1].charAt(0)=='5'){
      reponse = "OkRelais" + action[2] + action[3] ;
      reponse += (action[4]=="O")? "1":"0";
    }
    //aucune demande valide
    else {reponse= "Commande erroné";
      req->send(200,"text/plain", reponse);
    }
    afficLigLcd(cmd,obt,DURAFF);
    Serial.println(reponse);
  });
  serveur.begin();
}

Ce projet est en cours de développement. Il fonctionne correctement ainsi mais j'étais intéressé pour la suite et surtout par intérêt pour utiliser jquery.
Pour moi les soucis viennent de VSCode qui n'interprête pas le jquery.

**umfred** · 13/11/2023, 19h36

VSCode n'est qu'un éditeur de texte/code avancé, pas un vrai IDE. Il ne reconnait pas le jquery parce tu ne lui as pas chargé la coloration syntaxique pour ce langage.
c'est le navigateur web (chrome/firefox/...) qui exécute les fonctions js/jquery et dialogue avec le serveur.

Est-ce que tu as chargé les fichiers sur l'ESP comme indiqué dans le tuto que j'ai mis dans ma 1ère réponse (il y a un lien qui dirige vers cette page https://techtutorialsx.com/2018/08/2...ad-ide-plugin/ ) le lien utilise le logiciel arduino IDE mais il doit être possible de le faire via VSCode je pense via un plugin arduino)

Un autre tuto https://myhomethings.eu/en/asynchron...r-jquery-ajax/ dans lequel il est indiqué que le code js devrait être écrit dans la fonction

Code :

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

1
2
3
$(document).ready(function() {
    .... (code à exécuter une fois le document chargé)
}

**mormic** · 14/11/2023, 13h00

tu ne lui as pas chargé la coloration syntaxique pour ce langage

Comment fait-on?

Est-ce que tu as chargé les fichiers sur l'ESP

Oui j'ai bien chargé tous les fichiers nécessaires dans le SPIFFS puis lus dans le programme principal:

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
//********************initialisation du SPIFFS***************************************
void initSPIFFS(){
  Serial.println("init SPIFFS");
  if(!SPIFFS.begin(FORMAT_SPIFFS_IF_FAILED)){
    Serial.println("cannot mount SPIFFS");
    lcd.println(msg0);         //"SPIFFS Mount Failed"
    delai('s',2);
  }
  else{
    lectureData(SPIFFS, dirHtml);
    lectureData(SPIFFS, dirCss);
    lectureData(SPIFFS, dirJs);
    lectureData(SPIFFS, dirJQ);
  }
}

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
//*************** Chargement des pages annexes du serveur ************************
void lectureData(fs::FS &fs, const char* path){
  File fic = fs.open(path);
  Serial.printf("Lecture fichier: %s\r\n",path);   
  if(!fic || fic.isDirectory()){
    Serial.println("lecture fichier impossible");
    afficErreurs(msg11);
    return;
  }
  if(path==dirHtml){ 
    while(fic.available()) {pageHTML += char(fic.read());}
    String tempo(reinterpret_cast<const __FlashStringHelper*> (pageHTML.c_str()));
    pageHTML=tempo;
  }
  else if(path==dirCss){
    while(fic.available()) {pageCSS += char(fic.read());}
    String tempo(reinterpret_cast<const __FlashStringHelper*> (pageCSS.c_str()));
    pageCSS=tempo;
  }
  else if(path==dirJs){
    while(fic.available()) {pageJS += char(fic.read());}
    String tempo(reinterpret_cast<const __FlashStringHelper*> (pageJS.c_str()));
    pageJS=tempo;
  }
  else if(path==dirJQ){
    while(fic.available()) {pageJQ += char(fic.read());}
  }
  fic.close();
}

Avec pour dirJQ "/jquery.js".
J'ai vérifié que la variable 'pageJQ' contient bien la librairie jquery V3.7.1.min
Puis dans l'initialisation du serveur:

Code :

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

1
2
3
4
/****JQuery.js****
  serveur.on("/jquery.js", HTTP_GET, [](AsyncWebServerRequest *req){
    req->send(200, "text/javascript", pageJQ);
  });

Lorsque le client se connecte, il demande bien les 4 fichiers index.html, style.css, code.js et jquery.js.
Si j'analyse avec les outils Chrome les infos reçues du serveur, les trois premiers sont bien chargés mais jquery est vide !
Et sur l'outil console de Chrome j'ai les messages suivants:

Unchecked runtime.lastError: The message port closed before a response was received.
comVol:1 Unchecked runtime.lastError: The message port closed before a response was received.
favicon.ico:1

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
2code.js:217 Uncaught ReferenceError: $ is not defined
at ack (code.js:217:17)
at xhttp.onreadystatechange (code.js:172:13)

J'utilise volontiers l'IDE Arduino mais ce qui m'a fait opter pour VSC c'est principalement l'auto-complétion; mais là avec JQuery, c'est rapé!
Voilà des heures que je passe par toutes les solutions proposées sur le Net et bien que je sois du genre persévérant, je crois que je vais abandonné le JQUERY.
Merci tout de même.

Comment utiliser JQuery avec VSC

Visual Studio

Discussions similaires

Partager

Partager