View  Edit  Attributes  History  Attach  Print  Search

ACCUEIL | ARDUINO > S'INSTALLER > DEBUTER > APPROFONDIR | PROCESSING | MECATRONIQUE | MATERIEL | OUTILS | TESTS | Plus...|
Python > Shell > ATELIERS Python + Qt > PyQt apps > PyQt+Arduino | Mes Robots | RepRap | Mes lib'Arduino | Mes shields Arduino | Mes distros | Les Mini-PC |
ATELIERS ARDUINO| VIDEOS | COMPRENDRE | REFERENCES | CODER | TECHNIQUE | GNU/LINUX | LIENS | Rien à voir |

Webapps d'initiation : Ajax :

Mini-webapps avec Pyduino
Par X. HINAULT - Créé le 05/09/2014

1.  Présentation

Dans cette webapp d'initiation utilisant jQuery UI, voyons comment afficher la date sélectionnée grâce à un Datepicker dans un textarea, par réponse Ajax. Ceci pose les bases de l'utilisation de la sélection graphique de la date côté client au niveau du serveur.

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.  Body HTML : définition des éléments graphiques de la page

<div id="div"></div><br>
<textarea rows="4" cols="50" placeholder="Cliquer sur une date..." id="textarea"></textarea>

4.  Head : Inclusion des librairies utilisées

<script src="static/jquery.min.js" type="text/javascript"></script>
<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">

5.  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
                        $.get("ajax/"+param, manageReponseAjaxServeur); // envoi d'une requete AJAX

                } // fin onSelect
        });


}); // fin function + fin ready + fin $

6.  Ajax : Code Python "côté serveur" : Envoi de la réponse Ajax

def reponseAJAX(paramIn):

        print "paramIn="+paramIn # debug
        # la reponse
        reponseAjax=( # debutreponse AJAX
paramIn
)  # fin reponse AJAX

        return reponseAjax

7.  Ajax : Code Javascript "côté client" : Gestion de la réponse Ajax

function manageReponseAjaxServeur(dataIn){

        //dataIn=parseInt(dataIn);
        dateList=dataIn.split(':');

        $("#textarea").append("ajax : "+ dateList[1]+"/"+dateList[0]+"/"+dateList[2]+"\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
 

8.  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.