Laravel 7: динамическое c зависимое раскрывающееся меню с javascript - PullRequest
1 голос
/ 14 июля 2020

У меня есть зависимость / иерархия таблицы, например:

  • bw_teilsysteme
    • bw_typ
      • bw_bauwerksart
        • bw_bauwerkskategor ie

Подобно этой структуре, я попытался построить динамическую c зависимость раскрывающегося списка. Я очень неопытен в javascript. Поэтому я пробовал разные решения, найденные на разных форумах. Я попробовал один, который понял, но он не работает, поэтому второе меню остается пустым.

В моем случае лезвие используется как включаемое (dropdown_allbw.blade), потому что его можно использовать многократно . Я сделал контроллер c для этих раскрывающихся списков, где для самого верхнего раскрывающегося списка возврат осуществляется к упомянутому включаемому лезвию. 1069 * функция закодирована в контроллере. И здесь я, вероятно, допустил ошибку при адаптации некоторых кодовых строк. Никаких просьб ... Где я ошибся в мыслях? Я очень благодарен за подсказки.

Следуя моим кодам:

DropdownController. php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Input;
use App\Teilsystem;
use App\Typ;
use App\Art;
use App\Kategorie;


class DropdownController extends Controller
{
    
//** Auswahl Bauwerke erstellen/edit */    

    public function teilsystem(){
        $teilsystem = Teilsystem::all();
        return view('bauwerke.adminbau.adminbauwerke', compact('teilsystem'));
    }
  
    public function bw_typ(){
        
        $bw_typ = Typ::whereHas('teilsystem', function($query) {
            $query->where(request()->input('id', 0));
            })->pluck('id', 'typ');

        return response()->json($bw_typ);
    }
  
    public function bw_art(){
        $bw_art = Art::whereHas('bauwerkstyp', function($query) {
            $query->whereId(request()->input('id', 0));
            })->pluck('id', 'bwart');
        return response()->json($bw_art);
    }
  
    public function bw_kat(){
        
        $bw_kat = Kategorie::whereHas('bauwerksart', function($query) {
            $query->whereId(request()->input('id', 0));
            })->pluck('id', 'bwkategorie');
        return response()->json($bw_kat);
    }
}

Мои модели:

Тип. php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Typ extends Model
{

    protected $table = 'bw_typ';
    protected $primaryKey = 'id';


    public function bauwerksart()
    {
        return $this->hasMany('App\Art');
    }

    public function teilsystem()
    {
        return $this->belongsTo('App\Teilsystem', 'teilsystem');
    }
}

Арт. php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Art extends Model
{

    protected $table = 'bw_bauwerksart';

    protected $primaryKey = 'id';
    public function bauwerkskategorie()
    {
        return $this->hasMany('App\Kategorie', 'bwart');
    }

    public function bauwerkstyp()
    {
        return $this->belongsTo('App\Typ', 'ufertyp');
    }
}

Категория ie. php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Kategorie extends Model
{

    protected $table = 'bw_bauwerkskategorie';
    protected $primaryKey = 'id';


    public function bauwerksart()
    {
        return $this->belongsTo('App\Art', 'bwart');
    }
}

И затем мои маршруты в web. php:


Route::get('/json-bw_typ','DropdownController@bw_typ')->name("bw_typ");
Route::get('/json-bw_art', 'DropdownController@bw_art')->name("bw_art");
Route::get('/json-bw_kat', 'DropdownController@bw_kat')->name("bw_kat");

и, наконец, мой dropdown_allbw.blade. php as include

<div class="form-group row">
   <label for="teilsystem" class="col-md-4 col-form-label text-md-right">{{__('Bauwerkssystem')}}</label>
   <div class="col-md-4">
   <select class="form-control" name="teilsystem_id" id="teilsystem_id">
     <option value="" selected>Bitte auswählen...</option>
       @foreach ($teilsystem as $key => $value)
         <option value="{{$value->id}}">{{ $value->teilsystemname }}</option>
       @endforeach
   </select>
   </div>
</div>

<div class="form-group row" id="bw_typ">
   <label for="bw_typ" class="col-md-4 col-form-label text-md-right">{{__('Bauwerkstyp')}}</label>
   <div class="col-md-4">
   <select class="form-control" name="bw_typ_id" id="bw_typ_id">
     <option value="" selected>Bitte auswählen...</option>
   </select>
   </div>
 </div>

<div class="form-group row" id="bw_art">
   <label for="bw_art" class="col-md-4 col-form-label text-md-right">{{__('Bauwerksart')}}</label>
   <div class="col-md-4">
   <select class="form-control" name="bw_art_id" id="bw_art_id">
     <option value="" selected>Bitte auswählen...</option>
   </select>
   </div>
 </div>

<div class="form-group row"  id="bw_kat">
   <label for="bw_kat" class="col-md-4 col-form-label text-md-right">{{__('Bauwerkskategorie')}}</label>
   <div class="col-md-4">
   <select class="form-control" name="bw_kat_id" id="bw_kat_id">
     <option value="" selected>Bitte auswählen...</option>
   </select>
   </div>
 </div>
 
 @section('scripts')
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
  $(document).ready(function ()
  {
     $('#teilsystem_id').change(function(){
      $('#bw_typ_id, #bw_art_id, #bw_kat_id').val("");
        var bw_typ = $('#bw_typ_id');
           $.ajax({
              url : "{{ route('bw_typ') }}",
              data: {
                teilsystem_id: $(this).val()
              }
              success:function(data)
              {
                $bw_typ.html('<option value="" selected>Bitte auswählen...</option>');
                $.each(data, function(id, value) {
                
                     
                  $bw_typ.append('<option value="'+ id +'">'+ value +'</option>');
                });

                $('#bw_typ').show(150);
              }
           });
        
     });

     $('#bw_typ').change(function(){
        var bw_art = $('#bw_art_id');
        
           $.ajax({
              url : "{{ route('bw_art') }}",
              data: {
                bw_typ_id: $(this).val()
              }
              success:function(data)
              {
                $bw_art.html('<option value="" selected>Bitte auswählen...</option>');
                $.each(data, function(id, value) {
                
                     
                  $bw_art.append('<option value="'+ id +'">'+ value +'</option>');
                });
                $('#bw_art').show(150);

              }
           });
        }
        
     });

     $('#bw_art').change(function(){
        var bw_kat = $($('#bw_kat_id'));
        
           $.ajax({
              url : "{{ route('bw_kat') }}",
              data: {
                bw_art_id: $(this).val()
              }
              success:function(data)
              {
                $bw_kat.html('<option value="" selected>Bitte auswählen...</option>');
                $.each(data, function(id, value) {
                
                     
                  $bw_kat.append('<option value="'+ id +'">'+ value +'</option>');
                });
                $('#bw_kat').show(150);

              }
           });
        
     });


  });
</script> 
@endsection

Я больше не знаю, где застревает ошибка ... Мне нужна помощь, чтобы проверить, что мне нужно улучшить. Когда я проверяю маршрут localhost / json -bw_typ, вставляя путь в браузере, он возвращает мне полный список возможных для bw_typ.

EDiT: Я пробовал несколько других кодов. Возникает ли проблема, когда путь - динамический c (т.е. с передачей некоторых id-номеров?

Спасибо за помощь!

...