Hi i'm trying delete operations on a table. I have added a bootstrap modal to confirm the action but I think cant able to pass the value cuz its always delete the first row data but when i using href from dropdown menu its work it just dont have bootstrap modal
Here my code is as follow:-
<tbody>
<?php $i = 1 + (6 * ($currentPage - 1)); ?>
<?php foreach ($surat as $s) : ?>
<tr>
<td scope="row"><?= $i++; ?></td>
<td><?= $s['no_sm'] ?></td>
<td><?= $s['pengirim'] ?></td>
<td><?= $s['tgl_sm'] ?></td>
<td>
<div class="dropdown">
<button class="btn btn-sm btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-list"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
Detail
Hapus
<a data-target="#myModal" data-toggle="modal" href="#myModal" class="dropdown-item">Modal</a>
</div>
</div>
</td>
</tr>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
<form action="/suratmasuk/delete/<?= $s['id']; ?>" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
Apakah anda yakin ingin menghapus data ini?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
<button type="submit" class="btn btn-danger">Hapus</button>
Hapus
</div>
</div>
</div>
</form>
</div>
<?php endforeach; ?>
</tbody>
Related
This is my Livewire Component. When I try to click a function like delete it doesn't work and doesn't give me dd(). Everything is ok I've checked several times and tried everything.
#extends('admin.layouts.layout')
#section('content')
<!-- Modal -->
<div>
<div
class="modal fade"
id="deleteModal"
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">Catagory Delete</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<form wire:submit.prevent="destroyCatagory">
<div class="modal-body">
<h6>Are You Sure YOu Want To Delete this Data?</h6>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="submit" class="btn btn-primary">Yes Delete</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
#if (session()->has('message'))
<div class="alert alert-success">{{session('message')}}</div>
#endif
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>
Catagory
<a
href="{{url('admin/catagory/create')}}"
class="float-end btn btn-primary"
>Add Catagory</a
>
</h4>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
<th>Action</th>
</tr>
#forelse ($catagories as $catagory)
<tr>
<td>{{$catagory->id}}</td>
<td>{{$catagory->name}}</td>
<td>{{$catagory->status=='1'? 'Hidden':'visible'}}</td>
<td>
<a
href="{{url('admin/catagory/'.$catagory->id.'/edit')}}"
class="btn btn-success"
>
Edit</a
>
<a
wire:click="deleteCatagory({{$catagory->id}})"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#deleteModal"
>Delete</a
>
</td>
</tr>
#empty #endforelse ($catagories as $catagory)
</table>
{{$catagories->links()}}
</div>
<div class="card-footer"></div>
</div>
</div>
</div>
</div>
#endsection
This is my index.blade.php for the livewire component. Everything seems to be ok in this component. I've checked everything several times and I've been stuck on this for many days, please help me.
public function deleteCatagory($id)
{
dd($id);
$this->catagory_id = $id;
}
public function destroycatagory()
{
$catagory= Catagory::find($this->catagory_id);
$path = 'uploads/catagory/'.$catagory->image;
if(File::exists($path)) {
File::delete($path);
}
$catagory->delete();
session()->flash('message','Catagory Deletd Successfully');
}
I want to send my data from a loop to show some detail in the modal. But the modal always get the last value from the loop.
<table class="table table-striped table-hover table-bordered" id="table">
<thead>
<tr>
<th>Kode Nota</th>
<th>Tanggal Transaksi</th>
<th>Nama Kosumen </th>
<th>Nomor Telpon </th>
<th>Status Transaksi</th>
</tr>
</thead>
<tbody>
#foreach($transaksi as $data)
<tr>
<td><?= $data->kodeNota?></td>
<td><?= $data->tanggalTransaksi?></td>
<td><?= $data->namaKonsumen ?></td>
<td><?= $data->noTelpKonsumen ?></td>
<td><?= $data->statusTransaksi ?></td>
<td><a data-item="{{ $data->kodeNota }}" class="btn btn-block" data-toggle="modal" data-target="#modalDetail">Detail</a></td>
</tr>
#endforeach
</tbody>
</table>
And this is the modal to show the detail
<div class="modal fade" id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="detailModal" 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">Detail Transaki {{$data->kodeNota}}</h5>
</div>
</div>
</div>
You can do it using Jquery easily. In your button add custom attribute like you did already, data-item="{{ $data->kodeNota }}" but instead of send one value, send full object if you want to populate others value in your modal like below.
<td><a data-item="{{ $data }}" class="btn btn-block details-button" data-toggle="modal" data-target="#modalDetail">Detail</a></td>
add an event function in your modal button,
$(document).on('click', '.details-button', function (e) {
e.preventDefault();
var item = $(this).data('item');
// for debug purpose you can console.log(item) and can actaully see you get the item object or not.
$('#modalDetail .text-center').text(item.kodeNota);
//update if you give your label a id
$('#modalDetail #kodeNota').text(item.kodeNota);
// you can populate your other data here
$('#modalDetail .text-center-two').text(item.other_data);
}
You can do this two ways.
Method 1:
Get the desired object id on click send ajax request to get data. Parse / write data to your modal body and then open the modal.
Method 2:
This is tricky and easier but very bad approach. generate individual unique modal for each row by using individual unique id.
#foreach($transaksi as $data)
<tr>
<td><?= $data->kodeNota?></td>
<td><?= $data->tanggalTransaksi?></td>
<td><?= $data->namaKonsumen ?></td>
<td><?= $data->noTelpKonsumen ?></td>
<td><?= $data->statusTransaksi ?></td>
<td><a data-item="{{ $data->kodeNota }}" class="btn btn-block" data-toggle="modal" data-target="#modalDetail-{{$data->id}}">Detail</a></td>
</tr>
<div class="modal fade" id="modalDetail-{{$data->id}}" tabindex="-1" role="dialog" aria-labelledby="detailModal" 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">Detail Transaki {{$data->kodeNota}}</h5>
</div>
</div>
</div>
#endforeach
In My list view I have all the details of department. But when I click on details It will display me a Pop-up. In Pop up box it has to fetch and give me all the details of particular field but instead of that it always give me details of last inserted record
Here is my code of blade file
#extends('layouts.master')
#section('content')
<section>
<div class="page-wrapper">
<div class="container-fluid">
<div class="row page-titles">
<div class="col-md-5 align-self-center">
<h4 class="text-themecolor">{{__('Department')}}</h4>
</div>
</div>
<div class="card">
<div class="card-body">
<div>
+ Add Department
</div>
<div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add Department </h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form id="myform" class="form-horizontal" method="POST" action="{{route('store_department')}}">
#csrf
<div class="form-group">
#if(Session::has('key'))
<?php $createdBy = Session::get('key')['username']; ?>
#endif
<div class="col-md-12">
<input type="hidden" name="createdBy" value="<?php echo $createdBy ?>">
<input type="text" class="form-control" name="nameOfDepartment" placeholder="Add New Department">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info waves-effect" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="table-responsive m-t-40">
<table class="table table-bordered table-striped ">
<thead>
<tr>
<th>Department Name</th>
<th>Created By</th>
<th>Created On</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#if($listOfDepartment != null)
#foreach($listOfDepartment as $departmentList)
<tr>
<td>{{$departmentList->nameOfDepartment}}</td>
<td>{{$departmentList->createdBy}}</td>
<td>{{$departmentList->created_at}}</td>
<td>
<i class="fa fa-edit fa-lg" style="color:#0066ff" aria-hidden="true"></i>
<i class="fa fa-trash fa-lg" style="color:red" aria-hidden="true"></i>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
</div>
</div>
<div id="myEditModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabelEdit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabelEdit">Edit Department</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" action="{{ route('update_department', $departmentList->id) }}">
#csrf
#method('PUT')
<div class="form-group">
<div class="col-md-12">
<input type="text" name="nameOfDepartment" class="form-control" placeholder="Edit Department" value="{{$departmentList->nameOfDepartment}}">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info waves-effect" data-dismiss="modal">Update</button>
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
#endsection
here is my code of department controller
<?php
namespace App\Http\Controllers;
use App\Department;
use Illuminate\Http\Request;
class DepartmentController extends Controller
{
public function createDepartment()
{
return view('pages.department');
}
public function storeDepartment(Request $request)
{
$department = new Department();
$department->createdBy = $request->get('createdBy');
$department->nameOfDepartment = $request->get('nameOfDepartment');
$department->save();
return redirect('list-department')->with('Success', 'Department Added Successfully!');
}
public function listDepartment()
{
$listOfDepartment = Department::all();
return view('pages.department', compact('listOfDepartment'));
}
public function editDepartment($id)
{
$departments = Department::find($id);
return view('pages.department', compact('departments', 'id'));
}
public function updateDepartment(Request $request, $id)
{
$department = Department::find($id);
$department->createdby = $request->get('createdBy');
$department->nameOfDepartment = $request->get('nameOfDepartment');
$department->save();
return redirect('list-department')->with('Success', 'Department Updated Successfully!');
}
public function deleteDepartment($id)
{
$department = Department::find($id);
$department->delete();
return redirect('list-department')->with('Success', 'Department Deleted SuccessFully!');
}
}
And Here Are My Routes
Route::get('add-department', 'DepartmentController#createDepartment')->name('create_department');
Route::post('store-department', 'DepartmentController#storeDepartment')->name('store_department');
Route::get('list-department', 'DepartmentController#listDepartment')->name('list_department');
Route::get('edit-department/{id}', 'DepartmentController#editDepartment')->name('edit_department');
Route::put('update-department/{id}', 'DepartmentController#updateDepartment')->name('update_department');
Route::get('delete-department/{id}', 'DepartmentController#deleteDepartment')->name('delete_department');
Your modal is always created with the last $departmentList
You are using this to create some kind of list
#foreach($listOfDepartment as $departmentList)
<tr>
<td>{{$departmentList->nameOfDepartment}}</td>
<td>{{$departmentList->createdBy}}</td>
<td>{{$departmentList->created_at}}</td>
<td>
<a href="{{route('edit_department', $departmentList->id)}}" data-toggle="modal" data-target="#myEditModal">
<i class="fa fa-edit fa-lg" style="color:#0066ff" aria-hidden="true"></i>
</a>
<a href="{{route('delete_department', $departmentList->id)}}">
<i class="fa fa-trash fa-lg" style="color:red" aria-hidden="true"></i>
</a>
</td>
</tr>
#endforeach
You end the loop here so $departmentList is the last one from the loop
Later you add some html again that uses $departmentList
<form class="form-horizontal" method="POST" action="{{ route('update_department', $departmentList->id) }}">
This variable still contains the last department from your loop before.
You can probably utilize some javascript that opens the modal and put the correct post url in place.
Im using Spring MVC and AngularJS to build my app and I been looking for a way to pass a table registry data to a modal in order to edit that registry but I haven´t find a working example so, thats my question how can a I pass the registry data to a modal?
This is what I have so far:
Table
<table class="table table-hover table-responsive">
<thead class="table-striped">
<th>Email</th>
<th>Nombre</th>
<th>Apellidos</th>
<th>Rol</th>
<th>Acciones</th>
</thead>
<tbody>
<tr data-ng-show="allUsuarios.length === 0">
<td colspan="4" class="warning">No hay registros para mostrar</td>
</tr>
<tr data-ng-repeat="usuarios in allUsuarios">
<td>{{usuarios.email}}</td>
<td>{{usuarios.nombre}}</td>
<td>{{usuarios.apellidos}}</td>
<td>{{usuarios.idRol.tipoRol}}</td>
<td>
<input type="hidden" value="{{usuarios.idUsuario}}"/>
<button class="btn btn-primary" data-toggle="modal" data-target="#formModalEditar"><i class="glyphicon glyphicon-pencil"></i></button>
<button class="btn btn-danger" data-toggle="modal" data-target="#formModalEliminar"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr>
</tbody>
</table>
And the Modal:
<!--EDIT MODAL-->
<div class="col-lg-12">
<div class="modal fade" id="formModalEditar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="H2">Editar Usuario</h4>
</div>
<div class="modal-body">
<form role="form" action="add" method="post">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="text" required=""/>
<label>Nombre</label>
<input class="form-control" type="text" required=""/>
<label>Apellidos</label>
<input class="form-control" type="text" required=""/>
<label>Rol</label>
<br>
<div class="btn-group open">
<button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</div>
</div>
<div class="text-right">
<button type="submit" class="btn btn-success">Guardar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--END EDIT MODAL-->
PS: I don´t know why when I press Ctrl+K to format the code, it gets displayed like that, sorry.
First of all you have to define a registery in you angular component
currentRegistery : Registery;
In your table you have to add an onclick on the edit icon of each registery to be able to set the current Registery with the selected registery
<button class="btn btn-primary" data-toggle="modal" data-target="#formModalEditar" onclick=“currentRegistery=usuarios”><i class="glyphicon glyphicon-pencil"></i></button>
Finally on your modal you can deal directly with the currentRegistery object.
I have a BIG PROBLEM, my data tables coundt work when i put a Bootstrap Modal in, the Bootstrap Modal is in the tr for Edit data for Looping.
here's my table and modal within
<table id="data" class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th><center>Foto</center></th>
<th><center>Nip</center></th>
<th><center>Nama</center></th>
<th><center>Action</center></th>
</tr>
</thead>
<tbody>
<?php include( "../koneksi.php"); $no=1 ; $data_pegawai=m ysql_query( 'select * from data_pegawai'); while($data=m ysql_fetch_array($data_pegawai)){ ?>
<tr>
<td>
<?php echo $no; ?>
</td>
<td>
<?php echo $data[ 'foto']; ?>
</td>
<td>
<?php echo $data[ 'nip']; ?>
</td>
<td>
<?php echo $data[ 'nama']; ?>
</td>
<td>
<a class="btn btn-warning btn-md" data-toggle="modal" data-target="#myModalEdit<?php echo $data['id']; ?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
<a class="btn btn-danger btn-md"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
</td>
<td>
<!-- Dialog Modal Edit -->
<div class="modal fade" id="myModalEdit<?php echo $data['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $data['id']; ?>" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel<?php echo $data['id']; ?>">Edit Data</h4>
</div>
<div class="modal-body">
<form role="form" action="../master-pegawaiSimpan.php" method="post" enctype="multipart/form-data">
<div class="box-body">
<div class="form-group">
<div class="col-lg-12">
<label for="agama">Nip</label>
<input type="text" class="form-control" name="nip" placeholder="Nip" value="<?php echo $data['nip']; ?>">
<label for="agama">Nama</label>
<input type="text" class="form-control" name="nama" placeholder="Nama" value="<?php echo $data['nama']; ?>">
<br>
<label for="agama">Foto</label>
<input type="file" class="form-control" name="foto">
<br>
</div>
</div>
<div class="box-footer">
<button type="submit" value="Simpan" name="Simpan" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php $no++; } ?>
</tbody>
</table>
and i confused with the order of javascripts, did it make an effect?
So, if i delete the modal inside the table, data tables were fine
Your problem is a mismatch between the number of header <th> elements and the number column <td> elements. They must match exactly.
So you have two options :
Add an extra <th> element, or
Place the modal outside of the table. This is what you should do in my opinion. There is no reason what so ever for replicating the popover markup over and over, you could do something like this instead :
<a class="btn btn-warning btn-md" data-toggle="modal" data-target="#myModalEdit" edit-id="<?php echo $data['id']; ?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
remove id from the modal as well
<div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
and add a click event to populate data from the row when the modal is about to be shown:
$('a[data-toggle="modal"]').on('click', function() {
$tr = $(this).closest('tr');
$('[name="nip"]').val($tr.find('td:eq(2)'));
$('[name="nama"]').val($tr.find('td:eq(3)'));
//etc
})