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">×</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 %}
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);
});
});
});
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...