'How to pass a parameter in php route
I need to edit a row in a datatable , the problem is the edit Modal ,when I use id's I click the edit button,the modal opens and retrieves the data of my table but I can't edit the datas, except the first row of my datatable that I can edit.
when I use classes if I edit the last row of my table it will modify the first row but with the data of the last row.
-> The Controller to get a user by id and edit :
$controllers->post('/modif', function (App $app,Request $request) {
try{
$ListeUser =$app->service('User')->getUser($request->get('id'));
$ListeUser->setNom($request->get('nom'));
$ListeUser->setPrenom($request->get('prenom'));
$ListeUser->setAdresse($request->get('adresse'));
$ListeUser->setLogin($request->get('login'));
$ListeUser->setPassword($request->get('password'));
$ListeUser->setAcces($request->get('acces'));
$ListeUser->setArchive($request->get('archive'));
$app->sauvegarder($ListeUser);
return new Response('sauvegarde',200);
} catch (\Exception $ex) {
return new Response($ex->getMessage(),400);
}
})->bind('modif')->before($this['loginok'])->before($this['isAdmin']);
This is the modal in twig :
{% for user in users %}
<div class="modal fade" data-user-id="{{ user.id }}" role="dialog" tabindex="-1" id="modalModifCl">
<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',{'id':user.id})}}" 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" id="nom" 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" id="prenom" 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" id="adresse" 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" id="login" 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" id="password" name="password" placeholder="Mot de passe" type="password" value="{{user.password}}">
</div>
</div><!-- archive caché-->
<input class="form-control" id="archive" name="archive" placeholder="archive" type="hidden" value="{{user.archive}}"> <!-- acces caché-->
<div class="form-group">
<div class="cols-sm-10">
<select class="form-control" id="acces" 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 %}
The jQuery :
$(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);
});
});
});
Edit: Here is the datatable code in twig :
<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" >
{%if app.isAdmin %}
<button id="bt-{{user.id}}" data-id="{{user.id}}" class="btn btn-primary act btClient" style="background:#0088cc; font-size:0.4vw;" title="Nouveau client">
<span class ="glyphicon glyphicon-plus" style="font-size:1vw;"></span></button>
{%endif%}
<!-- 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 Details client-->
<button style="font-size:0.4vw; background:#0088cc;" class="btn btn-info" title="Détails">
<span class ="glyphicon glyphicon-search" style="font-size:1vw;"></span></button>
<!-- Bouton Ajouter compte client-->
<button id="bt-{{user.id}}" data-id="{{user.id}}" class="btn btn-primary act btCpCl" style="background:rgba(0, 136, 204, 0.5); font-size:0.4vw;" title="Nouveau compte">
<span class ="glyphicon glyphicon-plus" style="font-size:1vw;"></span></button>
<!-- 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>
Solution 1:[1]
In Laravel, which is based on Symfony, you would pass parameters in named routes like this
<form
method="GET"
action="{{ app.route('getuser',['id' => $id ])}}"
>
...
</form>
Solution 2:[2]
The problem is that the user variable doesn't exist when you are running
form class="form-horizontal" id="form3" action="{{ app.route('getuser',{'id':user.id})}}" method="get">
A solution would be to create the modal container for each of your users
{% for user in users %}
<div class="modal fade" 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('getuser',{'id':user.id})}}" class="form-horizontal" method="get" name="form3">
<input name="id" type="hidden" value="">
<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" type="button">Valider</button>
</div>
</div>
</div>
</div>
{% endfor %}
You could then show the correct modal by adjusting the javascript
$('.btMod').click (function(e){
e.preventDefault();
$('.modal[data-user-id="'+$(this).data('id')+'"]').modal({
show:true,
backdrop:'static'
});
});
sidenote
Your code is generating a lot of HTML elements with the same id, this is not correct and will make your JavaScript not work correctly when trying to refer to these id's.
I did not edit out these id's in the code above but you definitely should.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | lordisp |
| Solution 2 |