I have function delete on my table ( using datatables) this delete is work normally but i want to add some pop up alert like "onclick" on my delete , but its didnt work on my button
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->addColumn('Nama', function ($pns) {
return ''.$pns->users->nama.'';
})
->editColumn('edit', function ($pns) {
return '<i class="glyphicon glyphicon-edit"></i>';
})
->editColumn('hapus', function ($pns) {
$c = csrf_field();
$m = method_field('DELETE');
return "<form action='/delete/$pns->id' method='POST')>
$c
$m
<button style='margin-left:10px; width: 30px;' type='submit'
class='btn btn-xs btn-danger delete' onclick='return
confirm('do you want to delete this data ?')'>
<i class='glyphicon glyphicon-remove-circle'></i>
</button>
</form>";
})
->rawColumns(['Nama' => 'Nama','hapus' => 'hapus','action' => 'action','edit'=>'edit'])
->make(true);
}
its didnt work
i trying adding class
<form action='/delete/$pns->id' method='POST' class='delete-form'>
and add this script
<script>
$('.delete-form').submit(function(event){
if(!confirm('Anda yakin mau menghapus item ini ?')){
event.preventDefault();
}
});
but still didnt work . i put this on under my view .
i try to add onsubmit like this
<form onsubmit='return confirm('Anda yakin mau menghapus item ini ?')'>
still didnt work , iam from this thread this link , but i didnt find the answer ..
look this image
can someone help me ?
UPDATE
i tryng add this form class
return "<form action='/delete/$pns->id' method='POST' class='delete-form')>
this pop up is showing after i click this delete button but this message is null/empty ,
#push('scripts')
<script>
$(function() {
$('#table').DataTable({
processing: true,
serverSide: true,
responsive: true,
ajax: '{!! route('d_pns') !!}',
columns: [
{ data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},
{ data: 'Nama', name: 'Nama'},
{ data: 'NIP_lama', name: 'NIP_lama'},
{ data: 'NIP_baru', name: 'NIP_baru'},
{ data: 'TMT_CPNS', name: 'TMT_CPNS'},
{ data: 'TMT_PNS', name: 'TMT_PNS'},
{ data: 'TMT_gol_ruang', name: 'TMT_gol_ruang'},
{ data: 'master_golongan.golongan', name: 'master_golongan.golongan'},
{ data: 'master_jabatan.nama_jabatan', name: 'master_jabatan.nama_jabatan'},
{ data: 'edit', name: 'edit', orderable: false, searchable: false},
{ data: 'hapus', name: 'hapus', orderable: false, searchable: false},
],
});
})
$('.delete-form').submit(function(event){
if(!confirm('Anda yakin mau menghapus item ini ?')){
event.preventDefault();
}
});
</script>
#endpush
why this message on confirm is empty ?
Your 1st attempt issue looks to be escaping the quotes " and '. try putting your message inside double quotes " ". This should resolve your problem
<button style='margin-left:10px; width: 30px;' type='submit'
class='btn btn-xs btn-danger delete' onclick='return
confirm("do you want to delete this data ?")'>
<i class='glyphicon glyphicon-remove-circle'></i>
</button>
SOLVED
Need to add
<script type="text/javascript">
function confirm_delete() {
return confirm('Apakah anda yakin untuk menghapus data ini ? ');
}
</script>
and add onclick return confirm_delete()
I will be dropping this for anyone that need to know how to use onclick from laravel yajra serverside.
$datatable = datatables()->collection($data)
->addColumn('action', function($data){
$button = '
<button type="button" data-security="'.$data->security.'" class="btn btn-warning btn-sm" onclick="OrderTicket(\''.$data->security.'\')">Sell
</button>
<button type="button" data-security="'.$data->security.'" class="btn btn-info btn-sm" onclick="createRequest(\''.$data->security.'\')">Buy
</button>
';
return $button;
})
->rawColumns(['action'])
->addIndexColumn()
->make(true);
return $datatable;
All you have to do is to escape the strings onclick="OrderTicket(\''.$data->security.'\')"
Related
I would like to know how could I make a data table row with Dynamic data.
I have this table:
But I want to show the red data dynamically according to my user roles.
For example if my role is equal to supervisor show him one buttons or if my role is different to this one show to user other buttons
this is my html table:
<div class="table-responsive-lg table-responsive-md">
<table id="table" class="table table-hover">
<thead>
<tr>
<th></th>
<th>Solicitante</th>
<th>Dia de solicitud</th>
<th>Estatus</th>
<th>Acciones</th>
</tr>
</thead>
</table>
</div>
And I call this method in document ready function
table = $('#table').DataTable({
'data': data
, 'columns': [
{
'className': 'details-control',
'orderable': false,
'data': null,
'defaultContent': ''
},
{ 'data': 'name' },
{ 'data': 'request.dateRquest' },
{ 'data': 'request.status' },
{
"className": '',
"orderable": false,
"data": null,
"defaultContent": '<button class= "btn btn-success btn-circle asignar" title="Asignar"> <i class="material-icons">assignment_ind</i></button>'+
" "+
'<button class= "btn btn-danger btn-circle rechazar" title="Rechazar"> <i class="material-icons">close</i></button>'
}
],
'order': [[1, 'asc']]
})
Can I iterate the data that i want to put on my table? In the picture I have a column call estatus if the estatus is different to pending I want to make other action with the button.
So I need to check the role of person that is sign in and check the status of each row
I want to make someting like this:
If(role == xRole && data.status != 'Pending'){
Change style of button
Put a different class for example change .Assign to .CloseRequest
}
If I knew how to interactue with the data that I'm going to put in the rows before the table was maked it will be more easy
It is possible?
Change
"defaultContent": '<button class= "btn btn-success btn-circle asignar" title="Asignar"> <i class="material-icons">assignment_ind</i></button>'+
" "+
'<button class= "btn btn-danger btn-circle rechazar" title="Rechazar"> <i class="material-icons">close</i></button>'
to
"defaultContent": getButtons()
and define this function:
function getButtons() {
switch (role) {
case "admin": return "sometemplate1";
default: return "sometemplate2";
}
}
just make sure that role is properly defined.
On a web page there is a table with a few rows. In each line there is a button that triggers a Javascript function:
PHP/HTML:
echo "<form action='' method='post'>";
echo "<button type='submit' name='test' value=".$row[4]." class='attest btn btn-info btn-round btn-icon btn-icon-mini btn-neutral' data-original-title='Test'><i class='now-ui-icons files_single-copy-04'></i></button>";
echo "</form>";
PHP:
if(isset($_POST['test']))
{
$file="/files/".$_POST['test'].".jpg";
$caption="Image: ".$_POST['test'];
if (file_exists($_SERVER['DOCUMENT_ROOT'].$file))
{
echo"<body onload='showtest()'>";
}
else
{
echo"<body onload='notest()'>";
}
}
JS:
function showtest()
{
swal({
title: 'Image',
text: <?php echo json_encode($caption); ?>,
imageUrl: <?php echo json_encode($file); ?>,
imageWidth: 400,
imageAlt: 'Image',
})
}
function noattest()
{
swal({
title: 'Image',
text: "There is no image.",
icon: 'warning',
})
}
A dialog is then displayed using Sweetalert2. The problem is that the table contains so many records that the web page must be scrolled. As a result, the alert is displayed correctly, but the web page "scrolls up again"/reloads. This is very annoying, because you have to search for the right row in the table again.
Is there a solution so that the web page does not jump to the top?
I am trying to bind an attribute to and id I have on a button to change its styling, basically I have a courses database table(using Laravel as backend) where each course has a Boolean named completed, All I want to do is if the course is completed(true) to render a specific id, and if it is not(false) to render another one, that's it, here's my code,
This is the blade template, this is inside a table:
<td>
<form method="POST" action="{{ route('course.completed', $course->name) }}" id="form-submit">
{{ csrf_field() }}
#if ($course->completed)
<button #click.prevent="onSubmit({{ $course }})" type="button" class="btn btn-sm" :id="cssClass">#{{ text }}</button>
#endif
</form>
And here is the vue instance, All i want to do here is to add an if condition that will set the cssClass properly to the name of the id that I want:
<script>
new Vue({
el: '#app',
data: {
cssClass: '',
text: ''
},
methods: {
onSubmit: function(course) {
axios.post('/MyCourses/' + course.name)
// .then(function (response){
// });
}
},
//Basically here's what I would like to be able to do
if (course.completed == true) {
this.cssClass = 'coursetogglingtrue',
this.text = 'Done!'
} else {
this.cssClass = 'coursetogglingfalse',
this.text = 'Not Yet!'
}
});
</script>
Right now the above code in the view instance errors out with "Uncaught SyntaxError: Unexpected token ." directed at the if statement course.completed, and it doesn't go away unless I delete the whole if statement, I know I'm not fetching the course from anywhere, I just don't know how yet, if there is a better idea/approach please let me know, and thanks for your time.
UPDATE:
Here's a change, this is what I have done so far,
As for the view:
#if ($course->pivot->completed == true)
<button #click.prevent="onSubmit({{ $course }})" type="button" class="btn btn-sm" :id="[isActive ? greenClass.aClass : redClass.aClass]">#{{ greenClass.text }}</button>
{{-- #else
<button #click.prevent="onSubmit({{ $course }})" type="button" class="btn btn-sm" :id="[isActive ? greenClass.aClass : redClass.aClass]"></button> --}}
#endif
Now as for the vue instance:
<script>
new Vue({
el: '#app',
data: {
isActive: true,
greenClass: {aClass: 'coursetogglingtrue', text: 'Done!'},
redClass: {aClass: 'coursetogglingfalse', text: 'Not Yet!'}
},
methods: {
onSubmit: function(course) {
axios.post('/MyCourses/' + course.name)
// .then(function (response){
// });
this.isActive = !this.isActive;
}
}
});
</script>
Since that I know the blade #if condition is passing as true, I can hardcode the is active is true, and when I press on the button I get what I wanted the class actually toggles, if that is not true I default to the other class, now the problem is I need that action to be performed on exactly one button, the one I pressed on, right now what happens is every single button toggles its class, I know that once again it's due to my code not being explicit about this, the thing is I don't know how yet, so please help if you have any idea, have been stuck on this for weeks and weeks, it's really frustrating that I can't get this one simple thing to work.
It doesn’t make sense to put an expression as a property key.
Try this:
new Vue({
el: '#app',
data: {
cssClass: '',
text: ''
},
methods: {
onSubmit: function(course) {
axios.post('/MyCourses/' + course.name)
// .then(function (response){
// });
if (course.completed == true) {
this.cssClass = 'coursetogglingtrue',
this.text = 'Done!'
} else {
this.cssClass = 'coursetogglingfalse',
this.text = 'Not Yet!'
}
}
}
});
i need to search by user firstname and lastname where are merge to one. Im working with laravel 5.1 and http://datatables.yajrabox.com/.
Here is me code of backend query:
$orders = Order::select([
'orders.created_at',
'users.firstname AS user_firstname',
'users.lastname AS user_lastname'
])
->join('users', 'users.id', '=', 'orders.user_id')
->where('orders.client_id', \Auth::user()->client_id)
->where('orders.status', 'finished');
And return:
return Datatables::of($orders)
->addColumn('user', function ($user) {
return $user->user_firstname.' '.$user->auser_lastname;
})
->addColumn('action', function ($order) {
return '<div class="btn-group" style="min-width: 76px;">
<i class="fa fa-edit"></i>
<i class="fa fa-times"></i>
</div>';
})
->removeColumn('user_firstname')
->removeColumn('user_lastname')
->make(true);
I merge user column to one with user_firstname and user_lastname.
When im searchng in datatable i need to search by this column - USER. Query to to be like this:
SELECT
`orders`.`created_at`,
`users`.`firstname` AS `agent_firstname`,
`users`.`lastname` AS `agent_lastname`,
FROM
`orders`
INNER JOIN `users` ON `users`.`id` = `orders`.`user_id`
WHERE
`orders`.`client_id` = '3'
AND `orders`.`status` = 'finished'
AND (
LOWER(`orders`.`created_at`) LIKE '%search_word%'
OR LOWER(`users`.`firstname`) LIKE '%search_word%'
OR LOWER(`users`.`lastname`) LIKE '%search_word%'
)
ORDER BY
`orders`.`created_at` DESC
LIMIT 10 OFFSET 0
Here is my datatable JS:
// Data tables
var oTable = $('#orders-data').dataTable({
"processing": true,
"serverSide": true,
"ajax": '/history/orders',
"columns": [
{ data: 'created_at', name: 'orders.created_at' },
{ data: 'user', name: 'user' },
{ data: 'action', name: 'action', orderable: false, searchable: false }
],
});
If I change line { data: 'user', name: 'user' } in JS to { data: 'user', name: 'users.firstaname' } than searching only in users.firstname column, But i need search in users.lastname too.
How to do that?
problem is solved! Here is my code:
$orders = Order::select([
'orders.created_at',
\DB::raw("CONCAT(users.firstname,' ',users.lastname) as user")
])
->join('users', 'users.id', '=', 'orders.user_id')
->where('orders.client_id', \Auth::user()->client_id)
->where('orders.status', 'finished');
function return:
return Datatables::of($orders)
->filterColumn('user', function($query, $keyword) {
$query->whereRaw("CONCAT(users.firstname,' ',users.lastname) like ?", ["%{$keyword}%"]);
})
->addColumn('action', function ($order) {
return '<div class="btn-group" style="min-width: 76px;">
<i class="fa fa-edit"></i>
<i class="fa fa-times"></i>
</div>';
})
->removeColumn('user_firstname')
->removeColumn('user_lastname')
->make(true);
Maybe it helps for others!
I am trying to render an anchor with json2html with the following transform:
'renderTimeline':[ {
tag: "a",
class: "btn btn-warning btn-circle",
style: "float: right;",
html: "<i class=\"icon-remove\"></i>",
"href": function() {
var myhref = "javascript:delSchedule(" + this + ");";
return myhref;
}
}]
intention is to delete the json object,which is passed to it with :
$('#sunTimeLine').json2html(sched1.sunday, transforms.renderTimeline, {'events':true});
I get the following as o/p on the rendered html:
<a class="btn btn-warning btn-circle" style="float: right;" href="javascript:delSchedule([object Object]);"><i class="icon-remove"></i></a>
when i click on the link(button) i get a message in browser console:
SyntaxError: missing ] after element list
Please help me solve this issue.
Assuming you are trying to pass the reference of the clicked element to the delSchedule function, you need to change your href definition like this:
"href": function() {
var myhref = "javascript:delSchedule(this);"; // note 'this' is part of the string, not concatenated
return myhref;
}
{
tag: "a",
class: "btn btn-warning btn-circle",
style: "float: right;",
html: "<i class=\"icon-remove\"></i>",
"href": function() {
var myhref = "javascript:delSchedule(this);";
return myhref;
}
}
check the documentation for more examples but you should be using the built in jquery events like so
'renderTimeline':[ {
tag: "a",
class: "btn btn-warning btn-circle",
style: "float: right;",
html: "<i class=\"icon-remove\"></i>",
"onclick": function(e) {
delSchedule(this);
}}
}]
Note that json2html supports most jquery events by just adding the prefix "on" to the event .. eg onclick, onfocus, etc...
Following code solved my issue:
'renderTimeline':[ {
tag: "a",
class: "btn btn-warning btn-circle",
style: "float: right;",
html: "<i class=\"icon-remove\"></i>",
"onclick": function(e) {
delSchedule(e);
}}
}]
If I am passing the following json :
{ monday:[ { startTime:10:00, endTime: 12:00, room_id:cse124 }, { startTime:13:00, endTime: 15:00, room_id:lotus } ] }
I want to be able to access "monday" in the function delSchedule(). How do i do this? Please help.