RE - Laravel: автозаполнение ввода после выбора значения из выпадающего списка - PullRequest
Новая
       61

RE - Laravel: автозаполнение ввода после выбора значения из выпадающего списка

0 голосов
/ 23 сентября 2019

У меня проблемы с получением данных в поле ввода сразу после выбора пользователя из выпадающего списка.Любое предложение?Последнее предложение не работает.

internalaudit.blade.php 

        <div class="form-group">
            {!! Form::label('text', 'Doc No', ['class' => 'col-lg-3 control-label']) !!}
            <div class="col-lg-10">
                <select name="docNo" id="docNo" class="form-control" style="width:250px">

                    @foreach ($soplists as $soplist)
                    <option value="{{ $soplist->id }}">{{ $soplist->doc_no }}</option>
                    @endforeach
                </select>
            </div>
        </div>




        <input type="text" class="form-control" name="rev_no" id="rev_no">

          <input type="text" class="form-control" name="title" id="title">

Ajax 

 <script>
     $('#docNo').change(function() {
         var id = $(this).val();
         var url = '{{ route("getDetails", ":id") }}';
         url = url.replace(':id', id);

         $.ajax({
             url: url,
             type: 'get',
             dataType: 'json',
             success: function(response) {
                 if (response != null) {
                     $('#rev').val(response.rev_no);
                     $('#title').val(response.title);
                 }
             }
         });
     });

Контроллер 

 public function internalAudit()
    {

        /*Generate number*/
        $query = Cars::latest()->first(); //get last query
        $validators = User::all();
        $departments =  Department::all();
        $isolists =  isoList::all();
        $soplists =  sopList::all();

        $ex = explode('/', $query['iaCarRefNo']); //explode last number from DB

        $type = strtoupper(Request::segment(2)); //get type from url

        if (empty($query->iaCarRefNo)) {
            $number = '1';
            $nextNumber = 'PLW' . '/' . date('y') . $type . '/' . sprintf("%03d", $number);
        } else {
            $number = $ex[2] + 1;
            $nextNumber = 'PLW' . '/' . date('y') . $type . '/' . sprintf("%03d", $number);
        }


        return view('cars.internalaudit', compact('nextNumber', 'validators', 'departments', 'isolists', 'soplists'));
    }


    public function getDetails($id = 0)
    {
        $data = sopList::where('doc_no', $id)->first();
        return response()->json($data);
    }

Маршрут 

Route::get('get/details/{id}', 'internalAuditController@getDetails')->name('getDetails');

Route::get('/internalaudit', 'internalAuditController@internalAudit');

Route::post('/internalaudit', ['as' => 'internalaudit.store', 'uses' => 'internalAuditController@store']);

Ссылка на изображение таблицы базы данных sop_list

https://ibb.co/SwkJhLc

Выпадающее и входное изображение

https://ibb.co/0VN3Z2y

Вкладка сети

https://ibb.co/56w5BLD

Ответы [ 2 ]

0 голосов
/ 23 сентября 2019

enter image description here В соответствии с вашим console.log есть 2 ошибки $.ajax is not function и $.(...) datetimepicker is not function из-за этих ошибок, теперь ваш ajax не работает, поэтому вам нужно сначала исправить эти проблемы.Как только вы исправите эти проблемы, вы сможете отправить ajax-запрос и обновить входные файлы.

Чтобы решить первую проблему, загрузите обычную (сжатую или нет) версию jQuery и включите ее в свой проект.

Чтобы исправить вторую проблему, загрузите соответствующий datetimepicker ивключите в свой проект то же самое, что и jQuery.

После этого обновите #rev селектор до #rev_no

$('#rev_no').val(response.rev_no);

Также используйте laravel вспомогательную функцию вместо echo json_encode(); 

return response()->json($data);

В вашей таблице нет записи для doc_no = 3, в вашем блейде вы используете $soplist->id

<option value="{{ $soplist->id }}">{{ $soplist->doc_no }}</option>

То же самое с контроллером, 

$data = sopList::where('id', $id)->first();

или 

 $data = sopList::find($id);
0 голосов
/ 23 сентября 2019

Вы дали неверный идентификатор для ответа, также вы должны указать идентификатор для ввода заголовка. 

<input type="text" class="form-control" name="title" id="title">

<script>
 $(document).ready(function(){
  $(document).on('change','#docNo',function(){
    var id = $(this).val();
    var url = '{{ route("getDetails", ":id") }}';
    url = url.replace(':id', id);
    $.ajax({
             type: 'get',
             url: url,
             dataType: 'json',
             success: function(response) {
              $('#rev_no').val(response.rev_no);
              $('#title').val(response.title);

             }
         });
    });
 });
</script>
...