I've been trying to work with a reload button that will load the datatable data, but whenever i press the button, the table is not reloading or not loading the new content.
Here's my code for Datatable
var table = $('#m_table_1').dataTable({
responsive: true,
searchDelay: 500,
processing: true,
serverSide: true,
ajax: 'http://digitalbulletinboard.xyz/bulletin/sample.php?getLostTable',
columns: [
{data: 'id'},
{data: 'title'},
{data: 'description'},
{data: 'Actions'},
],
columnDefs: [
{
targets: -1,
title: 'Actions',
orderable: false,
render: function(data, type, full, meta) {
console.log(data);
return `
<span class="dropdown">
<a href="#" class="btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown" aria-expanded="true">
<i class="la la-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i class="la la-edit"></i> Edit Details</a>
<a class="dropdown-item" href="#"><i class="la la-leaf"></i> Update Status</a>
<a class="dropdown-item" href="#"><i class="la la-print"></i> Generate Report</a>
</div>
</span>
<button type="button" class="m-portlet__nav-link btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" title="View" id="reload">
<i class="la la-edit"></i>
</button>`;
},
}
],
});
And when clicking the reload button, I use this one
$("#reload").click(function () {
console.log("Reload");
table.api().ajax.reload(null, false);
});
Whenever i click the reload button. Nothing happens. is there a way to fix this? or something that I have done wrong?
I already tried but still nothing happens
$('#m_table_1').dataTable().api().ajax.reload();
Edit 1:
Changed the reload to
table.ajax.processing(null, false);
and got stuck to this one.
You didn't mention the version of DataTable you used. But for many cases situation you can try this one:
table.ajax.reload( null, false );
at least it works for latest version of DataTable.
Referenced from here: https://datatables.net/reference/api/ajax.reload()
Related
I am trying to trigger click() function on a button in onNext event.
{
element: "#action_header",
title: "Saving to database",
content: "After you declare the result .. ",
placement: "left",
onNext: function() {
$('.dropdown-toggle').click();
}
},
{
element: "#slideshow",
title: "Settings",
content: "Click on the Settings icon... ",
placement: "left",
// delay: 200,
// onShow: function() {
// $('.dropdown-toggle').click();
// }
},
But this will only highlight the button and show the `next step modal` elsewhere instead of specified element.
Here's the html:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i></button>
<ul class="dropdown-menu" role="menu">
<li class="active"><a id="detail_view" href="javascript:;">Detail View</a></li>
<li><a id="slideshow" href="javascript:;" onclick="adminSlideshowRedirect();">Slideshow</a></li>
</ul>
</div>
When I trigger $('.dropdown-toggle').click() from the console, the button is being clicked properly.
What am I doing wrong here?
The issue is your dropdown is being clicked, but it is toggled again, due to onBlur toggle of your dropdown. You need to remove onBlur toggle and it will work fine.
I am building a web application using Laravel 5.8. I have started to dive into using JQuery and it's amazing. However, I have not been able to find an answer to my issue. Hoping someone can help.
I have a view named "roles" and it is responsible for showing a list of the security-based roles on the system. On that view, I have a data table displaying that list of roles, date created, and so forth. There is a column for "Permissions" on that data table. Where previously I would put the list of permissions assigned with that role. If you look at my previous code, I was able to achieve that. I have not been able to figure it out with Jquery.
The previous view code:
#foreach ($roles as $role)
<tr>
<td>{{ $role->name }}</td>
<td>
#if($role->name === "superadmin")
<span class="badge badge-primary">All Permissions</span>
#else
#foreach($role->permissions()->pluck('permission_name') as $permission)
<span class="badge badge-primary">{{ $permission }}</span>
#endforeach
#endif
<td nowrap>#if($role->name != "superadmin")<span class="dropdown">
<a href="#" class="btn btn-sm btn-clean btn-icon btn-icon-md" data-toggle="dropdown" aria-expanded="true">
<i class="la la-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="{{ route('admin.security.roles.edit',$role->id) }}"><i class="la la-edit"></i> Edit Role</a>
<a class="dropdown-item" href="javascript:delete_role('{{ $role->id }}');"><i class="la la-remove"></i> Delete Role</a>
</div>
</span>
#endif
</tr>
#endforeach
The previous controller code:
public function index()
{
$roles = Role::all();
return view('backend.auth.roles.index')->with('roles', $roles);
}
The current php code:
public function index()
{
$permission = Permission::get();
if(request()->ajax()) {
return datatables()->of(Role::all())
->addColumn('actions', 'layouts._partials.backend._crud-default')
->rawColumns(['actions', 'permissions'])
->addIndexColumn()
->make(true);
}
return view('site.backend.auth.roles.index', compact('permission'));
}
The current view code:
<!--begin: Datatable -->
<table class="table table-striped- table-bordered table-hover table-checkable" id="roles_table">
<thead>
<tr>
<th>Name</th>
<th>Permissions</th>
<th>Created</th>
<th>Updated</th>
<th>Actions</th>
</tr>
</thead>
</table>
<!--end: Datatable -->
The current javascript code:
$(document).ready( function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#roles_table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('admin.security.roles.index') }}",
type: 'GET',
},
columns: [
{data: 'name'},
{data: 'permissions'},
{data: 'created_at'},
{data: 'updated_at'},
{data: 'actions', name: 'action', orderable: false},
],
order: [[0, 'name']],
});
});
The error message is showing the obvious and that $role and $permission variables are not present.
How can I render text from jsSocial to popover?
This is html: in data-content, the code from id=udostepnij must be rendered
<a href="#" data-html="true" title="Udostępnij" data-toggle="popover"
data-trigger="focus" data-content="<div id='udostepnij'></div>">
<span class="fa fa-share"></span> Udostępnij
</a>
This is JavaScript:
$("#udostepnij").jsSocials({
showLabel: false,
showCount: false,
shares: ["twitter", "facebook", "googleplus", "vkontakte", "pinterest", "stumbleupon", "whatsapp", "email", "reddit"],
shareIn: "popup"
});
$("[data-toggle=popover]").popover();
Does anyone know how to connect?
I was able to solve the problem:
Html:
<a href="#" data-html="true" data-placement="top" title="Udostępnij"
data-toggle="popover" data-trigger="focus" data-content="<div id='udostepnij'></div><script>
$('#udostepnij').jsSocials({
showLabel: false,
showCount: false,
shares: ['twitter', 'facebook', 'googleplus', 'vkontakte', 'pinterest', 'stumbleupon', 'whatsapp', 'email', 'reddit', 'blogger'],
shareIn: 'popup'
});
</script>"><span class="fa fa-share"></span> Udostępnij</a>
JavaScript:
$("[data-toggle=popover]").popover();
I've just started using Vue, (which seems really nice) and I've run into an issue.
I have a bootstrap4 dropdown that I'm using to populate a hidden form (clicking on a dropdown-item saves the data value to the form below).
This is only done as I can't style the normal select/option dropdown as I would like.
This was all working fine, until I tried implementing vue, as I'm not using a select component directly the solutions offered in the vue select documentation don't seem to work.
Any help would be much appreciated.
Thanks in advance
html
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle device-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
All Devices
</button>
<div class="dropdown-menu" aria-labelledby="device-dropdown">
<a class="dropdown-item" href="#" data-value="all">All Devices</a>
<a class="dropdown-item" href="#" data-value="imac">iMac</a>
<a class="dropdown-item" href="#" data-value="macbook">MacBook</a>
<a class="dropdown-item" href="#" data-value="ipad">iPad</a>
<a class="dropdown-item" href="#" data-value="iphone">iPhone</a>
</div>
<select name="device" class="hidden-device-dropdown">
<option></option>
</select>
</div>
js
// copies the selected dropdown element into a hidden select in the form
$('.dropdown-menu').click(function (e) {
e.preventDefault();
// change button text to selected item
var selected = $(e.target);
$(".device-dropdown").text($(selected).text());
// change option value (inside select) to selected dropdown
var form = $("select.hidden-device-dropdown").children("option");
$(form).val(selected.data("value"));
});
Edit: looks like v-on:click="device = '...'" might get me the functionality I'm after, is this a good way of doing it? seems to be duplicating a lot of code
I would suggest a component.
Vue.component("bs-dropdown",{
props:["options", "value"],
template:`
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
:class="id"
ref="dropdown"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
{{selected.text}}
</button>
<div class="dropdown-menu" :aria-labelledby="id">
<a class="dropdown-item"
href="#"
v-for="option in options"
#click="selected = option">
{{option.text}}
</a>
</div>
</div>
`,
computed:{
selected:{
get() {return this.value},
set(v){this.$emit("input", v)}
},
id(){
return `dropdown-${this._uid}`
}
},
mounted(){
$(this.$refs.dropdown).dropdown()
}
})
This component wraps the bootstrap functionality, which is what you typically want to do when integrating with external libraries.
Use it like so:
<bs-dropdown :options="devices" v-model="selected"></bs-dropdown>
Here is a codepen demonstrating it in action.
If/when you need the value, instead of copying it to a hidden select, the value is a data property bound with v-model. You can use that however you like.
In my configuration of a datatable button i have this:
buttons:[{
extend: 'csvHtml5',
text: '<span class="blabel"><i class="fa fa-download"> </i></span><span class="btxt">Export table</span>',
className: 'btn btn-labeled'
},
the result is this button:
<a class="btn btn-default buttons-csv buttons-html5 btn-labeled" tabindex="0" aria-controls="DataTables_Table_0" href="#">
<span> ---> I wanna remove this
<span class="blabel">
<span class="btxt">Export table to CSV</span>
</span>
</a>
I wanna remove the external span and the buttons-csv buttons-html5 classes... what is the correct way to do this??
You try use:
Remove span tag
$('span:not([class])').contents().unwrap();
and remove classs
$('.buttons-csv.buttons-html5').removeClass('buttons-csv buttons-html5');