show modal with ajax - Laravel

Question

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

Answer 1

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.

Answer 2

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>