如何修复带有Ajax错误的动态下拉列表 [英] 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:

获取 http://localhost:8000/shto/njesin-stratigrafike? sektori + id = III 500 (内部服务器错误)

GET http://localhost:8000/shto/njesin-stratigrafike?sektori+id=III 500 (Internal Server Error)

这是下拉列表的html代码

Here is the html code for dropdown lists

<select class="form-control" name="selected_sector2" id="category">
  <option value="blank">Zgjedh sektorin</option>
  @foreach($sektorat['sektorat2'] as $sektori2)
  <option name="sektori">
    {{ $sektori2->sektori_nr }}
  </option>
  @endforeach
</select>

这是路线代码

Route::get('shto/njesin-stratigrafike', 'NjesiteStratigrafikeController@shtoNjesiStratigrafike');

这是控制器代码

class NjesiteStratigrafikeController extends Controller
{
    public function shtoNjesiStratigrafike(){
        $selected_sector = Input::get('selected_sector2');
        $sector_id = Sektori::where('sektori_nr',$selected_sector)
                            ->value('sektori_id');

        $kuadratet = Kuadrati::where('sektori_id_fk', '=' ,$sector_id)->get();

        return Response::json($kuadratet);
    }
}

这是ajax代码

<script type="text/javascript">
$('#category').on('change', function(e) {
  var sektori_id = e.target.value;
    // Ajax
  $.get('/shto/njesin-stratigrafike?sektori+id=' + sektori_id, function(data) {
    // Success data
    $('#subcategory').empty();
    $('#subcategory').append(' Please choose one');
    $.each(data, function(index, subcatObj) {
      $('#subcategory').append('' + subcatObj.subcategory_name + '</option>');
    });
  });
});
</script>

推荐答案

您可以看到以下代码 在视图

you can see following code in view

    <div class="form-group m-r-10">
        <label for="exampleInputName2">Category</label>
    <select class="form-control select2 productcategory" name="productcategory">
        <option value="0" disabled="true" selected="true">
             Product Category
        </option>

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

    </select>

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

在 ajax

<script type="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>

在路线

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

在控制器

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

    }

这篇关于如何修复带有Ajax错误的动态下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！