Retarder le refresh de l'affichage

1. Ta vue Django envoi les données a ton template côté serveur.
2. Le template s'initialise avec les données et s'envoie au client.
3. Le JS se met en route côté client (à ce moment précis tu n'a plus de tableau Python)

Donc on ne peut pas garder le tableau dans le gabarit juste pour avoir la traduction multi-langue. Quand le JS va tourner il ne sera déjà plus la.

Un tableau Python non mais un tableau JS oui !

1
2
3
4
5

<script type="text/javascript">
var tableau = ['{% trans "foo" %}', '{% trans "bar" %}'];
</script>

<script type="text/javascript" src="static/scripts.min.js" />

Et si t'as une apostrophe dans ton i18n, t'es mort.

Bien vu.

Puis du coups mon JS en revient encore une fois dépendant de mon moteur de template. Donc on ce remord la queue..

C'est un soucis fréquent dans les applications "modernes".

Soit tu découples toute la logique (entièrement) :

Le rendu côté serveur s'occupe uniquement du rendu statique, point barre, et côté client TOUTE la communication passe par des APIs (REST, le plus souvent), y compris l'i18n, tu lui dédies une API.

Soit tu adoptes une solution hybride (comme tu étais parti pour le faire), mais je ne comprends toujours pas pourquoi tu as besoin de définir une fonction javascript de traitement à l'intérieur d'une boucle for rendue côté serveur.

Pour moi, le serveur rend des blocs, éventuellement en "hidden" parfaitement identifiés (avec des id quoi) et 1 SEUL SCRIPT (un seul !). Ensuite la logique JS est dans ton script et lui seul (quand tu cliques sur le div avec tel id, tu ouvres le div avec tel autre id). Et c'est là que je comprends pas ce que ton projet fait ou doit faire. Mais clairement, tu t'y prends mal. C'est pas censé d'avoir autant d'éléments scripts que tu as d'éléments dans ta boucle for.

Bah le truc c'est que mon script est un chart google, il m'en faut donc un par partie.

1. Soit je file un tableau a mon JS qui me crée un chart par élément
2. Soit je crée directement un chart par élément depuis mon template

Moi j'avais pris la deuxième option, puisque le tableau était déjà entre mes mains dans le template.

Je veut bien te croire mais je n'ai pas compris comment marche ta dépendance. Pour dire vrai je bloc même à $monTableauJson dont je ne vois pas l'initialisation :/

C'est parce qu’effectivement je ne l'initialise pas, dans le code que tu as donné il n'y a que le template… donc je fais de même avec mon exemple parceque j'imagine que tu es capable d'initialiser tes variables

$monTableauJson c'est une variable fictive qui contiens une chaine de caractère d'un objet json.

1
2
3
4
5

<?php

$monTableau = Array("foo" => "bar");
$monTableauJson = json_encode($monTableau);
// Puis on s'en sert dans mon exemple

Evidement ici si la boucle tourne 4 fois on va mettre 4 fois le même tableau… ce qui sert à rien, il faut évidement adapté pour que $monTableauJson soie lui même un tableau de façon à ce que la boucle puisse faire $monTableauJson[$i] afin d'avoir un tableau Json différent à chaque itération.

Concernant la dépendance… comme l'on dis les autre personnes dans ce sujet, il faut bien comprendre une chose quand tu utilise du javascript et un langage serveur. Ils ne travaille pas en même temps !!!

Concrètement, d'abord Django fait tout ce qu'il à a faire, et seulement quand Django à fini (donc il n'existe plus) Javascript commence à fonctionner, tu dois donc considéré javascript uniquement avec du html et c'est tout, en html il y a la balise <script src="url"></script> qui te permet d'appeler un fichier javascript. C'est plus propre de faire ainsi comme sa d'un coté tu n'a que le html et dans un fichier séparer tu as tout le code logique en js.

Et éventuellement, quand tu dois alimenter des données js tu fais justement comme dans mon exemple avec une balise script insérée dans le html qui contient les données.

As-tu compris ?

D'accord je comprend mieux ton exemple maintenant.

J'avais bien compris tout ces principes, il n'y avait plus de problème a ce niveau la. Cependant je te remercie pour la méthode JS document.addEventListener('DOMContentLoaded', function() qui est effectivement intéressante.

Je vais essayer de mettre ça en place. Mon JS sera ainsi indépendant de mon langage de template.

Cependant comme je l'ai déjà dit a d'autre, cela ne risque pas d'améliorer mes performances, le problème de l'affichage est donc toujours d'actualité.

Pour moi ta question n'a tout simplement aucun sens, c'est pour sa que personne n'arrive à répondre.

En informatique on tente toujours d'avoir le résultat le plus rapidement possible, si tu commence à te poser des question sur "comment ralentir" c'est que ta méthode est pas bonne… et que la question non plus du coup.

Si je résume bien, tu veux dans l'accordéon afficher une miniature (enfin, de la taille de l'accordéon) d'un graphique.
Ton problème est que tu ne connais pas la dimension du graphique sans "déplier l'accordéon".

C'est là que tu te trompe d'après moi, tu dois parfaitement pouvoir déterminer la hauteur de l'élément sans avoir à le déplier. Déplie le une fois, utilise un débogueur et regarde la hauteur de l'élément. Fait des tests dans différentes résolutions je suis prêt à parié que cette hauteur sera constante.

A partir de là il suffit de donné en paramètre à l'url de google la hauteur, non pas basé sur un élément mais en tant que constante et le tour sera joué.

@La source

La hauteur est fonction du nombre de lignes, le nombre de lignes est fonction du nombre d'instance saisi par l'administrateur. La hauteur n'est donc pas prêt d'être fix… Cependant ça j'ai déjà dit que je l'avais résolu puisque j'ai fait usage d'une constante multiplié par le nombre de lignes.

Le problème reste la largeur, mais ça, désolé de le répéter, ce n'est pas possible de la deviner.

Enfin je ne souhaite pas ralentir, mais simplement camouflé une étape longue. En informatique je sais qu'on essaye de faire rapide, mais parfois on arrive plus a faire mieux et alors on se contente de faire un affichage clair pour l'utilisateur pour qu'il le comprenne (barre de chargement, icone de chargement, etc., etc.)

Ici ce que je demandais c'est : "Comment peut-on faire pour camoufler une page avec une icone de chargement ou retarder l'affichage d'une page?"

Je ne veut pas ralentir l'affichage, juste ne pas perdre mon utilisateur…

Bon… prenons les problèmes dans l'ordre alors car j'ai l'impression d'avoir raté une marche.

Pour retarder l'affichage: Tu peux pas. L'affichage se fait quand il est demandé ni plus ni moins, ce que tu peux faire en revanche c'est retarder la demande d'affichage… le truc c'est que c'est pas toujours évident de déterminer ce qui justement provoque l'affichage, honnêtement je pige pas totalement le code js que tu as donné mais j'aurai tendance à dire que c'est elem.click(); à la ligne 45.

Pour le camouflage… bon là je comprend parfaitement ce que tu veux dire… déjà pour le principe comment sa marche.

La première étape c'est lorsque l'on sais que l'on va avoir un traitement long c'est de mettre en place une animation (ou bêtement une image) avant de commencer ton traitement long.

Une fois fais tu exécute ton traitement long qui ne doit rien afficher à l'écran pendant son déroulement. Une fois le traitement terminé (ce traitement peut appeler une procédure de callback) là on remplace l’animation de chargement par le résultat.

Ton problème est que toi, tu veux afficher le résultat quelque par pour justement pouvoir mesurer la largeur (je continue de penser que c'est un mauvais plan de bataille mais faudrait que j'analyse vraiment de bout en bout ce que tu souhaite faire et surtout que j'aille lire les doc des dépendances que tu utilise. Du coup je vais te laisser juger).

La solution c'est de créé un div quelque par hors du flux (css position absolute) et hidden (pour pas que sa se voie à l'écran). Tu joue tes différentes animation qui du coup ne seront pas visible, tu mesure ce que tu as besoin de mesurer, et une fois ce que as fini tu déplace le contenu de ce div caché là ou tu souhaite réellement afficher ton accordéon.