Django-fr

Forum

#1 27-02-2012 13:08:41

sesame
Membre
Inscription : 22-03-2011
Messages : 263

script et variable de template

bonjour

comment fait on pour recuperer dans un script une variable de template ?

exemple dans ce script je relie la variable {{ object }} qui renvoie une chaine "Al2O3"

<script>

var uneref = parent.find('p.rep span').text();


</script


<body>
<p class= "rep"><TT> <strong><font size="4" color="black">Materiau : </font></strong><font size="4" color="red"> <strong><span>{{ object }}</span></strong></font></TT></p>


</body>


comment fait on dans le script si je veux recuperer une donnée numerique ??

par exemple  {{ prop.val1 }}

<td class= "min" width="120"  ><TT> {{ prop.val1 }}  </TT> </td>

Hors ligne

#2 27-02-2012 22:17:24

Sébastien Cheminel
Membre
Inscription : 08-12-2011
Messages : 12

Re : script et variable de template

Bonjour,

Il me semble que c'est plus un problème de JavaScript que de Django.
Voici comment je fais pour "passer" des données au JavaScript.
J'utilise JQuery (vous semblez utiliser une librairie de haut niveau aussi)
d'autre librairies vous donneront des facilitées similaires. Si vous
débutez en JavaScript je vous conseille d'utiliser une librairie de la
sorte.
Et dans JQuery, il est facile de passer des données grâce a l'attribut
html5 "data-*"
http://www.alsacreations.com/article/lire/1397-html5-attribut-data-dataset.html

par exemple le HTML suivant :
<td class="min" width="120px" data-prop-val="prop.val1"><tt>{{ prop.val1
}}</tt></td>

permet de récupérer en JS  :
$(function(){
  /* ... debut initialisation ... */
  var tableauxDesDonneesNumeriques=[]
  $(".min").each(function(){
       var recup=$(this).data("prop-val");
       if( isNan(recup) ) throw "les données ne sont pas numériques";
       tableauxDesDonneesNumeriques.push(parseFloat(recup));
  });
  /* ... fin initialisation ... */
})

Comme on le voit dans l'exemple les attributs "data-toto"  sont transformés
en JQuery en $(this).data("toto");
Trop cool non ?

A+
Sébastien


http://sebastien.cheminel.com

Le 27 février 2012 13:08, sesame <pat.100 _AT_ hotmail.fr> a écrit :

> bonjour
>
> comment fait on pour recuperer dans un script une variable de template ?
>
> exemple dans ce script je relie la variable {{ object }} qui renvoie une
> chaine "Al2O3"
>
> <script>
>
> var uneref = parent.find('p.rep span').text();
>
>
> </script
>
>
> <body>
> <p class= "rep"><TT> <strong><font size="4" color="black">Materiau :
> </font></strong><font size="4" color="red"> <strong><span>{{ object
> }}</span></strong></font></TT></p>
>
>
> </body>
>
>
> comment fait on dans le script si je veux recuperer une donnée numerique
> ??
>
> par exemple  {{ prop.val1 }}
>
> <td class= "min" width="120"  ><TT> {{ prop.val1 }}  </TT> </td>
> _______________________________________________
> django mailing list
> django _AT_ lists.afpy.org
> http://lists.afpy.org/mailman/listinfo/django
>

Hors ligne

#3 28-02-2012 08:54:31

sesame
Membre
Inscription : 22-03-2011
Messages : 263

Re : script et variable de template

merci sebastien

oui j'utilise jquery

merci beaucoup !!!

j'ai utilisé http://www.alsacreations.com/article/li … taset.html

je recupere la variable avec :

laval1 = (document.getElementById('val1')).getAttribute('data-laval1');

avec
<td class= "min" width="120" data-laval1={{ prop.val1 }} id="val1" ><TT> {{ prop.val1 }}  </TT> </td>

Hors ligne

#4 28-02-2012 10:21:42

Sébastien Cheminel
Membre
Inscription : 08-12-2011
Messages : 12

Re : script et variable de template

Si vous utilisez JQuery pourquoi ne pas faire :
$("#val1").data("laval1");
?
L'intérêt ne se voit pas sur des données aussi simple mais si l'on fait :

<td class="min" width="120" data-lesval='{"min":{{ prop.val1 }},"max":{{
prop.val2 }} }' id="val1"
><TT>

