Forum : Ajoute une catégorie par un modal sur une page de création de produit

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

12 réponses

Kerly May,

il y a 2 ans

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

Kerly May,

il y a 2 ans

J'ai mal posé ma question ou il est impossible de faire ce que j'ai demandé?

Azorgh,

il y a 2 ans

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.

Kerly May,

il y a 2 ans

Merci d'avoir d'avoir repondu; que j'essai de faire.

Azorgh,

il y a 2 ans

Si tu bloques, dis nous à quelle étape tu es, ce que tu as essayé de faire et on pourra te guider

Kerly May,

il y a 2 ans

J'ai reussi à faire l'enregistrement, Comment mettre à jour la liste déroulante et sélectionner l'élèment inséré

Azorgh,

il y a 2 ans

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.

Kerly May,

il y a 2 ans

Je n'arrive pas, regarde un peu mon code, je dois mettre ça ou?

Swilah,

il y a 2 ans

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 ?

Kerly May,

il y a 2 ans

Oui exactement ça

Azorgh,

il y a 2 ans

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); } } });

Kerly May,

il y a 2 ans

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

<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>  <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>