Webapps d’initiation : Ajax : Ouvrir un fichier daté à partir d’un Datepicker par réponse Ajax

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 :

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

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()

[$[Get Code]]

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 :

#!/usr/bin/python
# -*- 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

[$[Get Code]]

4. Body HTML : définition des éléments graphiques de la page

[$[Get Code]]

5. Head : Inclusion des librairies utilisées

[$[Get Code]]

6. Head : Code Javascript de la page

$(document).ready(function(){

$( « #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 $

[$[Get Code]]

7. Ajax : Code Python « côté serveur » : Envoi de la réponse Ajax

def reponseAJAX(paramIn):

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

[$[Get Code]]

8. Ajax : Code Javascript « côté client » : Gestion de la réponse Ajax

function manageReponseAjaxServeur(dataIn){

//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