Not sure how did it reset/s itself even though it's inside the foreach loop. Here's a snippet from of my blade view:
<tbody>
<?php $counter = 1; ?>
#foreach ($guidelines as $guideline)
<tr>
<td class="text-center">{{ $counter }}</td>
<td>{{ $guideline->description }}</td>
<td>
<i class="far fa-edit"></i>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal"><i class="far fa-trash-alt"></i></button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this?</p>
</div>
<div class="modal-footer">
Confirm
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
<?php $counter++; ?>
</tr>
#endforeach
</tbody>
Edit works with /general-guidelines/1/edit, /general-guidelines/2/edit, /general-guidelines/5/edit, etc. But /delete would always end up at /1/delete
First, because you have only one modal (#myModal), and your button always reference to the(#myModal), so that it will always open up the first modal. Try the solution #myModal{{ $loop->index }}.
Secondly, You can use $loop->iteration instead of $counter in the foreach loop.
Try this.
<tbody>
#foreach ($guidelines as $guideline)
<tr>
<td class="text-center">{{ $counter }}</td>
<td>{{ $guideline->description }}</td>
<td>
<i class="far fa-edit"></i>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal{{ $loop->index }}"><i class="far fa-trash-alt"></i></button>
<div class="modal fade" id="myModal{{ $loop->index }}" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this?</p>
</div>
<div class="modal-footer">
Confirm
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
#endforeach
with for loop, multiple modals are created but for all the modals generated with for loop, you can not use same id 'myModal' . id should be unique.
Related
I created one table that list items, and I added two buttons(edit and delete) so, the button edit is working, but the button delete is not working, and I'm making me carzy because I don't find the error. this is the table:
<table id="datatable" class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th>text</th>
<th class="disabled-sorting" width="10%"></th>
<th class="disabled-sorting" width="10%"></th>
</tr>
</thead>
<tbody>
#foreach($Items as $item)
<tr>
<td>{{ $item->text }}</td>
<td><a href="{{ route('ItemsController.edit', $item->id) }}" class="btn btn-primary btn-fab btn-icon btn-round" title="Edit">
<i class="fa fa-edit"></i></a>
</td>
<td>
<a href="#" class="btn btn-primary btn-fab btn-icon btn-round btn-delete" title="Delete" data-id="{{ $item->id }}" data-toggle="modal" data-target="#modal-default" data-route="{{ route('ItemsController.destroy', $item->id) }}" data-title="{{ $item->id }}">
<i class="fa fa-trash"></i></a>
</td>
</tr>
#endforeach
</tbody>
</table>
the modal is:
<div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Delete?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form class="" action="" method="post">
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button type="submit" class="btn btn-danger" name="button">yes, delete</button>
</form>
</div>
</div>
</div>
</div>
javascript data:
<script>
$(document).on('click', '.btn-delete', function(){
$('.modal form').attr('action', $(this).data('route'));
$('#ModalLabel').text($(this).data('title'));
})
</script>
and controller function destroy
public function destroy(Items $item) {
$item->delete();
return redirect()->route('items.index')->with('success', 'Deleted Success');
}
I checked it line by line, and I don't know what I'm wrong, please help me
Many times thanks for getting into this.
You need to trigger your modal from JS.
If it is bootstrap 4 then just simply open it using,
$('.modal form').attr('action', $(this).data('route'));
$('#ModalLabel').text($(this).data('title'));
//This will trigger modal
$("#modal-default").modal();
If it is bootstrap 5 then just simply open it using,
$('.modal form').attr('action', $(this).data('route'));
$('#ModalLabel').text($(this).data('title'));
//This will trigger modal
modal = new bootstrap.Modal(document.getElementById("modal-default"));
modal.show();
I want to show no duplicates of the dropdown, I already set distinct in the controller query builder. Here's the blade view for this dropdown:
<div class="btn-group">
<button class="ml-2.5 mt-2 btn btn-primary " type="button">
Notifications: {{ $notifications }}
</button>
<button type="button" class="mt-2 btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
#foreach ($getmahasiswa as $requests)
<li><a class="dropdown-item" href={{ url('/dashboard/nameasrequest',$requests->id_mhs) }}>{{ $requests->name }} | {{ $requests->id_mhs }}</a></li>
#endforeach
</ul>
</div>
This dropdown table automatically toggled all the data that have the same name, i want it to open normally one by one. Here's the blade view for the dropdown table:
<div class="container">
<table class="table table-condensed" id="myTable">
<thead>
<tr>
<th>Mata Kuliah</th>
</tr>
</thead>
#foreach($getmahasiswa as $collapse)
<tbody class="panel">
<tr data-bs-toggle="collapse" data-bs-target="#demo{{$collapse->id_mhs}}" data-bs-parent="#myTable">
<strong>
<td>{{ $collapse->mk }}</td>
</strong>
</tr>
<tr id="demo{{$collapse->id_mhs}}" class="collapse">
<td colspan="6" class="hiddenRow">
<div>
<strong>{{$collapse->name}}</strong>
</div>
</td>
<td class="align-self-end">
<div>
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal{{$collapse->id_mhs}}" class="mr-3 text-sm bg-blue-500 hover:bg-green-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline">
<a href=# >APPLY ALL</a>
</button>
</div>
</td>
<div class="modal fade" id="exampleModal{{$collapse->id_mhs}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Mata Kuliah</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
#foreach($getmahasiswa as $collapses)
{{$collapses->mk}}
<br>
#endforeach
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</tr>
</tbody>
#endforeach
</table>
</div>
and here's the controller to fetch the data for both of views
$lr = DB::table('lr2')->get();
$notifications = DB::table('lr2')->distinct()->count('id_mhs');
$getmahasiswa = DB::table('lr2')->distinct()->select('lr2.id_mhs', 'users.name', 'lr2.mk')
->join('users', 'lr2.id_mhs', '=', 'users.id')->get();
return view('dashboard', compact('lr', 'notifications', 'getmahasiswa'));
Inside a view blade.php, I have a problem passing data within a foreach loop to a outside loop bootstrap modal.
show.blade.php:
{!! Form::open(['method' => 'PATCH','action' => ['OrderController#update',$order_items->id], 'class'=>'table_form']) !!}
#foreach($order_items as $oi)
<tr class="order-form-row">
<td>
{{ $oi->name }}
</td>
<td>
<a class="btn btn-block" data-toggle="modal" data-target="#deleteLineItemModal"><i class="icon-trash"></i></a>
</td>
</tr>
#endforeach
{!! Form::close() !!}
{{--bootstrap modal--}}
<div class="modal fade" id="deleteLineItemModal" tabindex="-1" role="dialog" aria-labelledby="deleteLineItemModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body edit-content">
<h5 class="text-center">Are you sure you want to delete this line item? {{$oi->id}}</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-left">Yes, I am sure</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">No, not today</button>
</div>
</div>
</div>
</div>
When user click the delete icon for any record inside the table, it will pop up the modal to ask user if they want to delete selected row of record. How can I solve this problem?
You need to use javascript/jquery to pass values to modal.
{!! Form::open(['method' => 'PATCH','action' => ['OrderController#update',$order_items->id], 'class'=>'table_form']) !!}
#foreach($order_items as $oi)
<tr class="order-form-row">
<td>
{{ $oi->name }}
</td>
<td>
<a data-item="{{ $oi->id }}" class="btn btn-block" data-toggle="modal" data-target="#deleteLineItemModal"><i class="icon-trash"></i></a>
</td>
</tr>
#endforeach
{!! Form::close() !!}
{{--bootstrap modal--}}
<div class="modal fade" id="deleteLineItemModal" tabindex="-1" role="dialog" aria-labelledby="deleteLineItemModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body edit-content">
<h5 class="text-center">Are you sure you want to delete this line item? {{$oi->id}}</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-left">Yes, I am sure</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">No, not today</button>
</div>
</div>
</div>
<script>
$(document).on("click", ".btn-block", function () {
var itemid= $(this).attr('data-item');
$("#lineitem").attr("href","/orders/line-item-delete/"+itemid)
});
</script>
I have a view which display a table of users from the database and the last column has delete button on it which currently work fine for me but i want to display confirmation model and when the user click on Delete button it will delete the selected use
This is the current code for delete button which is work fine:
<button type="button" class="btn mr-0 mb-0 btn-outline-primary btn-sm"><i class="icon-trash3"></i></button>
Now i used this modal which i have to click on delete button in order to delete the selected user
<div class="modal fade text-xs-left" id="iconModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<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" id="myModalLabel2"><i class="icon-warning2"></i> Confirmation Message</h4>
</div>
<div class="modal-body">
<p>Are you sure that you want to <strong>Delete</strong> this user ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-primary">Delete</button>
</div>
</div>
</
You do not need to generate a modal for each users. Just build a single modal and use data- attributes for dynamic parts.
So, as minimal, use data- attribute for every button, e.g.
data-user-id="{{ }}" to use in form action:
<i class="icon-trash3"></i>
In the modal window use a form with delete method:
<form id="deleteUserForm" method="POST">
{{ method_field("DELETE") }}
<button class="btn btn-danger" type="submit">DELETE</button>
</form>
In script use:
<script>
$('#deleteUserForm').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
$('#deleteUserForm').attr('action', '/user/' + button.data('user-id'));
});
</script>
In route use:
Route::delete('/user/{user}', 'UserController#destroy');
P.S. You may also use other data attributes ti use dynamically e.g. data-user-name="{{ }}" to show the user's name will be deleted.
Ok, I have used this method below to make it work but that will need to make a modal for each delete button so i don't think this is a good solution for backend may have more than 1k users or even 200k users so i want this to work when the modal outside the loop ?
#foreach ($users as $user)
<tr>
<th scope="row">{{ $loop->index + 1 }}</th>
<td>{{ $user->fullname }}</td>
<td>{{ $user->username }}</td>
<td>{{ $user->email }}</td>
<td>
#foreach( $roles as $role ) {{ $user->role_id == $role->id ? $role->name : ''}} #endforeach
</td>
<td>
<a href="{{ route('dUseInfo', [$user->id]) }}">
<button type="button" class="btn mr-0 mb-0 btn-outline-primary btn-sm"><i class="icon-settings2"></i></button>
</a>
<button type="button" class="btn mr-0 mb-0 btn-outline-primary btn-sm" data-toggle="modal" data-target="#iconModal-{{ $user->id }}"><i class="icon-trash3"></i></button>
<!-- Modal -->
<div class="modal fade text-xs-left" id="iconModal-{{ $user->id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<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" id="myModalLabel2"><i class="icon-warning2"></i> Confirmation Message</h4>
</div>
<div class="modal-body">
<p>Are you sure that you want to <strong>Delete</strong> this user ?</p>
</div>
<div class="modal-footer">
{!! Form::open(['route' => ['deleteUser', $user->id], 'class' => 'delete', 'method' => 'DELETE']) !!}
<button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-outline-primary">Delete</button>
{!! Form::close() !!}
</div>
</div>
</div>
</div>
</td>
</tr>
#endforeach
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>{{$todo->title}}</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">×</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>
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>{{$todo->title}}
<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">×</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>