Utilisation d'une boucle Jinja2 avec une alerte javascript

J'ai essayé de créer une page Web où, après avoir reçu la saisie de l'utilisateur, elle afficherait l'historique de toutes les entrées utilisateur après avoir appuyé sur submit, mais cela fonctionne comme prévu. Cependant, je voulais mettre en place une boîte d'alerte qui montrerait des informations supplémentaires. Cependant, comme tout le reste est imprimé correctement, puisque la boîte d'alerte utilise un événement onclick, il ne sortirait que le dernier échantillon d'entrée de l'utilisateur.Utilisation d'une boucle Jinja2 avec une alerte javascript

<!doctype html> 
<html> 
<head> 
    <title>Enrolment page</title> 
</head> 
<body> 
    {% if all_users %} 
     {% for user in all_users %} 
      <h1> Hi, {{ user[0] }}) </h1> 
      <button onclick="myFunction()">Details</button> 
      <script> 
       function myFunction() { 
        alert("{{ user[1] }}, {{ user[2] }}"); 
       } 
      </script> 
     {% endfor %} 
    {%else%} 
     No users to show 
    {% endif %} 
</body> 
</html>

Dans mon code, all_users est l'information provenant d'un fichier csv, mais cela fonctionne très bien. Mon seul problème est l'alerte ne montre pas l'information que je veux. Y at-il un moyen de stocker chaque ensemble de détails de l'utilisateur dans chaque script pour imprimer chaque bouton, car il affiche uniquement le dernier ensemble de détails de l'utilisateur.

Source

2017-09-06 Christian Peterson

Si je comprends bien votre intention, je pense que vous avez trop de choses à l'intérieur de la boucle Jinja2, c'est-à-dire que le code qui répète ne devrait pas être répété. Plutôt que de simplement regarder le résultat fonctionnel produit par ce code, essayez de regarder la source html qui est produite et commencez le débogage à partir de là. –

@TimD Quelle partie voulez-vous dire ne devrait pas être répétée? –

Si vous avez N lignes dans all_users, ce code produira une source html avec "Hi, user [0]" N fois, produira N boutons et N fonctions de script, etc .; Je pense, si je suis correctement. –

Vous pouvez lier le user[0] et user[1] dans le myFunction() appel comme:

{% for user in all_users %} 
    <h1> Hi, {{ user[0] }}) </h1> 
    <button onclick="myFunction('{{user[1]}}, {{user[2]}}')"> 
     Detail 
    </button> 
{% endfor %}

changer ensuite la fonction de:

function myFunction(users) { 
     alert(users); 
}

Source

2017-09-06 00:49:39

Ça ne marche pas, y a-t-il quelque chose qui me manque? –

J'ai retesté et fait un dernier changement et tout fonctionne. Je crois que c'est ce que vous cherchez. Modification de l'original maintenant Placez le script de la fonction en dehors de la balise body. –

Pour travailler cela dans Jinja2, vous pouvez essayer d'utiliser une variable de chaîne et en ajoutant chaque valeur comme dans (code non testé):

<!doctype html> 
<html> 
<head> 
    <title>Enrolment page</title> 
</head> 
<body> 
    {% if all_users %} 
     {% set AllUserList = "" %} 
     {% for user in all_users %} 
      {% set AllUserList = AllUserList + user[1] + ", " + user[2] + "\n" %} 
      <h1> Hi, {{ user[0] }}) </h1> 
      <button onclick="myFunction()">Details</button> 
      <script> 
       function myFunction() { 
        alert("{{ AllUserList }}"); 
       } 
      </script> 
     {% endfor %} 
    {%else%} 
     No users to show 
    {% endif %} 
</body> 
</html>

Source

2017-09-06 01:31:08

jinja2.exceptions.UndefinedError: l'objet liste n'a pas d'élément 3. Comment résoudre ce problème? –

J'ai modifié le code plus loin. –

Il semble que cela fonctionne dans le code, mais le bouton ne répond pas. –

Utilisation d'une boucle Jinja2 avec une alerte javascript

Répondre

Questions connexes