Laravel - редактировать выпадающий список модальной формы, не отображая данные - PullRequest
0 голосов
/ 22 января 2020

Я использую Laravel5.8 для проекта веб-приложения. Я успешно сохранил данные в базе данных, но у меня возникли проблемы с получением их в модальной форме.

Модель

class AppraisalGoalType extends Model
{
  protected $table = 'appraisal_goal_types';
  protected $fillable = [
   'name',
   'parent_id',
   'max_score'
 ];

 public function children()
 {
   return $this->hasMany('App\AppraisalGoalType', 'parent_id');
 }
}

Контроллер

public function edit($id)
{
  $category = AppraisalGoalType::where('id', $id)->first();       
  return view('goal_types.edit')->with('category', $category);
}

public function update(UpdateGoalTypeRequest $request, $id)
{   
  $category = AppraisalGoalType::find($id);                            
  $category->name           = $request->name;
  $category->parent_id      = $request->parent_id;
  $category->max_score      = $request->max_score;

  $category->save();
  Session::flash('success', 'Updated successfully');
  return redirect()->route('goal_types.index');
}

индексное представление

<div class="col-md-8">
 <div class="card card-secondary">
   <div class="card-header">
    <h3 class="card-title">Goal Type(s)</h3>
   </div>
   <div class="card-body">
    <ul class="list-group">
     @foreach ($categories as $category)
     <li class="list-group-item">
     <div class="d-flex justify-content-between">
       {{ $category->name }} 
       <strong>{{ $category->max_score }}</strong>
       <div class="button-group d-flex">
         <button type="button" class="btn btn-sm btn-primary mr-1 edit-category" data-toggle="modal" data-target="#editCategoryModal" data-id="{{ $category->id }}" data-name="{{ $category->name }}" data-max-score="{{ $category->max_score }}" data-parent-id="{{ $category->parent_id }}">Edit</button>

         <form action="{{ route('appraisal.goal_types.destroy', $category->id) }}" method="POST">
           @csrf
           @method('DELETE')

           <button type="submit" class="btn btn-sm btn-danger">Delete</button>
         </form>
       </div>
      </div>

      @if ($category->children)
      <ul class="list-group mt-2">
       @foreach ($category->children as $child)
       <li class="list-group-item">
       <div class="d-flex justify-content-between">
        {{ $child->name }} 
        <div class="button-group d-flex">
          <button type="button" class="btn btn-sm btn-primary mr-1 edit-category" data-toggle="modal" data-target="#editCategoryModal" data-id="{{ $child->id }}" data-name="{{ $child->name }}">Edit</button>
          <form action="{{ route('appraisal.goal_types.destroy', $child->id) }}" method="POST">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
          </form>
         </div>
        </div>
        </li>
        @endforeach
       </ul>
       @endif
     </li>
     @endforeach
     </ul>
   </div>
  </div>
</div>

редактировать модальный вид

<div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit Goal Type</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>                    
      <form action="" method="POST">
        @csrf
        @method('PUT')

        <div class="modal-body">
          <div class="form-group">
           <label class="control-label"> Parent Goal Type:</label>
           <select class="form-control select2bs4" data-placeholder="Choose Parent Goal Type" tabindex="1" name="parent_id" style="width: 100%;">
           <option value="">Select Parent Goal Type</option>
             @foreach ($categories as $category)
             <option value="{{ $category->id }}">{{ $category->name }}</option>
             @endforeach
            </select>
           </div>
           <div class="form-group">
             <label class="control-label"> Name:<span style="color:red;">*</span></label>
             <input type="text" name="name" class="form-control" value="" placeholder="Category Name" required>
            </div>
            <div class="form-group">
             <label class="control-label"> Max. Score:</label>
             <input type="number" name="max_score" class="form-control" value="" step="0.01" placeholder="Enter maximum score here: 15, 50, 75 etc" style="width: 100%;">
            </div>                       
           </div>

           <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Update</button>
           </div>
        </div>
    </form>
  </div>
</div>
            
<script type="text/javascript">
 $('.edit-category').on('click', function() {
 var id = $(this).data('id');
 var name = $(this).data('name');
 var parentId = $(this).data('parent-id');
 var maxScore = $(this).data('max-score');
 var url = "{{ url('category') }}/" + id;

 $('#editCategoryModal form').attr('action', url);
 $('#editCategoryModal form input[name="name"]').val(name);
 $('#editCategoryModal form select[name="parent_id"]').val(parentId);
 $('#editCategoryModal form input[name="max_score"]').val(maxScore);
 });
</script>            

Блейд индексного представления и создание отлично работают

У меня есть три поля

name, parent_id, max_score

Когда я щелкнул кнопку редактирования на лопатке индексного представления, чтобы отобразить поля редактирования модальной формы с данными, в поле имени и поле max_score отобразились загруженные данные. Однако parent_id (выпадающий список) не отображал никаких данных. Смотрите схему ниже. Когда я нажал на нее, я увидел данные.

edit modal form

ожидаемый результат:

expected edit modal form

Как мне решить эту проблему?

Спасибо.

1 Ответ

0 голосов
/ 22 января 2020

Используйте событие change () после выбора значения. Если поле теряет фокус без изменения содержимого, событие не инициируется. Чтобы вызвать событие вручную, примените .change () без аргументов. В вашем случае это должно быть.

$('#editCategoryModal form select[name="parent_id"]').val(parentId).change();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...