Salut à tous,
je suis nouveau,
JJe recherche une solution d'interface utilisateur et je me demande si ce qui suit peut être réalisé et comment.
Par exemple, j'ai une page de création de produit et sur cette page, nous avons une liste déroulante avec des catégories. Je souhaite ajouter une catégorie qui n'est pas dans la liste déroulante via un modal. Après l'insertion, je souhaite mettre à jour la liste déroulante et sélectionner la cartegorie insérée.
Est-ce possible et comment puis-je y parvenir ?
Merci
9 réponses
Si tu bloques, dis nous à quelle étape tu es, ce que tu as essayé de faire et on pourra te guider
Hello,
Il va falloir utiliser du javascript ici.
Dans un premier temps, il va falloir créer la modale avec le formulaire.
J'imagine que tu ne souhaites pas de rechargement de page, il faudra donc se tourner du côté des requêtes Javascript pour soumettre ton formulaire de création de catégorie. (Ajax, Fetch).
Une fois que la requête sera partie et ta catégorie créée, tu pourras envoyer en réponse son ID et sa valeur.
A réception de ces informations, tu pourras ajouter dynamiquement ta nouvelle catégorie au select déjà présent (voir https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add#append_to_an_existing_collection) et peut être même la sélectionner directement si tu le souhaites.
Ta fonctionnalité sera donc découpée en plusieurs parties :
- Création de la modale de création de catégorie
- Gestion de la soumission du formulaire via le javascript
- Gestion du formulaire côté PHP pour créer la catégorie et renvoyer une réponse JSON
- Récupération du retour de la soumission et ajout de la valeur au select présent sur ta page.
J'espère avoir été clair et avoir pu t'aider.
J'ai essayé,
les données du formulaire modal sont récupérés mais l'enregistrement ds la table pose problème. voici le code d'erreur :
POST http://localhost:8000/admin/student/create 405 (Method Not Allowed) send @ jquery.min.js:2 ajax @ jquery.min.js:2 (anonymous) @ create:874 dispatch @ jquery.min.js:2 v.handle @ jquery.min.js:2
voici le code du controller:
public function addtuteur(Request $request)
{
$validator = Validator::make($request->all(), [
'civilite' => 'required',
'nomtut' => 'required',
'prenomtut' => 'required',
'telephonetut' => 'required',
'mobiletut' => 'required',
'lienenfant' => 'required',
]);
if ($validator->fails()) {
return response()->json([
'error' => $validator->errors()->all()
]);
}
Tuteur::create([
'civilite' => $request->civilite,
'nomtut' => $request->noms,
'prenomtut' => $request->prenom,
'telephonetut' => $request->telephone,
'mobiletut' => $request->mobile,
'lienenfant' => $request->lienenfant,
]);
return response()->json(['success' => 'Post created successfully.']);
}Route
Route::post('/admin/student/create.tut', [StudentController::class, "addtuteur"])->name("tuteur.ajouter");Ajax
<!-- Modal -->
<div class="modal fade single-action-confirm-modal" id="tuteurmodal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form id="tuteurModal">
{{ csrf_field() }} {{ method_field('POST') }}
<div class="modal-header bg-danger">
<h4 class="modal-title"><i class="til_img"></i>
<strong> AJOUTER UN TUTEUR/PARENT</strong>
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
</div>
<div class="modal-body with-padding">
@method('post')
@if(session('success'))
<div class="note note-success">
<p><strong class="current_language_text">{{session('success')}}</strong></p>
</div>
@endif
@if($errors->any())
<div class="note note-danger print-error-msg">
<ul class="my-0">
@foreach($errors->all() as $error)
<li>
{{$error}}
</li>
@endforeach
</ul>
</div>
@endif
<div class="row">
@include('champsForm.select', ['required'=>'required', 'label'=> 'Civilité',
'required'=>'required', 'name'=>'civilite', 'source'=>$student->langueparlee],
['keys'=>['Mme'=>'Mme', 'Mle'=>'Mle','Mr'=>'Mr']
])
<div class="col-md-6">
@include('champsForm.input', ['required'=>'required', 'type'=>'text', 'label'=>'Nom & Post-nom', 'name'=>'nomtut'])
</div>
<div class="col-md-6">
@include('champsForm.input', ['required'=>'required', 'type'=>'text', 'label'=>'Prénom', 'name'=>'prentuteur'])
</div>
<div class="col-md-6">
@include('champsForm.input', ['required'=>'required', 'label'=>'Téléphone', 'type'=>'tel', 'name'=>'telephonetut'])
</div>
<div class="col-md-6">
@include('champsForm.input', ['label'=>'Mobile', 'type'=>'tel', 'name'=>'mobiletut'])
</div>
<div class="col-md-6">
<div class="form-group mb-3">
<label class="control-label required" for="lienenfant">Lien avec l'enfant</label>
<select class="form-control @error("lienenfant") is-invalid @enderror" id="lienenfant" name="lienenfant">
@error("lienenfant")
<div class="invalid-feedback">
{{$message}}
</div>
@enderror
<option selected disabled>Choisir...</option>
<option value="Père">Père</option>
<option value="Mère">Mère</option>
<option value="Oncle">Oncle</option>
<option value="Tente">Tente</option>
<option value="Autre">Autre</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="float-start btn btn-warning" data-bs-dismiss="modal" >Cancel</button>
<button class="btn btn-danger btn-submit">Créer</button>
</div>
</form>
</div>
</div>
</div>
<!-- end Modal -->
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(".btn-submit").click(function(e){
e.preventDefault();
var civilite = $("#civilite").val();
var noms = $("#nomtut").val();
var prenomtut = $("#prentuteur").val();
var telephonetut = $("#telephonetut").val();
var mobiletut = $("#mobiletut").val();
var lienenfant = $("#lienenfant").val();
console.log(civilite, noms, prenomtut, telephonetut, mobiletut, lienenfant);
$.ajax({
type:'POST',
url:"{{ route('tuteur.ajouter') }}",
data:{civilite:civilite, noms:noms, prenom:prenomtut, telephone:telephonetut, mobile:mobiletut, lienenfant:lienenfant},
success:function(data){
if($.isEmptyObject(data.error)){
alert(data.success);
location.reload();
}else{
printErrorMsg(data.error);
}
}
});
});
function printErrorMsg (msg) {
$(".print-error-msg").find("ul").html('');
$(".print-error-msg").css('display','block');
$.each( msg, function( key, value ) {
$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
});
}
</script>
J'ai reussi à faire l'enregistrement, Comment mettre à jour la liste déroulante et sélectionner l'élèment inséré
Dans la fonction de retour de ton appel Javascript au serveur (Ajax, Fetch), il faut récupérer la réponse et procéder comme il suit :
//data = réponse qui contient l'ID et la valeur de la catégorie
const select = document.getElementById("monSelect");
const opt = document.createElement("option");
opt.value = data.value;
opt.text = data.text;
select.add(opt, null);Avec un peu de code JS nous pourrons plus t'aguiller.
Bonsoir, tu cherches a créer une interface qui (pour la création de fiches produits) créer des catégories et les stocke dans ta bdd pour pouvoir être réutiliser, c'est ça ?
Hello,
Bizarre je n'avais jamais vu ton code et il vient d'apparaître ... Bref !
Dans ton controller, tu peux déjà renvoyer les informations qui vont être utiles dans le SELECT (id et nom par exemple) :
$tuteur = Tuteur::create([
'civilite' => $request->civilite,
'nomtut' => $request->noms,
'prenomtut' => $request->prenom,
'telephonetut' => $request->telephone,
'mobiletut' => $request->mobile,
'lienenfant' => $request->lienenfant,
]);
return response()->json(['id' => $tuteur->getId(), 'nom' => $tuteur->getNomtut(), 'success' => 'Post created successfully.']);(Le code est donné à titre d'exemple pour indiquer une certaine marche à suivre, il y a de fortes chances pour qu'il ne fonctionne pas du premier coup en copié / collé).
Ensuite, côté Javascript, on va pouvoir récupérer cette réponse et ajouter les informations au SELECT.
$.ajax({
type:'POST',
url:"{{ route('tuteur.ajouter') }}",
data:{civilite:civilite, noms:noms, prenom:prenomtut, telephone:telephonetut, mobile:mobiletut, lienenfant:lienenfant},
success:function(response){
if($.isEmptyObject(response.data.error)){
const select = document.getElementById("monSelectDesTuteurs");
const opt = document.createElement("option");
opt.value = response.data.value;
opt.text = response.data.text;
select.add(opt, null);
}else{
printErrorMsg(data.error);
}
}
});