Menu
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">×</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?
950
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
You have several problems going on. First, you have multiple elements with the same ID, which you cannot do. The ID must be unique. Second, you are using a click action on a link element, probably triggering its default behavior.
Modal helps us to work on another page without moving out of the current page, which helps not to lose sight of where we are. We are going to be using Bootstrap, Jquery, and Ajax to achieve this. Jquery and Ajax will send the URL with the id of the item we want to edit or view into the modal dynamically.
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">×</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.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
