11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
J'utilise les framework JSF (2.2) et PrimeFaces (6.1.2) dans une appli web.
Dans une page xhtml, j'affiche deux graphiques de chart.js.
Les graphiques ne peuvent s'afficher correctement qu'après le load de la page par window.onload (sinon, je me retrouve avec une légende de graphique en haut qui cache le titre, les infos bulles ne sont pas celles que j'ai définies etc).

J'ai donc ce code dans le head de la page pour déclencher l'affichage des graphiques :

<script>
            window.onload = function ()
            {
                drawChart('espaceStandardGraphique1', 'idCanvasGraphique1');
                drawChart('espaceStandardGraphique2', 'idCanvasGraphique2');
            };
        </script>


La page est appelée depuis une autre par :

<p:commandLink value="Espace standard" 
                       action="pageGraphiqueEspaceStandard.xhtml"/>


Le problème est que le window.onload de la page ne s'éxecute pas (rien ne s'affiche).
Pour que le window.onload de la page s'éxecute bien, je dois ajouter 'ajax=false' à l'appel de la page :

<p:commandLink value="Espace standard" 
                       action="pageGraphiqueEspaceStandard.xhtml"
                       ajax = "false"/>


Ici tout se passe bien, sauf qu'une page blanche s'affiche brièvement avant d'afficher la page et ses deux graphiques.
Il y a donc un effet flash très désagréable, d'autant que mon fond de page est foncé.
Comment faire pour supprimer ce flash ?

Notes :

J'obtiens le même flash avec le commandLink de JSF.

Si je remplace window.onload par
window.addEventListener('DOMContentLoaded', function () ...
ou
$(document).ready(function () ...
les graphiques ne s'affichent pas correctement (légende en haut qui cache le titre, les infos bulles ne sont pas celles que j'ai définies etc
Modifié par denisduval75 (22 Nov 2019 - 16:16)