How to display all menus and submenus in another drop-down list?

Question

I do not know what's going on! this code is not working properly. I do not get an error. it shows the menu correctly, but does not display the submenu in a specific menu. Here is my code:

##Table: menus## id name parent_id 1 Dhaka 0 2 Chitagong 0 3 Chittagong University 2 4 Dhaka University 1 5 Barisal 0 6 Chittagong University 5 ##route:## Route::get('/', ' MenuController@index '); Route::get('/sub',' MenuController@subMenu '); ##Model:## <?php namespace App; use Illuminate\Database\Eloquent\Model; class Menu extends Model { protected $fillable = [ 'id','name','parent_id' ]; } ##Controller :## <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades\Input; use App\Http\Requests; use App\Menu; class MenuController extends Controller { public function index() { $menuItem = Menu::where('parent_id', '=',0)->get(); return view('index', compact('menuItem')); } public function subMenu() { $parent = Input::get('parentID'); $sub_menu= Menu::where('parent_id','=',$parent) ->select('id','name') ->get(); return response()->json($sub_menu); } } ##View:## <!--/.start add menu section--> <div class="row"> <div class="col-xs-12"> <div class="panel panel-default"> <div class="panel-heading"> <strong>Menu </strong> </div> <div class="panel-body"> <div class="form-horizontal"> <div class="row"> <div class="col-xs-8"> {{ Form::open(['class' => 'form-horizontal', 'role' => 'form']) }} <div class="form-group"> <label align="right" for="name" class="control-label col-xs-2">Menu :</label> <select class="col-md-5 input-sm" name="menu" id="menu"> @foreach ($menuItem as $menu) <option value="{{ $menu->id }}" placeholder="choose menu">{{ $menu->name }}</option> @endforeach </select> </div> <div class="form-group"> <label align="right" for="child_id" class="control-label col-xs-2">Sub Menu :</label> <select class="col-md-5 input-sm" name="child_id" id="child_id" > </select> </div> </div> </div> </div> </div> <div class="panel-footer"> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-offset-2 col-md-6"> {!! Form::submit('Save', ['class' => 'btn btn-primary add-submenu']) !!} </div> </div> </div> </div> </div> </div> {{ Form::close() }} </div> </div> javascript: ------------- <script type="text/javascript"> $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $(document).ready(function(){ $('#menu').on('change',function(e){ console.log(e); var parentID= e.target.value; $.getJSON('/sub?parentID=' + parentID, function(data){ console.log(data); $('#child_id').empty(); $.each(data,function(index, child){ $('#child_id').append('<option value="'+child.id+'">'+child.name+'</option>'); }); }); }); }); </script> 

what is the problem in this code?

Answer 1

There are many errors in the code. You just copy and paste forgot to change these values.
For this, I use a separate controller and javascript.
In my kind

 <div class="form-group"> <label align="right" for="name" class="control-label col-xs-2">Course :</label> <select class="col-md-5 input-sm" name="name" id="name"> @foreach ($menuItem as $menu) <option value="{{ $menu->id }}" placeholder="choose menu">{{ $menu->name }}</option> @endforeach </select> </div> 

To get submenu items I use Javascript

 <script type="text/javascript"> $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $(document).ready(function(){ $('#name').on('change',function(e){ console.log(e); var parentID= e.target.value; $.getJSON('/your current url/sub?parentID=' + parentID, function(data){ console.log(data); $('#child_id').empty(); $.each(data,function(index, child){ $('#child_id').append('<option value="'+child.id+'">'+child.name+'</option>'); }); }); }); }); 

in my route.php I have

 Route::get('your current url/sub',' MyJSController@loadchild '); 

In my function MyJSCcontroller -> loadchild there is

 public function loadchild() { $parent = Input::get('parentID'); $sub_menu= DB::table('menus') ->where('parent_id','=',$parent) ->select('id','name') ->get(); return response()->json($sub_menu); } 

Your submenu that appears in your VIEW should look like this:

 <div class="form-group"> <label align="right" for="child_id" class="control-label col-xs-2">Sub Menu :</label> <select class="col-md-5 input-sm" name="child_id" id="child_id" > </select> </div> public function create() { $menuItem = DB::table('menus') ->where('parent_id','=',0) ->get(); return view('menu.createmenu', compact('menuItem')); } 

Make sure you import use Illuminate\Support\Facades\Input; use DB; use Illuminate\Support\Facades\Input; use DB; in your controller.
One more thing
Do not use {!! Form::close() !!} {!! Form::close() !!} due to security vulnerabilities. Use {{ Form::close() }}

Answer 2

Try adding id as the third parameter in your relationship,

 public function parent() { return $this->belongsTo('App\Menu', 'parent_id', 'id'); } public function children() { return $this->hasMany('App\Menu', 'parent_id', 'id'); } 

Answer 3

It was just missing from my js file. it was a "/" problem.