without select category not show subcategory

问题

This is create.blade.php file. In this include css and js file too.. Html code and ajax code view file

@extends('layouts.app')

@section('content')
 <link rel="stylesheet" href="http://www.codermen.com/css/bootstrap.min.css">    
 <script src="http://www.codermen.com/js/jquery.js"></script>
<form enctype="multipart/form-data" method="post" action="{{route('post.store')}}" >
       @csrf
       <div class="form-group col-md-8">
                    Category<select name="category" id="category" class="form-control">
                                    <option>select</option>
                        @foreach($categories as $category)
                <option value="{{$category->id}}">{{$category->category}}</option>
                @endforeach
                            </select>
       </div>
       <div class="form-group col-md-8">
                    Category<select name="subcategory" id="subcategory" class="form-control">
                                    <option>select</option>
                        @foreach($subcategories as $subcategory)
                <option value="{{$subcategory->id}}">{{$subcategory->subcategory}}</option>
                @endforeach
                            </select>
       </div>
</form>

@endsection


 

This is controller code which create function code of category and subcategory

public function create(Request $request){
    $categories = Category::all();
    $subcategories = DB::table('subcategories')
                        ->where('category_id', $request->category_id)
                        ->pluck('subcategory', 'id');
  return view('post.create', compact('categories', 'subcategories'));
}

This is route

Route::get('/post/create', 'PostController@create')->name('post.create');

Problem is if i select category still no show related to subcategory

回答1:

The jquery append code looks like it is correct. I think the problem may be in your routing.

You've got

url:"{{url('create')}}?category_id="+categoryID,

as a GET request called through the Laravel method url(). It might help if you use url() here in the way you've got the route setup in web.php, which would use the full url path:

url:"{{url('post/create/')}}"+categoryID,

This lets the url() function add the parameter. However, it might also help to account for the incoming parameter on your routes file if it is a GET request (and add $category_id to the controller method):

Route::get('post/create/{id}', 'PostController@create')

I would probably make a separate function just to get the subcategories - then make your ajax call to that function and just pull the subcategories. A little cleaner.

But I think your problem may be in the routing and perhaps some of the above will help you.

回答2:

you have done silly mistake , you are sending ajax request on change of category select dropdown to your create function , while your create function is rendering view post.create instead of return json response to ajax request .

so now what you can do ? 2 options available to you :

option 1 : create other function named "get_subcategory_by_category_id" and that will return subcategories in json , also create new route in routes/web.php for same .

option 2 : laravel provide $request->ajax() to detect that request is ajax or not ? so use that and return response in json , so you will get response .

public function create(Request $request){
    $categories = Category::all();
    $subcategories = DB::table('subcategories')
                        ->where('category_id', $request->category_id)
                        ->pluck('subcategory', 'id');

    if($request->ajax()){
        $response=array('categories'=>$categories,'subcategories'=>$subcategories);
        return response()->json($response,200);
    }
    return view('post.create', compact('categories', 'subcategories'));
}

your ajax function should be like below :

<script type="text/javascript">
    $(document).on('change','#category',function(){
    var categoryID = $(this).val();    
    if(categoryID){
        $.ajax({
           type:"GET",
           url:"{{url('create')}}?category_id="+categoryID,
           dataType:'json',
           success:function(res){               
            if(res){
                console.log(res);
                // forloop through subcategory and append 
            }else{
               $("#subcategory").empty();
            }
           }
        });
    }else{
        $("#subcategory").empty();

    }      
   });
</script>

make sure that your request url is proper , also check Inspect Element > Network tab for ajax request response .

来源：https://stackoverflow.com/questions/54385343/without-select-category-not-show-subcategory