avec prop.val1 et prop.val2 qui sont des valeurs numériques.
alors JQuery convertira tout ça automatiquement en JavaScript via le
parseur JSON ( http://www.json.org )
on pourra alors directement faire :
$(".min").each(function(){
         var delta =$(this).data("lesval").max -$(this).data("lesval").min;
});
directement sans aucune conversion...

la règle est (si je me souviens bien)  tout ce qui commence par "[" ou par
"{" est passé à la moulinette JSON. D'ailleurs le test est facile a faire
il siffit d'ajouter un espace au debut de la chaine data pour que la
transformation JSON ne soit plus faite. Et il faut aussi veiller a ce que
l'attribut soit du JSON valide, mais ce n'est pas bien compliqué.

Sébastien


http://sebastien.cheminel.com

2012/2/28 sesame <pat.100 _AT_ hotmail.fr>

> getAttribute

Hors ligne

#5 28-02-2012 11:23:39

sesame
Membre
Inscription : 22-03-2011
Messages : 263

Re : script et variable de template

je dois pouvoir traiter {{ prop.val1 }} et {{ prop.val2 }} qui correspondent a valeur min et valeur max des colonnes du tableau

propriete temperature valeur min valeur max

<td class= "min" width="120" data-laval1={{ prop.val1 }} id="val1" ><TT> {{ prop.val1 }}  </TT> </td>
<td class= "max" width="120" data-laval2={{ prop.val2 }} id="val2" ><TT> {{prop.val2}} </TT> </td>

Hors ligne

#6 28-02-2012 11:36:39

sesame
Membre
Inscription : 22-03-2011
Messages : 263

Re : script et variable de template

je n arrive pas atrouver la bonne syntaxe  j'ai du faire une erreur...ca marche pas..

$(".min").each(function(){
        var recup=$(this).data('laval1').prop.val1;
           
            });




<td class= "min" width="120" id="val1" data-laval1= "prop.val1"  ><TT> {{ prop.val1 }}  </TT> </td>

Hors ligne

#7 28-02-2012 12:01:34

Sébastien Cheminel
Membre
Inscription : 08-12-2011
Messages : 12

Re : script et variable de template

il faut faire la différence entre les variables de template de Django
{{prop.val1}} qui sont remplacés dans le HTML et les variables du
JavaScript.
Nous avons là trois niveaux :
1 - Le code du template Django.
2 - le code HTML (afficher la source dans le navigateur)
3 - le code JavaScript

{{prop.val1}} appartient au premier niveau, cette variable est utilisée
pour générer le second niveau (le HTML) et pendant le rendu HTML par le
navigateur elle n'existe déjà plus.

Ce qui est présent dans l'attribut HTML data-* est utilisé pour générer le
troisième niveau le data JavaScript.

On ne peut pas utiliser les variables de template en JavaScript on utilise
le rendu JavaScript du Contenu HTML qui est généré par le temple Django.
Ce qui nous donne la séquence suivante.
(1 Django)
--[moteur de template Django]-->
(2 HTML )
--[parseur JavaScript ou JSON]-->
(3 JS)

pour que votre JavaScript fonctionne vous auriez du écrire dans le
template  :
<td class= "min" width="120" id="val1"
data-laval1='{"prop":{"val1":{{prop.val1}} } }'  ><TT> {{
prop.val1 }}  </TT> </td>

Ou {{prop.val1}} est remplacé par une valeur pendant le passage de
(1)vers(2).

Disons que {{prop.val1}} val 42
on obtient le HTML suivant :
<td class= "min" width="120" id="val1" data-laval1='{"prop":{"val1":42 }
}'  ><TT>42 </TT> </td>

ou pendant le passage de (2)vers(3) le contenu de l'attribut data-laval1 :
{"prop":{"val1":42 } }
sera interprété comme du JSON par le JavaScript :
$(this).data('laval1')


Faites attention aux guillemets (simple et double) ils sont très important.


Sébastien


http://sebastien.cheminel.com

Le 28 février 2012 11:36, sesame <pat.100 _AT_ hotmail.fr> a écrit :

> je n arrive pas atrouver la bonne syntaxe  j'ai du faire une erreur...ca
> marche pas..
>
>  $(".min").each(function(){
>        var recup=$(this).data('laval1').prop.val1;
>
>            });
>
>
>
>
> <td class= "min" width="120" id="val1" data-laval1= "prop.val1"  ><TT> {{
> prop.val1 }}  </TT> </td>
> _______________________________________________
> django mailing list
> django _AT_ lists.afpy.org
> http://lists.afpy.org/mailman/listinfo/django
>

Hors ligne

#8 28-02-2012 12:45:18

sesame
Membre
Inscription : 22-03-2011
Messages : 263

Re : script et variable de template

merci encore pour votre aide

Hors ligne

Pied de page des forums