Scripts Javascript multiples dans TWIG impossible ?

Par Jean Sérien, il y a 2 ans


Bonjour à tous,

Lorsque je mets plus d'un script js dans Twig, même si je les mets en "Defer" seul l'un d'entre eux est actif, j'ai pourtant aussi implémenté des window.onload dans ceux-ci...

Pour faire marcher et tester un script je suis donc obligé de "commenter" l'autre sous peine de blocage...
Aucun message d'erreur n'apparait ...

A noter que mon projet incluait webpack Encore que j'ai désinstallé... (Cela viendrait il de là ? des traces restantes ?)

Merci d'avance pour votre aimable aide.

``{% extends "base.html.twig" %}
{% block title %}Liste des véhicules
{% endblock %}
{% block body %}

<div class="main">

    <h1 class="titre-principal">Liste des véhicules</h1>

    {% if is_granted(['ROLE_ADMIN']) %}
        <a href="{{path('app_vehicules_creer_vehicule')}}" class="btn btn-primary">Créer un nouveau véhicule</a>
    {% endif %}

    <p class="resultat-filtre">Total véhicules dans la base =
        {{totalVehicules}}</p>
    <p class="resultat-filtre">Résultats filtre actif =
        {{totalVehiculesFiltered}}</p>

    {# Sliders double range #}
    {{ include('_partials/_sliders.html.twig') }}

    <div
        class="wrapper">
        {# Filtre multicritère : #}
        <div class="filtres">

            <form
                id="filters" class="filtersForm">

                {# Filtre sur type de véhicule #}
                <fieldset>
                    <legend>Type :</legend>
                    {% for  type in typesVehicules %}
                        <div class="wrapper-input">
                            <input type="checkbox" name="types[]" id="types{{type.id}}" value="{{type.id}}" class="filtreTypes">
                            <label for="types{{type.id}}">{{type.nomtype}}</label>
                        </div>
                    {% endfor %}
                </fieldset>

                {# Filtre sur marques de véhicules #}
                <fieldset>
                    <legend>Marque :</legend>
                    {% for  marque in marquesVehicules %}

                        <input type="checkbox" name="marques[]" id="marques{{marque.id}}" value="{{marque.id}}" class="filtreMarques">
                        <label for="marques{{marque.id}}">{{marque.marque}}</label>

                    {% endfor %}
                </fieldset>

                <input type="hidden" name="page" value="{{page}}">
            </form>
        </div>

        <div
            class="cards-container" id="content">

            {# Contenu généré en Ajax #}
            {{ include('vehicules/_content.html.twig') }}
        </div>
    </div>
</div>
    {% block javascripts %}
        <script src="{{asset('assets/js/annonces.js')}}" type="module" defer></script>
        <script src="{{asset('assets/js/filters.js')}}" type="module" defer></script>
    {% endblock %}

{% endblock %}
``

3 réponses

AdBouli, il y a 2 ans

Bonjour,

Met ton block javascripts à l'exterieur de ton block body, et rajoute {{ parent() }} au debut du block javascripts pour ne pas écraser les scripts que tu as inclus dans le block javascripts du template base.html.twig.

Soundboy39, il y a 2 ans

Hello,

J'aurais plutôt mis le JS dans la <head>, d'ailleurs c'est à ça que sert l'attribut "defer" (sinon il faut le mettre tout en bas du document, avant la fermeture du <body>).

En ce qui concerne ton problème, il faudrait nous donner plus d'info, si tu a un script qui bloque l'autre, c'est peut être plus un problème Javascript qu'un problème Twig.
Est-ce que tu a des warnings ou des erreurs dans la console JS ?

Jean Sérien, il y a 2 ans

Merci pour vos réponses,

Je pense que tout va fonctionner maintenant, j'ai tellement fait d'expériences ... lol
Si ça se reproduit je vous le signalerais ...

Merci en tous cas