Pass data to modal in the same page, Laravel

Question

So i have this index page which has the list of task and inside the table is the title of task and the actions, what i'm trying to do is when i click the task title the modal will pop whereas in the modal is its body and content of the said task.. here is the code

controller

public function index()
{   
    $posts = Post::orderBy('created_at', 'desc')->paginate(10);
    return view('posts.index')->with('posts', $posts);
}

index page

  @extends('layout.app')
  @section('content')
  <div class="container">
    <div class="col-md-6" style="float:left;">
        <h2>Todo List</h2>
        <div class="table-hover">
          <table class="table">
          <thead class="thead-default">
          <tr>
          <th>Title</th>
          <th>Status</th>
          <th>Action</th>
          </tr>
          </thead>
          <tbody>
           @if(count($todos) > 0)
            @foreach($todos as $todo)
            <tr>
                <th><a href="/todo/{{$todo->id}}" data-toggle="modal" data-target="#exampleModal3">{{$todo->title}}</a></th>
                <td>{{$todo->status}}</td>
                <td><a class="btn btn-sample btn-sm">Edit</a> <a class="btn btn-sample2 btn-sm">Delete<a></td>
            </tr>
          </tbody>
            @endforeach
                @else
                <th><h2>Nothing to show</h2></th>
            @endif
          </table>
        </div>
    </div>

the modal below the same page

                                                                         <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
   <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModal3Label">View task</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
        </button>
       </div>
        <div class="modal-body">
        <h3>{{$todo->title}}</h3>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

You can extract the code of your modal to a partial and then include it with passing the variable o it like this : `@include('partials.modal', ['todo'=>$todo])` ! — Maraboc, Jul 27 '17 at 10:14
@Maraboc it is going to add a modal for every todo. I think better would create a one modal and change their content — Oleksii Dubeniuk, Jul 27 '17 at 10:18
Try [this](https://stackoverflow.com/questions/34473015/laravel-5-1-pass-data-from-view-to-modal) :) — Maraboc, Jul 27 '17 at 10:39

score 0 · Answer 1 · answered Jul 27 '17 at 10:56

There are two methods to achieve this, either you repeat your modal with unique id with tr or records, or you create one modal, and onClick bring data from ajax or javascript, and fill it within modal. I'm explaining you the first and easiest one

  @extends('layout.app')
  @section('content')
  <div class="container">
    <div class="col-md-6" style="float:left;">
        <h2>Todo List</h2>
        <div class="table-hover">
          <table class="table">
          <thead class="thead-default">
          <tr>
          <th>Title</th>
          <th>Status</th>
          <th>Action</th>
          </tr>
          </thead>
          <tbody>
           @if(count($todos) > 0)
            @foreach($todos as $todo)
            <tr>
                <th><a href="/todo/{{$todo->id}}" data-toggle="modal" data-target="#exampleModal{{ $loop->iteration }}.">{{$todo->title}}</a>
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="exampleModal3Label{{ $loop->iteration }}">View task</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                            </button>
                           </div>
                            <div class="modal-body">
                            <h3>{{$todo->title}}</h3>
                            </div>
                            <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>

                </th>
                <td>{{$todo->status}}</td>
                <td><a class="btn btn-sample btn-sm">Edit</a> <a class="btn btn-sample2 btn-sm">Delete<a></td>
            </tr>
          </tbody>
            @endforeach
                @else
                <th><h2>Nothing to show</h2></th>
            @endif
          </table>
        </div>
    </div>

Pass data to modal in the same page, Laravel

1 Answers1