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 jsSocials PopOver

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

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

How to detect if content have more then one line in Angular?

I have template like this:
<span class="collapsibleBox">
<a ng-show="visible" ng-click="hide()" class="minus">
<i class="fa fa-minus-square-o"></i>
</a>
<a ng-show="!visible" ng-click="show()" class="plus">
<i class="fa fa-plus-square-o"></i>
</a>
<div ng-show="visible || preview" ng-class="preview ? 'previewBox' : 'contentBlock'" ng-bind-html="htmlContent"></div>
</span>
with css:
.api .previewBox {
height: 1.25em;
overflow: hidden;
}
And I need to not show plus and minus sign icons when div with class htmlContent is only one line, how can I do this in Angular.

I came up with this directive:
module.directive('oneLine', function($rootScope) {
return {
restrict: 'A',
scope: {
text: '=',
oneLine: '='
},
link: function($scope, $element, $attrs) {
angular.element(window).bind('resize', function() {
var height = $element.html('M').show().height();
$element.html($scope.text);
$scope.oneLine = height == $element.height();
$element.hide();
if (!$rootScope.$$phase) {
$rootScope.$apply(); // $scope throw "digest in progress" exception
}
}).trigger('resize');
}
};
});
and use it like this:
<span class="collapsibleBox">
<span ng-hide="hideButtons">
<a ng-show="visible" ng-click="hide()" class="minus">
<i class="fa fa-minus-square-o"></i>
</a>
<a ng-show="!visible" ng-click="show()" class="plus">
<i class="fa fa-plus-square-o"></i>
</a>
</span>
<div class="contentBlock" one-line="hideButtons" text="htmlContent"></div>
<div ng-show="visible || preview" ng-class="preview ? 'previewBox' : 'contentBlock'" ng-bind-html="htmlContent"></div>
</span>

You can set your CSS to only show one line, but show ellipses when the text overflows. You don't get +/- buttons, but it might be usable for you.
See http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Extjs IE8 - Invalid source HTML (Ext.button.Button) (4.2.1)

I get
SCRIPT601: Invalid source HTML for this operation.
ext-all-dev.js, line 22833
In IE 8
This is the line:
else {
el.insertAdjacentHTML(hashVal[0], html);
}
I have created this button:
{
id: 'deleteGroup',
cls: 'group-delete-btn',
focusCls: 'group-delete-btn-over',
overCls: 'group-delete-btn-over',
tooltip: 'Delete group',
xtype: 'button',
frame: false,
disabled: true
}
The output of the HTML is:
<a class="x-btn no-image x-unselectable x-btn-toolbar x-box-item x-toolbar-item x-btn-default-toolbar-small x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon"
role="button" hidefocus="on" unselectable="on" tabindex="0" href="#authorization/open"
target="_self" id="button-1039">
<div id="button-1039-frame1MC" class="x-frame-mc x-btn-mc x-btn-default-toolbar-small-mc x-btn-default-toolbar-small-noicon-mc"
role="presentation">
<span id="button-1039-btnWrap" class="x-btn-wrap" unselectable="on"><span id="button-1039-btnEl"
class="x-btn-button"><span id="button-1039-btnInnerEl" class="x-btn-inner x-btn-inner-center"
unselectable="on"><i>Group </i></span><span role="img" id="button-1039-btnIconEl"
class="x-btn-icon-el " unselectable="on" style=""></span></span></span>
</div>
</a>
Does anyone have any ideas as to what's wrong with this HTML/code?