Modal popup avec symfony

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

Je sais pas si c'est le bon endroit pour poster le message mais vu que je bosse sur symfony je me suis dis que c'etait bien ici.

En fait mon problème est que je souhaite faire une popup "modal" qui va chercher un autre fichier twig.

Je mexplique, j'ai ma page "profile", et dans ma page profile j'ai un bouton qui me dirige vers une autre page " edit" , voila un exemple :

profile:
Pièce jointe 363131
edit:

Pièce jointe 363132

mais voila après plusieur essaie je ny arrive pas. j'ai deja créer un projet similaire avec "Angular" ou je pouvais ajouter la template que je voulais mais la je bloque.

voila comment j'ai essayer de faire :

profile:
Code:

1 2 3 4 <li> ****<a style="margin-bottom: -47px; margin-left: 100px" class="btn btn-primary" *******href="{{ path('fos_user_profile_edit') }}"* data-toggle="modal" data-target="#edit">Editer mon profile</a> </li>
edit:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Editer mon Profile</h4> </div> <div class="modal-body"> <div class="span4 offset2 cards"> {{ form_start(form, { 'action': path('fos_user_profile_edit'), 'attr': { 'class': 'fos_user_profile_edit' } }) }} {{ form_widget(form) }} <div> <input class="btn btn-success" type="submit" value="{{ 'profile.edit.submit'|trans }}" /> </div> {{ form_end(form) }} </div> </div> </div> </div> </div>
voila, pouvez vous maider s'il vous plait?

Salut,
Pour travailler avec popup , il faut utiliser ajax .

* Dans la page profile vous pouvez créer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

                        <!-- bouton pour modifier l profile-->

                        <a    
                            class="dt-button buttons-collection buttons-colvis btn btn-white btn-primary btn-bold"                     
                            data-toggle="modal"
                            data-target="#dataModal"
                            href="#"
                            >
                               
                                Editer mon profile

                        </a>
.
.
.

    <!-- dataModal -->

    <div id="dataModal" class="modal fade">  
        <div class="modal-dialog">  
            <div class="modal-content">  
                <div class="modal-header">  
                    <button type="button" class="close" data-dismiss="modal">&times;</button>  
                    <h4 class="modal-title" id="modal-title"></h4>  
                </div>  
                <div class="modal-body" id="modal_detail">  
                </div>  
                <div class="modal-footer">  
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
            </div>  
        </div>  
    </div>  
.
.
.

    <!-- code javascript-->

 <script type="text/javascript">
        $(document).ready(function () {
            $('.btn-bold').click(function () {
                $('#modal-title').html("Modifier profile");

                var url = '{{ path('fos_user_profile_edit') }}';

                $.ajax({
                    type: 'post',
                    url: url,
                    success: function (data) {
                        $('#modal_detail').html(data);
                        $('#dataModal').modal("show");
                    }
                });

            });


        });
</script>

* Essayer avec cette exemple.

22/03/2018, 14h34
dgmick

Bonjour, et merci pour avoir répondu ;) .

Je pensais pas utiliser Ajax ou Js vu que j'utilisais le fichier bootstrap.js etc...

Le code que tu as utiliser dans le

Code:



est aussi dans le fichier ou se trouve le bouton Edit ?

j'ai pas trop compris ce qu'il se passe du coup dans la page edit

vous pouvez créer votre propre code javascript .

Editer : peuvent être bouton , lien hypertext ... telle que son action est un affichage de popup (editer profile).
par exemple :

Code:

1
2
3
4
<a data-toggle="modal" data-target="#dataModal" href="#" id="editProfile">
Editer Profile
</a>

AVEC Modal :

Code:

1
2
3
4
5
6
7
8
9
 
 
 <!-- dataModal -->
 
    <div id="dataModal" class="modal fade">  
        <div class="modal-dialog"> 
         ... 
       </div>  
    </div>

Déja avec simple click sur le lien , popup automatiquement ouvert , si on a pas de code jasvscript , modal affiché vide .

Donc il faut ajouter un évenement qui appelle automatiquement l'action edit de fosuser .

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
 $(document).ready(function () {
            $('#editProfil').click(function () {

              //Afficher Le titre de popup
                $('#modal-title').html("Modifier profile");

                //path de l'action editer de fos user : formulaire de modification
                var url = '{{ path('fos_user_profile_edit') }}';

                $.ajax({
                    type: 'post',
                    url: url,
                    success: function (data) {
                       // résultat de action edit : formulaire inclure dans popup
                        $('#modal_detail').html(data);

                       //Affichage de nouvelle popup
                        $('#dataModal').modal("show");
                    }
                });

            });


        });
</script>

Merci beaucoup je commence a comprendre,
mais j'ai un petit problème , en ajoutant le code Js dans le fichier twig je recois ce message d'erreur dans ma console ( Uncaught ReferenceError: $ is not defined at (index):136 ) , je peux pas mettre le code JS dans un fichier JS vu que l'URL que je declare dans le code Js est un bou de code qui utilise une route twig. j'ai essayer de mettre le JS dans mon block javascript comme cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- JavaScript Start -->
{% block javascripts %}
    <!-- jQuery -->
    <script src="{{ asset('js/jquery.js') }}"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.js') }}"></script>
    <script>
        $(document).ready(function () {
            $('#editProfile').click(function () {
                //Afficher Le titre de popup
                $('#modal-title').html("Modifier profile");
                //path de l'action editer de fos user : formulaire de modification
                var url = '{{ path('fos_user_profile_edit') }}';
                $.ajax({
                    type: 'post',
                    url: url,
                    success: function (data) {
                        // résultat de action edit : formulaire inclure dans popup
                        $('#modal_detail').html(data);
                        //Affichage de nouvelle popup
                        $('#dataModal').modal("show");
                    }
                });
            });
        });
    </script>
{% endblock %}
<!-- JavaScript End -->

mais je recois un autre message d'erreur qui est

Code:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/

j'ai éplucher google pour trouver une solution mais j'ai rien trouver lol :?

pour que votre code être joli et vérifiable ne mettre pas le code dans la page main ou base.html.twig (qui regroupe la squelette de votre page ) .

* créer ua autre bloc de javascript pour les fonctions dépendantes de leurs pages .
Laisser ce bloc vide dans la page base.

Code:

1
2
3
{% block mesJavascripts %}
{%endblock%}

* dans la page profile :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% block mesJavascripts %}
<script>
        $(document).ready(function () {
            $('#editProfile').click(function () {
                //Afficher Le titre de popup
                $('#modal-title').html("Modifier profile");
                // ATTENTION POUR LES apostrophes ET les guillemets
                var url = "{{ path('fos_user_profile_edit') }}";
                $.ajax({
                    type: 'post',
                    url: url,
                    success: function (data) {
                        // résultat de action edit : formulaire inclure dans popup
                        $('#modal_detail').html(data);
                        //Affichage de nouvelle popup
                        $('#dataModal').modal("show");
                    }
                });
            });
        });
    </script>
{%endblock%}