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并放入模式。

OR

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

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

阅读this也可能有帮助。

Answer 2

您需要将＃task-table-body下面的所有html和代码从构建表的模式中删除，并将其放入elements.addTask视图中。

然后使用它来构建表，并使用render命令将其返回为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>

使用ajax显示模态-Laravel

2 个答案: