Les webapps sont devenues une partie intégrante de notre vie quotidienne. Elles nous permettent d’effectuer des tâches en ligne, telles que la gestion de nos finances, la planification de nos voyages et bien plus encore. Une des technologies les plus populaires utilisées pour créer des webapps est Ajax. Cet article se concentrera sur l’utilisation d’Ajax pour ouvrir un fichier daté à partir d’un Datepicker par réponse Ajax. Nous examinerons les avantages et les inconvénients de cette méthode et discuterons des meilleures pratiques pour l’utiliser.
Webapps d’initiation : Ajax : Ouvrir un fichier daté à partir d’un Datepicker par réponse Ajax
1. Présentation
Dans cette webapp d’initiation utilisant jQuery UI, voyons comment ouvrir un fichier daté à partir d’un Datepicker par réponse Ajax
2. Structure type de la webapp
Comme cela est présenté dans les tutos dédiés, je rappelle que la structure type de la webapp est la suivante :
- un seul répertoire incluant :
- librairies utilisées
- la page html de la webapp
- le code serveur Pyduino opérationnel incluant la fonction d’envoi de réponse Ajax
- la page HTML de la webapp incluant :
- la définition des éléments graphique au niveau du body
- l’inclusion des librairies utilisées
- le code Javascript actif de la page incluant la fonction de gestion de la réponse Ajax
3. Pré-requis
3.1 Créer une série de fichiers datés de test
A des fins de test, on pourra créer une série de fichiers datés du mois courant avec le code Pyduino suivant :
for jour in range(1,31):
if jour<10 : filename=« data_ »+year()+« _ »+month()+« _0 »+str(jour)+« .txt »
else: filename =« data_ »+year()+« _ »+month()+« _ »+str(jour)+« .txt »
print filename
filenameList.append(filename) # ajoute le fichier à la list
print filenameList
dirname=mainPath()+dataPath(TEXT)
print dirname
for filename in filenameList:
print filename
myFile=open(dirname+filename,‘w’) # crée le fichier
myFile.write(« contenu du fichier « + filename[5:-4]) # ecrit la date dans le fichier
myFile.close()
3.2 Créer une série de fichiers datés de test contenant des séries de données horodatées
Encore mieux, on pourra créer une série de fichiers datés contenant chacun une série de 1440 données horodatées aléatoires de test :
# -*- coding: utf-8 -*-
import datetime as dt
from pyduino_light import *
# variables horaires utiles
hh=str(hour())
mm=str(minute())
# datetime de référence = date courante
refTime=dt.datetime(int(year()), int(month()), int(day())) # date a utiliser – heure 00:00:00 si pas precise
print refTime
dirname=mainPath()+dataPath(TEXT)
print dirname
# création d’une list de nom de fichiers
filenameList=list() # crée list de fichier
for jour in range(1,31):
if jour<10 : filename=« data_ »+year()+« _ »+month()+« _0 »+str(jour)+« .txt »
else: filename =« data_ »+year()+« _ »+month()+« _ »+str(jour)+« .txt »
print filename
filenameList.append(filename) # ajoute le fichier à la list
# datetime de référence = date courante
refTime=dt.datetime(int(year()), int(month()), jour) # date a utiliser – heure 00:00:00 si pas precise
print refTime
#for filename in filenameList:
print « Création du fichier « + filename
myFile=open(dirname+filename,‘w’) # crée le fichier
# écriture des 1440 valeurs randomisées dans le fichier
for t in range(1440) : # defile 1440 minutes theoriques
dataValue=str(random(0,1023)) # genere une valeur aleatoire entiere
dataTime=refTime+dt.timedelta(0, t*60) # jours, secondes – ici toutes les minutes
# format de donnees utilise : JJ-MM-YYYY hh:mm:ss , val \n
dataLine=str(dataTime)+« , »+dataValue+« \n« # format datetime automatique JJ-MM-AAAA hh:mm:ss
#print dataLine – debug
myFile.write(dataLine) # ecrit la ligne dans le fichier
myFile.close()
#print filenameList
4. Body HTML : définition des éléments graphiques de la page
<textarea rows=« 4 » cols=« 50 » placeholder=« Cliquer sur une date… » id=« textarea »></textarea>
5. Head : Inclusion des librairies utilisées
<script src=« static/jquery-ui/jquery-ui.js » type=« text/javascript »></script>
<link href=« static/jquery-ui/jquery-ui.css » rel=« stylesheet » type=« text/css »>
6. Head : Code Javascript de la page
$( « #div » ).css({« font-size »:« 60% »}).datepicker({
inline: true,
onSelect:function(dateText, inst) {
//param=dateText.replace(/\//g, ‘_’); // remplace toutes les occurences
dateList=dateText.split(‘/’);
filename=« data_ »+dateList[2] + « _ » + dateList[0]+ « _ » + dateList[1];
param=« file(« +filename+« ) »
//alert(param);
$.get(« ajax/ »+param, manageReponseAjaxServeur); // envoi d’une requete AJAX
} // fin onSelect
});
}); // fin function + fin ready + fin $
7. Ajax : Code Python « côté serveur » : Envoi de la réponse Ajax
print « paramIn= »+paramIn # debug
filepath=mainPath()+dataPath(TEXT)+paramIn+« .txt »
print filepath
try:
dataFile=open(filepath,‘r’) # ouvre fichier
data=dataFile.read()
dataFile.close() # ferme fichier
except:
data=« Pas de fichier pour cette date »
# la reponse
reponseAjax=( # debutreponse AJAX
data
) # fin reponse AJAX
return reponseAjax
8. Ajax : Code Javascript « côté client » : Gestion de la réponse Ajax
//dataIn=parseInt(dataIn);
$(« #textarea »).append(« ajax : « + dataIn+« \n« );
$(« #textarea »).get(0).setSelectionRange($(« #textarea »).get(0).selectionEnd–1,$(« #textarea »).get(0).selectionEnd–1); // se place en derniere ligne -1 pour avant saut de ligne
} // fin fonction de gestion de la reponse AJAX
9. La webapp complète :
L’archive complète de la webapp est disponible ici, incluant :
- La page HTML complète
- Le serveur Pyduino opérationnel
- Les librairies utilisées
Remarque : le serveur pyduino suppose que la librairie Pyduino et ses dépendances soient installées.
Articles similaires:
- Webapps d’initiation : Ajax : Afficher le contenu d’un fichier texte sélectionné à l’aide d’un w2sidebar
- Webapps d’initiation : Ajax : Afficher le nombre de clic bouton dans un textarea par réponse Ajax
- Webapps d’initiation : Ajax :
- Webapps d’initiation : Ajax : Afficher un message dans une zone texte en réponse à une requête Ajax à intervalles réguliers.
- Webapps d’initiation : Ajax : Afficher un message dans une zone texte en réponse à une requête Ajax à intervalles réguliers.
