Page 1 sur 1

Modifier un élément d'une datatable (Php - Js)

Posté : 10 avr. 2022, 19:05
par 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 : Tout sélectionner

<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 : Tout sélectionner

$(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...

Re: Modifier un élément d'une datatable (Php - Js)

Posté : 12 avr. 2022, 10:50
par webmaster
Bonjour

Pourquoi ne pas ajouter un ID à chaque ligne avec une forme de ce type :
<tr id="ligne-{% user.id %}" data-id="{% user.id %}">

Cela permettrait de retrouver facilement la bonne occurence de la table et son id de user.

Re: Modifier un élément d'une datatable (Php - Js)

Posté : 12 avr. 2022, 11:58
par superjony
Problème résolu