Discussion :

[superjony]

Bonjour,

J'ai un problème avec mon application, je ne peux modifier que la première ligne ou la dernière ligne de ma datatable.

Je ne comprends pas pourquoi, ça fait plusieurs semaines que je suis sur ce probléme et je demande votre aide.
Je pense à un problème de javascript avec les modals.

J'utilise le framework Symfony.

Voici mon code html avec datatable et le modal :

Code HTML :

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

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<div class="row" style="  display:flex;  margin-left: auto; margin-right:auto; width:100%; margin-bottom: 5vw; margin-top:1vw;
         border:1px solid #b1e7e7; background:rgba(102, 204, 255, 0.05);"> 
        <div class="col-lg-12" > 
 
           <table id="user" class="display" > 
 
 
            <!-- TABLE USER -->  
            {% for user in users %}  
            <tr> 
                <td> {{user.id}} </td> 
                <td> {{user.nom}} </td>                  
                <td> {{user.prenom}} </td> 
                <td> {{user.adresse}} </td> 
                <td> {{user.login}} </td>                     
                <td> {{user.AccesString}} </td>
 
                <!--BOUTONS DANS DATATABLE-->
 
                <td>
                   {%if app.isAdmin %}    
 
 
                       <!-- Bouton Modif client-->
                      <button id="bt-{{user.id}}" data-id="{{user.id}}" class="btn btn-primary act btMod" style="background:rgba(0, 136, 204, 0.5); font-size:0.4vw;" title="Nouveau compte">
                       <span class ="fa fa-pencil" style="font-size:1vw;"></span></button> 
 
                       <!-- Bouton Liste des comptes par client-->
                         <a style="font-size:0.4vw; background:rgba(0, 136, 204, 0.7);" href="{{app.route('listeCp',{id:user.id})}}" class="btn btn-info" title="Liste des comptes">
                         <span class ="glyphicon glyphicon-th-list" style="font-size:1vw;"></span></a>
 
                         {%endif%}
                 </td>
            </tr>
           {% endfor%}
    </table>
    </div>    
            </div>
 
 
<!-- MODAL MODIFIER CLIENT -->
{% for user in users %}  
           <div class="modal fade modalModifCl" data-user-id="{{ user.id }}" role="dialog" tabindex="-1" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modifier Client</h4>
            </div>
 
            <!--FORMULAIRE -->
            <div class="modal-body">
                <!-- APPEL FONCTION -->
              <form action="{{app.route('modif')}}" class="form-horizontal form3" method="post" >
 
                  <input id="idClient" name="id" type="hidden" value="{{user.id}}">
 
                  <div class="form-group">
                        <label class="col-sm-2" for="nom">Nom</label>
                        <div class="col-sm-10">
                            <input class="form-control"  name="nom" placeholder="Nom" type="text" value="{{user.nom}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2" for="prenom">Prénom</label>
                        <div class="col-sm-10">
                            <input class="form-control" name="prenom" placeholder="Prénom" type="text" value="{{user.prenom}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2" for="adresse">Adresse</label>
                        <div class="col-sm-10">
                            <input class="form-control" name="adresse" placeholder="Adresse" type="text" value="{{user.adresse}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2" for="login">Login</label>
                        <div class="col-sm-10">
                            <input class="form-control" name="login" placeholder="Login" type="text" value="{{user.login}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2" for="password">Mot de passe</label>
                        <div class="col-sm-10">
                            <input class="form-control"name="password" placeholder="Mot de passe" type="password" value="{{user.password}}">
                        </div>
                    </div><!-- archive caché-->
                    <input class="form-control"  name="archive" placeholder="archive" type="hidden" value="{{user.archive}}"> <!-- acces caché-->
                    <div class="form-group">
                        <div class="cols-sm-10">
                            <select class="form-control"  name="acces">
                                <option value="2">
                                    Client Prive
                                </option>
                                <option value="3">
                                    Client Pro
                                </option>
                                <option value="1">
                                    Admin
                                </option>
                            </select>
                        </div>
                    </div>
                </form>
            </div><!--BOUTONS FERMER ET VALIDER DANS FORMULAIRE MODIFIER CLIENT-->
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">Fermer</button>
                <button class="btn btn-primary validerMod" type="button">Valider </button>         
            </div>
        </div>
    </div>
</div>
 
{% endfor %}

Voici le javascript :

Code :

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

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
$(function () {
     /* MODAL Modifier client Privé */
       $('.btMod').click (function(e){
        e.preventDefault();
        $('.modal[data-user-id="'+$(this).data('id')+'"]').modal({
        show:true,
        backdrop:'static'
        });
        });
 
 
       /* MODAL BOUTON VALIDER FORMULAIRE MODIFIER CLIENT PRIVE */
        $('.validerMod').click(function(e){
       e.preventDefault();
       $.ajax({
        url:$('.form3').attr('action'),
        type: $('.form3').attr('method'),
        data: $('.form3').serialize()
 
        }).done(function(data){
        $('.modalModifCl').modal('hide');
 
        window.location.href='{{app.route('clientsPrive')}}';
        alert("Client modifié avec succès !");                             
 
        }).fail(function(data){
        console.log(data.responseText);
        });
        });
});

Si j'utilise un id dans la balise form du modal alors je peux modifier uniquement la première ligne de la datatable et si j'utilise une classe je ne peux modifier que la dernière ligne.

Aucune erreur dans le navigateur, aucun problèmes d'id multiple non plus, mais je pense que la boucle for juste avant le modal fout le bordel...
C'est un casse tête et je manque d'expérience en Javascript

[mathieu]

qu'est ce qui ne fonctionne pas ? il n'y a pas de réaction quand vous cliquez sur le bouton ?

[superjony]

Résolu