weixin_33696106
weixin_33696106
2018-09-15 17:29
采纳率: 0%
浏览 21

用ajax显示模态-Laravel

I would like to display the content of my route in a modal. To do this, I call the modal with the button and want to load the data via ajax in the modal. I always get the error message: Undefined variable: tasks I have included the modal in the index page, because otherwise I can not rouse it with the button. Where is the mistake?

Button

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

Controller

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

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

route

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

function

$(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');
            });
        });

Modal

<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 -->
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • weixin_33725807
    weixin_33725807 2018-09-15 17:42

    Your ajax call is returning a view with tasks. $tasks can only be used on that view.

    Your ajax call should not return view. It should just return data in json format.

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

    Then use jquery to loop from tasks array and make html from it and place in modal.

    OR

    If you still want to return view with tasks from ajax then your modal should not contain foreach loop (remove it). It should contain that view that you are returning from controller (addTask) and that view should have foreach loop to render $tasks

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

    Read this also may be it can help.

    点赞 评论
  • weixin_33735676
    weixin_33735676 2018-09-15 20:38

    You need to take all the html and code below the #task-table-body out of your modal that builds the table and put it in your elements.addTask view.

    Then use it to build your table and return it as html with the render commands.

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

    And replace it to the #task-table-body like you're already doing.

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

    Put this is in your elements.addTask view (or maybe a different one).

     <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>
    
    点赞 评论

相关推荐