Creating an edit modal in Laravel 5

Question

I am trying to create an edit modal for each row in the database. My page looks like this.

When I click on the edit icon, I open a modal where a user's details can be edited. The modal looks like this.

The modal I intend to show is like this.

My view.php

<div class="box-body">
  <table id="example2" class="table table-bordered table-hover">
    <thead>
      <tr>
        <!-- <th></th> -->
        <th>Username</th>
        <th>Contact</th>
        <th>Email</th>
        <th>Role Type</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      @foreach ($data as $datas)
        <tr>
          <td>{{ $datas->username }}</td>
          <td>{{ $datas->contact }}</td>
          <td>{{ $datas->email }}</td>
          <td>Role Type</td>
          <td>
            <div class="btn-group">
              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#edit-modal">
                <i class="fa fa-edit"></I>
              </button>
              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#delete-modal">
                <i class="fa fa-trash"></i>
              </button>
            </div>
          </td>
        </tr>
      @endforeach
    </tbody>
  </table>
</div>

<div class="modal fade" id="edit-modal">
  <div class="modal-dialog">
    <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" align="center"><b>Edit User</b></h4>
      </div>
      <div class="modal-body">
        <form role="form" action="/edit_user">
          <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
          <div class="box-body">
            <div class="form-group">
              <label for="exampleInputEmail1">User ID</label> 
              <input type="text" class="form-control" name="user_id" placeholder="User ID" >
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Username</label> 
              <input type="text" class="form-control" name="username" placeholder="Enter username">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Email</label> 
              <input type="text" class="form-control" name="email" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Contact</label> 
              <input type="text" class="form-control" name="contact" placeholder="Enter contact">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Change Password</label> 
              <input type="password" class="form-control" name="change_password" placeholder="Enter password">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

How can I achieve the desired output?

