Проблема с передачей данных из контроллера Laravel в Boostrap Modal

Question

Привет всем, у меня есть проблема.Я хочу передать данные из моего контроллера в мой модальный.У меня есть список категорий, которые я хочу отобразить в раскрывающемся списке. Я пробовал использовать атрибуты href и ajax, но ни одна из них не сработала, есть ли решение?

вот кусок кода:

Список всех категорий blade.php:

@extends('layouts.Template')

@section('content')
<div class="content-wrapper">
           <div class="container-fluid">

               <div class="row">
                   <div class="col-md-12">

                     <center>  <h2 class="page-title">Gérer les Sous  Catégories</h2> </center> 

   <div class="panel panel-default">
                           <div class="panel-heading"> <strong>Liste Sous Catégories</strong></div>
                           <div class="panel-body">
                               <table id="zctb" class="table table-bordered">

                                       <tr>
                                       <th>Id</th>
                                       <th>Nom</th>
                                       <th>Nom de Catégories</th>
                                       <th>image</th>
                                       <th>created_at</th>
                                       <th>updated_at</th>
                                       <a class="fas fa-plus-circle" style="font-size:60px;color:#e2ccae;margin-left:90%;"href="{{url ('/Sous_Catégories/ajouter')}}"></a> 
                                       </tr>

                                    @foreach($Souscategories as $Scategorie)
                                     <tr>
                                       <td>{{$Scategorie->id}}</td>
                                       <td>{{$Scategorie->nom}}</td>
                                       <td>{{$Scategorie ->nomCat}}</td>
                                       <td>{{$Scategorie->image}}</td>
                                       <td>{{$Scategorie -> created_at}}</td> 
                                       <td>{{$Scategorie -> updated_at}}</td>
                                       <td ><a class="fas fa-edit" href="{{ route('Sous_Catégories.getAllCategories')}}" data-nom="{{$Scategorie->nom}}"  data-nomCat="{{$Scategorie->nomCat}}" data-image="{{$Scategorie->image}}"  data-cat_id1 ="{{$Scategorie->id }}" data-toggle="modal" data-target="#edit1">Edit</a></td>                              
                                       <td><a class="fas fa-trash" href="{{url ('/Sous_Catégories/supp',[$Scategorie->id])}}" >  </td>
                                     </tr>    
                                  @endforeach

</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>         

<div class="modal fade" id="edit1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
       <h4 class="modal-title" id="myModalLabel">Modifier Sous Catégories</h4>
     </div>
     <form action="{{ route('Sous_Catégories.update','test')}}" method="POST">
     {{method_field('patch')}}
           {{csrf_field()}}
         <div class="modal-body">
               <input type="hidden"  name="cat_id1" id="cat_id1" value="">
               @include('formSousCat')
         </div>
         <div class="modal-footer">
           <button id="fermer" type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
           <button id="save" type="submit" class="btn btn-primary">Enregistrer</button>
         </div>
     </form>
   </div>
 </div>
</div>    
 @endsection

контроллер Метод:

 public function getAllCategories()
    {    

        $Cat = categories::all();
        return view('formSousCat', compact('Cat'));

    }

Мои роутеры:

 Route::get('/Sous_Catégories', 'SousCatController@index' );
Route::post('/Sous_Catégories/ajouter', 'SousCatController@create');
Route::get('/Sous_Catégories/supp/{id}', 'SousCatController@destroy');
Route::get('/Sous_Catégories/getAllCategories', 'SousCatController@getAllCategories');
Route::resource('Sous_Catégories', 'SousCatController');

Мой модальный клинок

                    <label>Nom</label>
                    <input  id="nom" name="nom" class="form-control"type="text"/>
                    </div>
                    <br/>
                    <div>
                    <label for="le_nom">Choix de categorie</label><br />
                    <label for="le_nom">Choix de categorie</label><br />
      <select name="le_nom" id="le_nom" class="form-control">
        @foreach($Cat as $categorie)  <!-- $Cat is undefined -->
           <option class="form-control">{{$categorie->nomCat}}</option>
            @endforeach
      </select>

                   <div class="input-group">
                        <div class="custom-file">
                        <div class="form-group">
                <input type="file" name="image" class="form-control-file">
            </div>
                     </div>

Answer 1

Вы можете использовать событие click для тега кнопки, чтобы открыть модальный режим и инициировать запрос ajax, который извлекает данные из контроллера и вставляет их в категории.

<button id="openModal">Open Modal</button>

В вашем контроллере:

public function getAllCategories()
    {    
        $Cat = categories::all();
        return response()->json($cat);
    }

В вашем сценарии

let btn = document.querySelector('#openModal')
let slct = document.querySelector('#le_nom')
btn.addEventListener('click', function(){
   $.ajax({
     url: '{{url("/Sous_Catégories/getAllCategories")}}',
     method: 'GET',
     success: function(response){
         response.Foreach((op) = > {
          slct.innerHTML += `<option value="${op.id}">${op.nomCat}</option>`
     })    
     }

})
})