We Keep Coding

Avoid binding multiple events on element

I'm fetching cshtml in my .net project through ajax, after biding data to dom successfully, initializing datatable on it with export to excel feature,
but when you fetch data more than a time (user using filers), datatable is binding (appending) event to export button every time, and user ends up downloading multiple excel files at once.
I have replicated cshtml and ajax method with data and getCSHTML methods.
Steps to reproduce issue.
Click on Get Data button.
Click on Export Data button (Only one file will be downloaded).
Go back to step 1 and 2, repeat it without refreshing the browser tab, you will end up downloading multiple excel file on a single click.
I have tried, .off() , .unbind() and .bind(), but no help.
var data = '<table id="example"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th></tr></thead><tbody><tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td></tr><tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td></tr><tr><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>28</td><td>2011/06/07</td></tr><tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td></tr><tr><td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td></tr><tr><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>46</td><td>2011/12/06</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td></tr></tbody></table>'
function getCSHTML() {
$("#masterPage").html(data);
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"initComplete": function() {
var $buttons = $('.dt-buttons').hide();
if ($('#exportLink').length > 0) {
$('#exportLink').on('change', function() {
var btnClass = $(this).find(":selected")[0].id ?
'.buttons-' + $(this).find(":selected")[0].id :
null;
if (btnClass) $buttons.find(btnClass).click();
})
}
$('#exportToExcel').on('click', function() {
$('.buttons-excel').click()
})
},
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<button onclick="getCSHTML()">Get Data</button>
<button id="exportToExcel">Export Data</button>
<div id="masterPage"></div>

You need to unbind at the start of your function with this line
$("#exportToExcel").unbind("click")
Example :
var data = '<table id="example"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th></tr></thead><tbody><tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td></tr><tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td></tr><tr><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>28</td><td>2011/06/07</td></tr><tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td></tr><tr><td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td></tr><tr><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>46</td><td>2011/12/06</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td></tr></tbody></table>'
function getCSHTML() {
$("#masterPage").html(data);
$("#exportToExcel").unbind("click"); // unbind here
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"initComplete": function() {
var $buttons = $('.dt-buttons').hide();
if ($('#exportLink').length > 0) {
$('#exportLink').on('change', function(e) {
var btnClass = $(this).find(":selected")[0].id ?
'.buttons-' + $(this).find(":selected")[0].id :
null;
if (btnClass) $buttons.find(btnClass).click();
})
}
$('#exportToExcel').on('click', function(e) {
$('.buttons-excel').click()
})
},
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<button onclick="getCSHTML()">Get Data</button>
<button id="exportToExcel">Export Data</button>
<div id="masterPage"></div>

Try to move export function outside of initComplete it works like a charm

display two pivot tables using jquery

I am trying to create two pivot tables using pivottable.js to show payroll hours
the desired result would be like this:
Payroll for location 1
foo
bar
biz
Payroll for location 2
bad
bash
bin
obviously in the pivottable.js display form which I cannot recreate here
however, the pivottable only shows one for the page and it is either location 1 or location 2
I dont know enough about javascript or html to understand what I am doing wrong here, it seems like a simple problem that I just am not seeing. this is all within a php file.
here is the code I am using for the php file
$pageStart = '<html>
<head>
<title>Payroll</title>
<!-- c3 and d3 scripts and jquery -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<!-- PivotTable.js -->
<link rel="stylesheet" type="text/css" href="./jquery/pivottable/dist/pivot.css">
<script type="text/javascript" src="./jquery/pivottable/dist/pivot.js"></script>
<script type="text/javascript" src="./jquery/c3_renderers.js"></script>
<style>
body {font-family: Verdana;}
</style>
<!-- mobile support -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<p> Location 1 payroll hours
<script type="text/javascript">
// This loads the payroll hours for location 1
// no derived attributes
var derivers = $.pivotUtilities.derivers;
var renderers = $.extend($.pivotUtilities.renderers,
$.pivotUtilities.c3_renderers);
$(function(NB){NB,
$("#output").pivotUI(
' . $json . ',
{rows: ["Name"],
cols: ["Hours_type", "Date"],
aggregatorName: "Sum",
vals: ["Hours"],}
);
});
</script>
<br>
<p> location 2 Payroll Hours
<script>
$(function(SV){
$("#output").pivotUI(SV,
' . $json2 . ',
{rows: ["Name"],
cols: ["Hours_type", "Date"],
aggregatorName: "Sum",
vals: ["Hours"],}
);
})
</script>
<div id="output" style="margin: 30px;"></div>
</body>
</html>';
print $pageStart;
the $json and $json2 are mysql functions that pull the data for the pivottable to display

If you use $("#output") for both tables, then one will overwrite the other.

You would need two different tags with different ids like :
Reference first table in output and second in output1

Uncaught TypeError: $(...).lightGallery is not a function

when I try to click the link it shows this in browser console:
Uncaught TypeError: $(...).lightGallery is not a function(anonymous function) # index.html:250dispatch # jquery.min.js:3r.handle # jquery.min.js:3
and this is the code I used:
$('#gallery').on('click', function() {
$(this).lightGallery({
dynamic: true,
dynamicEl: [{
"src": 'assets/images/gallery/1.jpg',
'thumb': 'assets/images/gallery/thumbs/1.jpg',
'subHtml': '<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>'
}, {
'src': 'assets/images/gallery/2.jpg',
'thumb': 'assets/images/gallery/thumbs/2.jpg',
'subHtml': "<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>"
}, {
'src': 'assets/images/gallery/3.jpg',
'thumb': 'assets/images/gallery/thumbs/3.jpg',
'subHtml': "<h4>Coniston Calmness</h4><p>Beautiful morning</p>"
}]
})
});
bear in mind I am using the Dynamic Mode in lightGallery.
I already included the lightGallery library before and the jQuery library before it.
I have tried to substitute the $ with jQuery.
I also tried the "semicolon solution" but with no luck.
this is the whole libraries i included:
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/tether/tether.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/smooth-scroll/SmoothScroll.js"></script>
<script src="assets/viewportChecker/jquery.viewportchecker.js"></script>
<script src="assets/cookies-alert-plugin/cookies-alert-core.js"></script>
<script src="assets/cookies-alert-plugin/cookies-alert-script.js"></script>
<script src="assets/dropdown/js/script.min.js"></script>
<script src="assets/touchSwipe/jquery.touchSwipe.min.js"></script>
<script src="assets/jarallax/jarallax.js"></script>
<script src="assets/bootstrap-carousel-swipe/bootstrap-carousel-swipe.js"></script>
<script src="assets/jquery-mb-ytplayer/jquery.mb.YTPlayer.min.js"></script>
<script src="assets/theme/js/script.js"></script>
<script src="assets/mobirise-slider-video/script.js"></script>
<script src="assets/formoid/formoid.min.js"></script>
<!-- lightgallery -->
<script src="assets/theme/js/lightgallery.min.js"></script>
<script src="assets/theme/js/lg-thumbnail.min.js"></script>
<script src="assets/theme/js/lg-fullscreen.min.js"></script>
<script src="assets/theme/js/lg-share.min.js"></script>
<script src="assets/theme/js/lg-zoom.min.js"></script>
<script src="assets/theme/js/lg-autoplay.min.js"></script>

Wooooooooooo Haaaaaa I finally solved it, and the problem was maybe with local version I have!!
When I switched to the cdnjs version it worked PERFECT!!!
a huge THANKS for all of you!!
all I did is replace the local ones with the cdn links
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.2/css/lightgallery.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.2/js/lightgallery.js"></script>

in the head
<link href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css" rel="stylesheet">
your html.
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
</div>
in the body. at the end after jquery
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>

I make sure, this plugin was the last script in been called.
I also wrapped the code inside the ready function.
In addition, I show how to use a variant to select elements from the DOM. I'm using jQuery and running all from my local server. The sources of lightgallery are from 2018, downloaded from the repository, manually.
<script type="text/javascript">
$(document).ready(function() {
$('.post img').wrap(function(){
return "<div class='gallery' data-src='" + $( this ).attr("src") + "'></div>";
});
lightGallery(document.querySelector('.post'), {selector: ".gallery"});
});
</script>

Ui-Grid Not Displaying (at all)

I'm using AngularJS. The controller is functioning; I can call functions and values from it via my view. I can assign values to my gridOptions.data without console error. I can define other properties for gridOptions without conosole error. But the grid doesn't display... at all.
My index.html has the following header:
<!--Lib-->
<!--jquery-->
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<!--<script src="https://code.jquery.com/jquery-1.12.4.js"></script>-->
<!--ng base-->
<script src="app/lib.bower/angular/angular.js"></script>
<script src="app/lib.bower/angular-route/angular-route.js"></script>
<!--ui grid-->
<script src="app/lib.bower/angular-ui-grid/ui-grid.js"></script>
<link href="app/lib.bower/angular-ui-grid/ui-grid.min.css" rel="stylesheet"/>
<!--Misc-->
<link rel="stylesheet" href="app/lib.bower/bootstrap/dist/css/bootstrap.min.css"/>
<script src="app/lib.bower/toastr/toastr.js"></script>
<link href="app/lib.bower/toastr/toastr.css" rel="stylesheet" />
<!--Custom-->
<script src="app/app.js"></script>
<!--Custom - Services-->
<script src="app/services/resetRequestService.js"></script>
<script src="app/services/adValidationService.js"></script>
<script src="app/services/userSearchService.js"></script>
<script src="app/services/passwordCreationService.js"></script>
<script src="app/services/toasterService.js"></script>
<!--Custom - Controllers-->
<script src="app/controllers/UserSearchController.js"></script>
<script src="app/controllers/HeaderController.js"></script>
<script src="app/controllers/PasswordResetRequestController.js"></script>
<!--Custom modules-->
<script src="app/modules/header.js"></script>
<!--Custom - Other-->
<link rel="stylesheet" href="app/css/passwordReset.css"/>
My controler is as such:
var userSearchController = function($scope, $interval, userSearchService) {
var vm = this;
vm.gridOptions = {
enableFiltering: true,
showGridFooter: true,
data: [
{
test: 'test',
test2: 'test2'
}
]
};
//more code
}
And the view has the following div:
<div ui-grid="vm.gridOptions" class="grid"></div>
Again, I don't get any errors, I just get... nothing on my .html; no data, no columns, not even a border, it entirely doesn't appear. I've ensured that the vm.gridOptions is assigned as soon as the controller starts up, and (again) I've ensured that I can run methods and get values from my controller.
I've poured over numerous tutorials which all have their own flavor of making ui-grid work, and I can't figure out what I'm doing wrong.
Anyone know what I'm missing?

TypeError: B is not a function when exporting

The print option has stopped working on my pie chart. I'm getting this error in the console:
Has there been any updates to Highcharts to make this stop working? Here are my exporting options (only need print)
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: 'Print Chart',
onclick: function () {
this.print();
}
}]
}
}
},

My imports weren't correct.
Since the software was upgraded, my locally hosted files conflicted with the newly updated ones.
Old
<script type="text/javascript" src="/public/site/js/highcharts.js"></script>
<script type="text/javascript" src="/public/site/js/drilldown.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
New
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">