показать модал с ajax - Laravel

Question

Я бы хотел отобразить содержимое моего маршрута в модальном режиме. Для этого я вызываю модал с помощью кнопки и хочу загрузить данные через ajax в модал. Я всегда получаю сообщение об ошибке: Undefined variable: tasks Я включил модал в индексную страницу, потому что иначе я не могу разбудить его кнопкой. Где ошибка?

Кнопка

<li><a href="{{route('todolists.show', $list->id)}}" id="show-task-modal" class="btn btn-success btn-xs white hover-hidden">
                                        <i class="fa fa-plus"></i> Erstellen
                                    </a>
                                </li>

Контроллер

   public function show($id)
{
    $todolists = Todolists::find($id);
    $tasks = $todolists->tasks()->orderBy('created_at', 'dsc')->get();

    return view('elements.addTask', compact('tasks'));
}

Маршрут

Route::get('/tasks/{id}', 'Admin\TaskController@show')->name('todolists.show');

функция

$(document).ready(function () {
      $('body').on('click', '#show-task-modal', function(event) {
                event.preventDefault();

                    var anchor = $(this),
                            url = anchor.attr('href'),
                            title = anchor.data('title');

                        $("#task-modal-subtitle").text(title);

                        $.ajax({
                                url: url,
                            dataType: 'html',
                            success: function(response) {
                                $('#task-table-body').html(response);
                            },
                            error: function (data){
                                    console.log(data);
                            }
                    });

                    $('#task-modal').modal('show');
            });
        });

Модальные

<div class="modal fade" id="task-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Todo List</h4>
                <p>of <strong>To do List 1</strong></p>
            </div>
            <div id="task-table-body" class="modal-body">
                <div class="panel panel-default">
                    <table class="table">
                        <thread>
                            <td width="50" style="vertical-align: middle;">
                                <label class="checkbox">
                                    <input type="checkbox" name="check_all" id="check-all">
                                    <i style="top: -12px;"></i>
                                </label>
                            </td>
                            <td>
                                <div class="fancy-form">
                                    <i class="fa fa-tasks"></i>
                                    <input type="text" class="form-control" placeholder="Neuer Task">
                                </div>
                            </td>
                        </thread>
                        <tbody>
                        @foreach ($tasks as $task)
                            <tr id="task-{{$task->id}}">
                                <td>
                                    <label class="checkbox">
                                        <input type="checkbox">
                                        <i style="top: -12px;"></i>
                                    </label>
                                </td>
                                <td  class="task-item done">
                                    {{$task->title}}
                                    <div class="row-buttons">
                                        <a href="#" class="btn btn-xs btn-danger">
                                            <i class="glyphicon glyphicon-remove"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer clearfix">
                <div class="pull-left">
                    <a href="#" class="btn btn-xs btn-default active">All</a>
                    <a href="#" class="btn btn-xs btn-default">Active</a>
                    <a href="#" class="btn btn-xs btn-default">Completed</a>
                </div>
                <div class="pull-right">
                    <small>3 items left</small>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

Вам нужно вынуть все html и код ниже # task-table-body из вашего модала, который строит таблицу, и поместить его в представление elements.addTask.

Затем используйте его для построенияtable и верните его как html с командами рендеринга.

$view = view('elements.addTask', compact('tasks'))->render();
return response()->json(['html'=>$view]);

И замените его на # task-table-body, как вы уже делаете.

 success: function(response) {
   $('#task-table-body').html(response.html);
 },

Поместите этов представлении elements.addTask (или, возможно, в другом).

 <div class="panel panel-default">
   <table class="table">
     <thread>
       <td width="50" style="vertical-align: middle;">
         <label class="checkbox">
           <input type="checkbox" name="check_all" id="check-all">
              <i style="top: -12px;"></i>
                 </label>
       </td>
       <td>
          <div class="fancy-form">
            <i class="fa fa-tasks"></i>
              <input type="text" class="form-control" placeholder="Neuer Task">
          </div>
      </td>
      </thread>
     <tbody>
     @foreach ($tasks as $task)
       <tr id="task-{{$task->id}}">
       <td>
        <label class="checkbox">
          <input type="checkbox">
          <i style="top: -12px;"></i>
        </label>
      </td>
      <td  class="task-item done">
      {{$task->title}}
      <div class="row-buttons">
      <a href="#" class="btn btn-xs btn-danger">
        <i class="glyphicon glyphicon-remove"></i>
       </a>
      </div>
     </td>
    </tr>
     @endforeach
    </tbody>
    </table>
  </div>

Answer 2

Ваш вызов ajax возвращает представление с задачами.$ tasks можно использовать только в этом представлении.

Ваш вызов ajax должен не возвращать представление.Он должен просто возвращать данные в формате json.

return response()->json(['tasks' => $tasks]);

Затем использовать jquery для цикла из массива задач, сделать из него html и поместить его в модальный.

ИЛИ

Если вы все еще хотите вернуть представление с задачами из ajax, тогда ваш модал не должен содержать цикл foreach ( удалить его ).Он должен содержать то представление, которое вы возвращаете из контроллера (addTask), и это представление должно иметь цикл foreach для отображения $ tasks

<div> ..@include('addTasks') </div> //modal

Read , это также может помочь.