Sajib Hasan Sajib Hasan - 13 days ago 5
PHP Question

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

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

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

Comments