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

what is the content in addTask file, and you don't need to write anything in model body with id task-table-body. You should write it on addTask blade — Rahul Reghunath, Sep 15 '18 at 17:42

score 0 · Answer 1 · answered Sep 15 '18 at 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.

if I do it according to your description I get the following view: {"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}]} But how can I display the data with the html code? — slickness, Sep 25 '18 at 15:20

score 0 · Answer 2 · answered Sep 15 '18 at 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>

if I do it according to your description I get the following view: {"html":" \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n <\/i>\r\n <\/label>\r\n <\/td>\r\n \r\n \r\n <\/i>\r\n \"Neuer \r\n <\/div>\r\n <\/td>\r\n <\/thread>\r\n \r\n \r\n \r\n <\/i>\r\n <\/label>\r\n <\/td>\r\n \r\n title - 123456789\r\n \r\n \r\n <\/i>\r\n <\/a>\r\n <\/div>\r\n <\/td>\r\n <\/tr>\r\n \r\n \r\n \r\n <\/i>\r\n <\/label>\r\n <\/td>\r\n \r\n tgthzhzhzhz -test\r\n \r\n \r\n <\/i>\r\n <\/a>\r\n <\/div>\r\n <\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n<\/div>"} — slickness, Sep 25 '18 at 15:16

show modal with ajax - Laravel

2 Answers2