How To Fix Dynamic Dropdown List With Ajax Error

I want when I select a category to show me all the subcategories for that specific category, but this is the error that I am getting: GET http://localhost:8000/shto/njesin-stratig

Solution 1:

you can see following code in view

<divclass="form-group m-r-10"><labelfor="exampleInputName2">Category</label><selectclass="form-control select2 productcategory"name="productcategory"><optionvalue="0"disabled="true"selected="true">
             Product Category
        </option>

        @foreach($category as $c)
            <optionvalue="{{$c->id}}">{{$c->type_name}}</option>
        @endforeach

    </select></div><divclass="form-group m-r-10"><labelfor="exampleInputName2">Name</label><selectclass="form-control productname"name="productname"><optionvalue="0"disabled="true"selected="true">Product Name</option>
            @foreach($products as $p)
                <optionvalue="{{$p->id}}">{{$p->name}}</option>
            @endforeach
    </select></div>

in ajax

<scripttype="text/javascript">

    $(document).ready(function(){


        /*--------------------------------------------------------------------------------------------------------------
         * Click Add more Product
         */


        $(document).on('change','.row .card_prod .productcategory',function () {


            console.log("changeproduct category");

            var div=$(this).parent().parent().parent().parent();


            var category_id=$(this).val();
            console.log(category_id);
            var op="";

            $.ajax({
                type:'GET',
                url:'{!!URL::route('findProductName')!!}',
                // dataType:'json',data:{id:category_id},
                success:function(data)
                {
                    //tr.find('.price').val(data.price);console.log(data);
                    for(var i=0;i<data.length;i++){
                        console.log(data[i].name);
//                      console.log(i);
                        op+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
                    }

//                  div.find('.productname').css('background-color','pink');
                    div.find('.productname').html("");
                    div.find('.productname').append(op);

                },
                error:function(msg){
                    console.log(msg);
                   console.log("error");
                }
            });
        });
        //  document DOM end</script>

in route

Route::get('/findProductName',array('as'=>'findProductName','uses'=>'InventoryController@findProductName'));

in controller

publicfunctionfindProductName(Request $request)
    {
        $data=Product::select('name','id')->where('type_fk_id',$request->id)->take(100)->get();;
        return response()->json($data);

    }