Discussion :

[frieden]

Bonsoir à tous,

Je débute en Symphony et je rencontre un petit problème. En effet j'ai un formulaire qui marche bien 'register.html.twig' que j'aimerais afficher automatiquement dans une popup à l'ouverture de ma page d'accueil 'index.html.twig'. En Javascript, html c'est OK, mais dans l'environnement Symphony, je ne sais pas comment m'y prendre.

Quelqu'un aurait-il une piste pour moi. Merci d'avance .

[dukoid]

ça n'a aucun rapport avec Symfony.

tu utilises le composant d'une technologie que tu veux pour faire un modal, par exemple en bootstrap 3 :

http://getbootstrap.com/javascript/#modals

[frieden]

Merci pour votre réponse.

J'ai essayé avec bootstrap. Ca marche, la popup s'ouvre correctement avec un bouton. Mais ce que je voulais c'est qu'elle s'ouvre automatiquent au chargement de la fenetre index.html.twig. Donc, j'ai ajouté dans index.html.twig, bien avant le bloc body le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
{% block javascript %}
    window.onload = function() {
    $('#myModal').modal('show');
    };
{% endblock %}

Mais au lancement de la fenêtre, rien ne se passe. J'ai même essayé de debugger en remplacant $('#myModal').modal('show') par un alert('hello"). J'ai l'impression que mon code n'est pas du tout pris en compte. Savez-vous pourquoi?

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
{% block javascript %}
   <script type="text/javascript">
   ...
   ...

[frieden]

Bonjour,

Je l'ai également testé avec la balise script. Toujours pas de réaction. Voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
{% block javascript %}
    <script type="text/javascript">
        window.onload = function() {
            alert("hello");
            $('#myModal').modal('show');
        };
    </script>
{% endblock %}

Quel peut être le problème? J'ai aussi remarqué que l'import des 2 fichiers javascript (jquery-1.12.3.min.js et bootstrap.min.js) de bootstrap interférait avec les 3 fichiers javascripts initiaux de mon application (Ci-dessous les imports javascript). Cela a pour conséquence que l'animation du slideshow sur la page index qui fonctionnait correctement avant l'import des 2 derniers fichiers javascript ne fonctionne plus.

En effet, mon fichier index.html.twig hérite d'une page layout.html.twig avec avec pour contenu le bloc javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 {% block javascripts %}
 
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.min.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery-ui-1.7.2.custom.min.js')}}"></script>
        <script type="text/javascript" src="{{ asset('bundles/lbsecole/js/jquery.hoverIntent.minified.js')}}"></script>
        <script src ="{{ asset('bundles/lbsecole/js/jquery-1.12.3.min.js')}}" type="text/javascript"></script>
        <script src ="{{ asset('bundles/lbsecole/js/bootstrap.min.js')}}" type="text/javascript"></script>
        {% endblock %}

Quel peut-en être la cause de ces 2 problèmes. Je rappelle que je suis novice en javascript. Encore merci pour vos retours.

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
        {% block javascripts %}
            {{ parent() }}
 
            <script type="text/javascript">
 
                $(document).ready(function(){
                   alert("xxxxxxxxxx");
                 });
             ...
           ...

1)
le {% block javascripts %} est bien dans le block BODY ?

2) est ce qu'il y a une erreur javascript ? car toute erreur qui survient bloque l’exécution...
dans la console de firebug on peut le voir....

3)
verifier que jquery.js et bootstrap.js est bien chargé.
plusieurs façon de faire :
tu affiches le code source de la page et tu cliques sur les 2 liens : jquery.js et bootstrap.js
si ok alors le code source de jquery.js et bootstrap.js s'affichent