how to display all menu and submenu item in a different drop down list?

Question

I don't know what's going on ! this code not work me properly. i don't get the error. it shows menu properly but don't show any submenu under 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

It was a simple missing in my js file. it was a '/' problem .

Answer 2

There are many mistakes in your code. You just copy and paste forgot to change those values.
For doing this, I am using a separate controller and javascript.
In my VIEW

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

For getting sub menu items, I am using 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 MyJSController -> loadchild function has

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 sub menu drop down in your VIEW should be 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 imported
use Illuminate\Support\Facades\Input; use DB; in your controller.
One additional thing
Do not use {!! Form::close() !!} these,because of security vulnerabilities. Use {{ Form::close() }}

Answer 3

Try adding id as third parameter in your relations,

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

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