Динамическое раскрытие зависимостей с использованием jQuery ajax в laravel 5.4 - PullRequest
0 голосов
/ 02 ноября 2018

Я хочу сделать этот раскрывающийся список, первый раскрывающийся список показывает, но когда я выбираю предмет внутри, другой выпадающий список не появляется.

medicinecost.blade.page

 <body>
        <h1><p>Lab Cost</p></h1><br>
        <div class="container">
            <div class="col-lg-3">
                <div class="form-group">
                    <select name="labCat" id="labC" class="form-control">
                        <option value="0" disabled="true" selected="true">Select Lab Category</option>
                            @if(isset($lab_category))
                                @foreach($lab_category as $lb)
                                    <option value="{{$lb->lab_category_id}}">{{$lb->category_name}}</option>
                                @endforeach
                            @endif
                    </select>
                </div>
                <div class="form-group">
                    <select name="labSub" id="labS" class="form-control">
                        <option value="0" disabled="true" selected="true">Select Lab Sub Category</option>
                    </select>
                </div>
                <div class="form-group">
                    <select name="labTest" id="labT" class="form-control">
                        <option value="0" disabled="true" selected="true">Select Lab Test</option>
                    </select>
                </div>
            </div>
        </div>
        <script>
        $('#labC').on('change',function () {
            console.log();
            var labCategID = $(this).val();
                $.get('/json-labC?lab_category_id='+labCategID,function (data) {
                    console.log(data);
                    if(labCategID){
                        $('#labS').empty();
                        $('#labS').append('<option value="0" disabled="true" selected="true">Select Lab Sub Category</option>');
                        $('#labT').empty();
                        $('#labT').append(' <option value="0" disabled="true" selected="true">Select Lab Test</option>');
                        $.each(data,function(index,labSObj){
                            $('#labS').append('<option value="'+labSObj.id+'">'+labSObj.lab_sub_category+'</option>');
                        });
                    }else{
                        $('#labS').empty();
                    }
                });
        });
        </script>
        </body>

web.php

  Route::get('labdetails','Test@cost');
    Route::get('/json-labC','Test@costSub');

контроллер Test.php

Тест класса расширяет контроллер { стоимость публичной функции (Request $ request) { $ lab_data = \ DB :: table ('lab_category') -> select ('lab_category_id', 'category_name') -> get (); обратный просмотр ('pages / Medicinecost') -> with ('lab_category', $ lab_data); }

        public function costSub(Request $request,$labcatID){
            $lab_sub_data = \DB::table('lab_sub_category')->where('category_id',1)->select('sub_category_name')->get();
            //dd($lab_sub_data);
            return response()->json($lab_sub_data);
        }

Я получаю сообщение об ошибке в браузере, чтобы проверить элемент.

jquery.min.js:2 GET http://127.0.0.1:8000/json-labC?lab_category_id=4 500 (Internal Server Error)

1 Ответ

0 голосов
/ 03 ноября 2018
<script>

$(document).ready(function() {

    $('#labC').on('change', function(){
        var labCategId = $(this).val();
       // alert(labCategId);
        if(labCategId) {
            $.ajax({
                processing : 'true',
                serverSide : 'true',
                url: 'get_lab_sub',
                type:"POST",
                data : {labCategId:labCategId,"_token":"{{ csrf_token() }}"},
                dataType:"json",

                success:function(data) {
                    if(data){
                        $('#labS').empty();

                        $.each(data, function(key, value){
                           // alert(key);
                            $('#labS').append('<option value="'+value.lab_sub_category_id+'">' + value.sub_category_name + '</option>');

                        });
                    }

                },

            });
        } else {
            $('select[name="labS"]').empty();
        }

    });

    $('#labS').on('change' ,function () {
        var labSubId = $(this).val();
       // alert(labSubId);
        if(labSubId){
            $.ajax({
                processing : 'true',
                serverSide : 'true',
                url :'get_lab_sub_cat',
                type:"POST",
                data :{ labSubId:labSubId,"_token":"{{ csrf_token() }}"},
                dataType: "json",
                success:function (data) {
                    if(data){
                        $('#labT').empty();
                        $.each(data, function(key, value){

                            $('#labT').append('<option value="'+ value.sub_category_id +'">' + value.lab_name + '</option>');

                        });
                    }
                    else {
                        $('#labT').empty();
                    }
                }
            });
        }

    })

    $('#labT').on('change' ,function () {
        var lab_test_ID = $(this).val();
        if(lab_test_ID){
            $.ajax({
                processing : 'true',
                serverSide : 'true',
                url :'get_lab_sub_cat',
                type:"POST",
                data :{ labSubId:labSubId,"_token":"{{ csrf_token() }}"},
                dataType: "json",
                success:function (data) {
                    if(data){
                        $('#labT').empty();
                        $.each(data, function(key, value){
                            alert('hello');
                            $('#labT').append('<option value="'+value.labSubId +'">' + value.lab_name + '</option>');

                        });
                    }
                    else {
                        $('#labT').empty();
                    }
                }
            });
        }
    });

});


</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...