使用 ajax 显示模式 - Laravel

Posted 2023-03-14

【中文标题】使用 ajax 显示模式 - Laravel

【英文标题】：show modal with ajax - Laravel

【发布时间】：2019-02-20 03:57:52

【问题描述】：

我想以模式显示我的路线内容。为此，我使用按钮调用模态，并希望通过模态中的 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  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 -->

【问题讨论】：

addTask 文件中的内容是什么，你不需要在id为task-table-body的模型体中写任何东西。你应该把它写在 addTask 刀片上

【参考方案1】：

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

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

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

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

或

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

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

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

【讨论】：

如果我按照您的描述进行操作，我会得到以下视图："tasks":["id":1,"title":"title - 123456789","todolists_id":1 ,"completed_at":null,"created_at":null,"updated_at":null,"id":2,"title":"tgthzhzhzhz -test","todolists_id":1,"completed_at":null," created_at":null,"updated_at":null] 但是如何用 html 代码显示数据呢？

【参考方案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  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>

【讨论】：

如果我按照您的描述进行操作，我会得到以下视图："html":" \r\n \r\n \r\n \r\n \r\n \r \n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \"Neuer \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 标题 - 123456789\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \ r\n \r\n \r\n \r\n \r\n \r\n tgthzhzhzhz -test\r\n \r\n \ r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n"