Develop Reference

Datatable Ajax reload not working on button click

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()

bootstrap confirmation is not working in partial view

I am working in one project with ASP.NET MVC having bootstrap, jquery and I have one main page inside that I have bind one partial view.
I have used bootstrap.confirmation in my application and it is working fine in all the main pages but when I try to implement in partial view html, it is not working.
My Code:
HTML
<a class="tooltips deleteOrg" data-container="body" data-placement="bottom" data-toggle="confirmation" data-original-title="Delete organization" data-id="#organization.Id">
<i class="fa fa-trash"></i>
</a>
JavaScript
$(document.body).on('confirmed.bs.confirmation', '.deleteOrg', function () {
var id = $(this).data('id');
});

$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
onConfirm: function() {
var id= $(this).data('id');
alert(id);
},
buttons: [
{
class: 'btn btn-primary',
label:"yes",
icon:"glyphicon glyphicon-ok"
},
{
class: 'btn btn-danger',
label:"no",
icon: 'glyphicon glyphicon-remove',
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mistic100-Bootstrap-Confirmation/2.4.0/bootstrap-confirmation.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<a class="tooltips deleteOrg" data-container="body" data-placement="bottom" data-toggle="confirmation" data-original-title="Delete organization" data-id="test">
Click
</a>

DataTable Buttons - Custom

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');

Load menu just when it is needed

I get my page overloaded after I add to many contents
I'm calling contextmenu (righmenu) via javascript but when it haves many contents pages loads so slowly
here is my JavaScript rightClick menu:
<script>
$(document).ready(function() {
context.init({preventDoubleContext: false});
context.attach('#ID', [
{text: '<i class="el-icon-download-alt" style="color: #1AADC1"></i> Download', href: '#', extra: 'target="_blank"'},
{divider: true},
{text: '<i class="el-icon-link" style="color: #3CC8DB"></i> Export Link', href: '#link_ID', extra: 'class="popup-with-form"'},
{text: '<i class="el-icon-share-alt" style="color: #3CC8DB"></i> Share', subMenu: [
{text: '<i class="fa fa-envelope fa-lg" style="color: #009688"></i> Email', href: '#', target:'_blank', },
{text: '<i class="fa fa-facebook fa-lg" style="color: #0D47A1"></i> Facebook', href: '#', target:'_blank', },
{text: '<i class="fa fa-google-plus fa-lg" style="color: #F44336"></i> Google+', href: '#', target:'_blank', },
{text: '<i class="fa fa-twitter fa-lg" style="color: #42A5F5"></i> Twitter', href: '#', target:'_blank', }
]},
{divider: true},
{text: '<i class="el-icon-remove" style="color: #DB3C4C"></i> Delete', href: '#del_ID', extra: 'class="modal-basic"'},
{text: '<i class="el-icon-font" style="color: #3CDBAE"></i> Edit', href: '#', extra: 'class="simple-ajax-popup"'},
{divider: true},
{text: '<i class="el-icon-cog" style="color: #48A360"></i> Properties', href: '#info_ID', extra: 'class="popup-with-form"'},
]);
context.settings({compress: true});
});
</script>
ID is different on all.
HTML code:
<div id="ID" class="thumbnail">
<label for="cID"><div class="thumb-preview">
<a class="thumb-image" href="<TMPL_VAR img_preview>">
<img src="#" class="img-responsive" alt="Project">
</a>
<div class="mg-thumb-options">
<div class="mg-toolbar">
<div class="mg-option checkbox-custom checkbox-inline">
<input type="checkbox" name="demo" id="cID" value="ID">
<label for="c<TMPL_VAR file_id>">SELECT</label>
</div>
</div>
</label>
</div>
<h5 class="mg-title text-weight-semibold">Demo Test</h5>
So I have that it's okay if i have just 4 or 5 content but up of that its slow down my site,
I want to have just one dropdown menu, menus I dont need to add JavaScript code for all HTML content.

Don't put your HTML code in jQuery function. Instead use jQuery to only hide or show the drop down menu. No need to add HTML inside it. Put the HTML back wrap it with a div. Show/hide that div using jQuery $(#id).show()/hide().

Owl Slider - Duplicate Controls Issue

firstly here's the fiddle: http://jsfiddle.net/krish7878/m2gnrx2v/1/
There are two instances of owl slider with custom controls each generated by its own code, the problem is, when the controls are clicked both the sliders respond instead of the respective slider responding.
HTML:
<div class="customNavigation">
<a class="btn prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="btn next">
<i class="fa fa-chevron-right"></i>
</a>
JS:
// Custom Navigation Events
$(".next").click(function(){
slider1.trigger('owl.next');
})
$(".prev").click(function(){
slider1.trigger('owl.prev');
})
The code is a bit long (but very simple), please have a look at the fiddle
This must be a javascript issue, something must be changed somewhere, I tried changing the class names of buttons but they stopped working.

$(".next") action affects to all next css class. Use different CSS class or use a more complex expression like #slider1 > .next if buttons are inside the slider or changing .next with .nextslider1 and .nextslider2
example (http://jsfiddle.net/krish7878/m2gnrx2v/1/)
Html:
<div class="container">
<div id="slider-1">
...
</div>
<div class="customNavigation">
<a class="btn prev1"><i class="fa fa-chevron-left"></i></a>
<a class="btn next1"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
...
<div class="container">
<div id="slider-2">
...
</div>
<div class="customNavigation">
<a class="btn prev2"><i class="fa fa-chevron-left"></i></a>
<a class="btn next2"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
Javascript:
$(document).ready(function() {
var slider1 = $("#slider-1");
slider1.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next1").click(function(){ slider1.trigger('owl.next'); });
$(".prev1").click(function(){ slider1.trigger('owl.prev'); });
var slider2 = $("#slider-2");
slider2.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next2").click(function(){ slider2.trigger('owl.next'); });
$(".prev2").click(function(){ slider2.trigger('owl.prev'); });
});
Also you can make it smaller using a function that composes each slider
function doSlider(num){
var slider = $("#slider-" +num);
slider.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next"+num).click(function(){slider.trigger('owl.next');});
$(".prev"+num ).click(function(){slider.trigger('owl.prev');});
}
$(document).ready(function() {
doSlider(1);
doSlider(2);
});

You use the same click event for each set of buttons.
I changed your html to:
<div class="customNavigation">
<a class="btn1prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="btn1next">
<i class="fa fa-chevron-right"></i>
</a>
and the js accordingly:
// Custom Navigation Events
$(".btn1next").click(function(){
slider1.trigger('owl.next');
})
$(".btn1prev").click(function(){
slider1.trigger('owl.prev');
})
Notice the btn1next and btn1prev. I did the same thing for the 2nd buttons.
The js fiddle: http://jsfiddle.net/krish7878/m2gnrx2v/1/