使用 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

您的 ajax 调用正在返回一个包含任务的视图。 $tasks 只能用于该视图。

您的 ajax 调用应该不返回视图。它应该只返回 json 格式的数据。

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

然后使用 jquery 从任务数组中循环并从中制作 html 并放置在模态中。

或

如果您仍想从 ajax 返回带有任务的视图，那么您的模式不应包含 foreach 循环（删除它）。它应该包含您从控制器（addTask）返回的视图，并且该视图应该有 foreach 循环来呈现 $tasks

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

阅读this也可能会有所帮助。

Answer 2

您需要将 #task-table-body 下方的所有 html 和代码从构建表格的模式中取出，并将其放入您的 elements.addTask 视图中。

然后使用它来构建您的表格并使用渲染命令将其作为 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>