You have to add value in modal input, while open the model you can get value and add in the modal inputs VIA JS — DsRaj, Feb 19 '18 at 09:05
You'll need grab the values from the cells and fill them in the relevant fields while opening/showing the modal, additionally you'll have to reset it on closing the modal — Dev Man, Feb 19 '18 at 09:06
@ImmortalDude Could you just show me a demo of how to grab the values from the cells. I have searched the web for a long while but I am unable to get what I require — jptl431, Feb 19 '18 at 09:07
@DsRaj I do not have any Javascript in my page. I am using the controller to get the values from the database \ — jptl431, Feb 19 '18 at 09:08
@jptl431 You have to play with some javascript code to make it. — DsRaj, Feb 19 '18 at 09:11
https://stackoverflow.com/questions/1992142/html-modal-popup/47429870#47429870 — Adam Kozlowski, Feb 19 '18 at 09:18
Possible duplicate of [Laravel 5.1 pass data from view to modal](https://stackoverflow.com/questions/34473015/laravel-5-1-pass-data-from-view-to-modal) — fab, Feb 19 '18 at 09:23

Dev Man · Accepted Answer · 2021-08-30T04:30:47.773

Something like this would suffice.

Note: I assume you are using bootstrap 4 for your project, although bootstrap 3 would work too, just tweak it a bit to suit your needs

$(document).ready(function() {
  /**
   * for showing edit item popup
   */

  $(document).on('click', "#edit-item", function() {
    $(this).addClass('edit-item-trigger-clicked'); //useful for identifying which trigger was clicked and consequently grab data from the correct row and not the wrong one.

    var options = {
      'backdrop': 'static'
    };
    $('#edit-modal').modal(options)
  })

  // on modal show
  $('#edit-modal').on('show.bs.modal', function() {
    var el = $(".edit-item-trigger-clicked"); // See how its usefull right here? 
    var row = el.closest(".data-row");

    // get the data
    var id = el.data('item-id');
    var name = row.children(".name").text();
    var description = row.children(".description").text();

    // fill the data in the input fields
    $("#modal-input-id").val(id);
    $("#modal-input-name").val(name);
    $("#modal-input-description").val(description);

  })

  // on modal hide
  $('#edit-modal').on('hide.bs.modal', function() {
    $('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
    $("#edit-form").trigger("reset");
  })
})

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<div class="main-container container-fluid">
  <!-- heading -->
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <h1 class="text-primary mr-auto">Example list</h1>
      </div>
    </div>
  </div>
  <!-- /heading -->
  <!-- table -->
  <table class="table table-striped table-bordered" id="myTable" cellspacing="0" width="100%">
    <thead class="thead-dark">
      <tr>
        <th>#</th>
        <th> Name</th>
        <th> Description</th>
        <th> Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="data-row">
        <td class="align-middle iteration">1</td>
        <td class="align-middle name">Name 1</td>
        <td class="align-middle word-break description">Description 1</td>
        <td class="align-middle">
          <button type="button" class="btn btn-success" id="edit-item" data-item-id="1">edit</button>
        </td>
      </tr>
      <tr class="data-row">
        <td class="align-middle iteration">2</td>
        <td class="align-middle name">Name 2</td>
        <td class="align-middle word-break description">Description 2</td>
        <td class="align-middle">
          <button type="button" class="btn btn-success" id="edit-item" data-item-id="2">edit</button>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- /table -->
</div>
<!-- Attachment Modal -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="attachment-body-content">
        <form id="edit-form" class="form-horizontal" method="POST" action="">
          <div class="card text-white bg-dark mb-0">
            <div class="card-header">
              <h2 class="m-0">Edit</h2>
            </div>
            <div class="card-body">
              <!-- id -->
              <div class="form-group">
                <label class="col-form-label" for="modal-input-id">Id (just for reference not meant to be shown to the general public) </label>
                <input type="text" name="modal-input-id" class="form-control" id="modal-input-id" required>
              </div>
              <!-- /id -->
              <!-- name -->
              <div class="form-group">
                <label class="col-form-label" for="modal-input-name">Name</label>
                <input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
              </div>
              <!-- /name -->
              <!-- description -->
              <div class="form-group">
                <label class="col-form-label" for="modal-input-description">Email</label>
                <input type="text" name="modal-input-description" class="form-control" id="modal-input-description" required>
              </div>
              <!-- /description -->
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- /Attachment Modal -->

Suggestion

I would recommend you to include the form in another blade view, render it with all the relevant data and then return it to the controller then show it in the modal.

1

Worked perfectly! Thanks :) – jptl431 Feb 19 '18 at 09:47

score 0 · Answer 2 · answered Feb 19 '18 at 09:17

You can use the below code just pass the $data to the view and it will populate.

@foreach ($data as $datas)   
     <div class="modal fade" id="edit-modal">
              <div class="modal-dialog">
                <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" align="center"><b>Edit User</b></h4>
                  </div>
                  <div class="modal-body">
                    <form role="form" action="/edit_user">
                    <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
                    <div class="box-body">
                        <div class="form-group">
                          <label for="exampleInputEmail1">User ID</label> 
                          <input type="text" class="form-control" name="user_id" placeholder="User ID" value="{{$datas->user_id}}">
                        </div>
                        <div class="form-group">
                          <label for="exampleInputEmail1">Username</label> 
                          <input type="text" class="form-control" name="username" placeholder="Enter username" value="{{$datas->username}}">
                        </div>
                        <div class="form-group">
                          <label for="exampleInputEmail1">Email</label> 
                          <input type="text" class="form-control" name="email" placeholder="Enter email" value="{{$datas->email}}">
                        </div>
                        <div class="form-group">
                          <label for="exampleInputEmail1">Contact</label> 
                          <input type="text" class="form-control" name="contact" placeholder="Enter contact" value="{{$datas->contact}}">
                        </div>
                        <div class="form-group">
                          <label for="exampleInputEmail1">Change Password</label> 
                          <input type="password" class="form-control" name="change_password" placeholder="Enter password">
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div> 
    @endforeach

This gives me modal for all the rows in the Table. I want the modal for each specific row. Any ideas? — jptl431, Feb 19 '18 at 09:24
I think you are not getting what i am saying just call ajax function(pass the id of that user) on edit button click and put the code in a separate view and on the success function just call the view it will not repeat the model every time. do you understand what i am saying? — Anil Kumar Sahu, Feb 19 '18 at 09:37
@AnilKumarSahu This generates multiple modal divs. If there are 1000 rows, it will generate all those HTML 1000 times. — Amir Asyraf, Sep 04 '19 at 05:29
This is really bad for rendering, if you have 2k rows, the html will create 2k modals, use JQuery instead! — Daniel Beltrami, Oct 01 '19 at 14:32

score 0 · Answer 3 · answered Jun 11 '19 at 10:07

Easy and simple method.

Simply ensure your data-target and id values are dynamically changing with respect to the individual rows, in this case fix the modal box code into the loop that it takes the values dynamically. So since you are using Laravel you could do this:

@foreach($rows as $row)

    <a href="{{ route('rows.edit',$row->id) }}" data-toggle="modal" data-target="#myEditModal{{ $row->id }}" class=" text-info "><em class="fa fa-2x fa-edit mr-1"></em></a>


    <div  id="myEditModal{{ $row->id }}" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
             ....

@endforeach

This is really bad for rendering, if you have 2k rows, the html will create 2k modals, use JQuery instead! — Daniel Beltrami, Oct 01 '19 at 14:28

Creating an edit modal in Laravel 5

3 Answers3

Linked