Problème de chargement de script

CedLP
PHP Symfony

Bonjour,

Voila je rencontre un petit problème avec mon code. Mon Js ne se charge pas.

Ce que je fais

A vrai dire si je met la balise {% block javascript %} avant la balise {% block body %} mon js tous se charge bien mais si je met la balise javascript tel q'elle est sur le code ci dessous bah rien ne marche.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" type="image/png" href="{{ asset('Image/front/logo/logo_rogner.jpg') }}" />

        {#<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>#}
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
    </head>

    <body>

    {% block body %}{% endblock %}
        <div id="toTop" class="btn btn-info" style="display: block;"><span class="fas fa-chevron-up"></span></div>
        <footer class="footer mt-auto py-3 bg-light" style="margin-top: 20px!important;">
            <div class="container text-center">
                <span class="text-muted">© Copyright Onerba</span>
            </div>
        </footer>
    {% block javascripts %}
        {{ encore_entry_script_tags('app') }}
    {% endblock %}
    </body>
</html>

Ce que je veux

Je comprend que le js a besoin de se charger avant le chargement de contenue de la page mais, si je fais cela il prendra trop de temps lors du chargement.

Ce que j'obtiens

si je garde ce code bah j'ai undifined $ jquery comme erreur

5 réponses

Lartak
Réponse acceptée

Au fait je suis entrain de mettre sur mon site des graphiques utilisant Highcharts graphique que j'ai installer avec le bundle ob/Highcharts.
Et à ce que je comprend pour lui le jquery doit être charger avant la page voilà pourquoi cela ne marche pas.

Dans ce cas là, fais en sorte de charger jQuery dans la balise head et tous les autres fichiers JavaScript, que ce soit des librairies externes, que ton/tes fichier(s) perso(s) juste avant la fermeture de la balise body, de cette manière ça alègera le chargement du JavaScript au moment du chargement de la page.

Lartak

Bonjour.

Je comprend que le js a besoin de se charger avant le chargement de contenue de la page mais, si je fais cela il prendra trop de temps lors du chargement.

Non ce n'est pas obligatoire, il est même préférable de charger les fichiers JavaScript juste avant la fermeture du body de manière à éviter que le JavaScript ralentisse le chargement des pages, après tout dépend de ton code JavaScript, si tu l'as réalisé de manière à ce que son contenu puisse fonctionner après que le chargement de la page soit terminé, tu n'auras pas de problème, dans le cas contraire tu auras forcément des disfonctionnements.
Il te faut également penser que l'orsque tu charges des fichiers JavaScript juste avant la fermeture de la balise body, il te faut éviter de définir du code JavaScript dans le code HTML, du genre :

<body onload="masuperfonction()">
    <!-- ... -->
  <script type="text/javascript" src="leFichierOuSeTrouveMaSuperFonction.js"></script>
</body>

si je met la balise javascript tel q'elle est sur le code ci dessous bah rien ne marche.

Que veux-tu dire par rien ne marche ?
Est-ce que le/les fichier(s) se charge(nt) ou pas ?
Ou est-ce le code JavaScript qui ne s'exécute pas ?
Penses à bien vérifier la console du navigateur, que ce soit lorsque le(s) fichier(s) est/sont chargé(s), que lorsque tu fais une action qui fait appel à du code JavaScript d'un des fichiers.

CedLP
Auteur

Au fait si je fais comme sur mon code là cela ne marche pas et j'ai cette erreurs

Uncaught ReferenceError: $ is not defined at (index):537

Pourtant si je mes {{ encore_entry_script_tags('app') }} entre la balise head comme ceci

<head>
{{ encore_entry_script_tags('app') }}
</head>

Tous marche très bien.
Au fait je suis entrain de mettre sur mon site des graphiques utilisant Highcharts graphique que j'ai installer avec le bundle ob/Highcharts.
Et à ce que je comprend pour lui le jquery doit être charger avant la page voilà pourquoi cela ne marche pas.
Je n'ai pas fait de modification sur du js venans de là mais j'ai juste directement utilisé ce qui a été importé avec Yarn Highchart.

Digivia

Helllo,

Dans webpack.config.js, as-tu bien Encore.autoProvidejQuery() ?

Dans ton entry, il faut bien appeler Jquery :

app.js

const $ = require('jquery') // ou Import $ from 'jquery'
// Provide JQuery everywhere
global.$ = global.jQuery = $

Normalement webpack gère ça de manière correcte...

CedLP
Auteur

Salut les amis, oui j'ai bien tous ce que vous ditent là activer et j'ai déjà fait comme ce que tu as fait là Digiva, au fait le problème je crois viens du fait que les graphique doivent charger bien avant le chargement de la page.
Du coup j'ai séparer le script qui charge jquery et j'ai ajouter un Entry dans le webpack que j'ai appeler app_front_jquery.js.

.addEntry('app_front_jquery', './assets/js/front_js/app_front_jquery.js')

Puis je l'appel dans la balise head comme ça au moin la page ne devra charger que le jquery comme Lartak l'a dit.

<head>
  #............................................
    {% block stylesheets %}
        {{ encore_entry_link_tags('app_front') }}
        {{ encore_entry_script_tags('app_front_jquery') }}
    {% endblock %}
</head>

Merci à vous.