Develop Reference

Javascript button event not working after page 1

Essentially I have some datatable like this: Now for some reason when I go to the second page, none of the buttons I have are working. Like when I click them nothing happens! But on the first page they work perfectly! Not sure how to fix this issue! [enter image description here][1]
//creation method of the table
var volunteerTable = $('#volunteerTable').DataTable({
paging: true,
pagingType: 'simple_numbers',
columns: [ title:"First Name", title:"Last Name", title:"Email"
The trash can button code:
$('.buttonVDelete').click(function () {
//fill out the fields
//open the delete volunteer modal
//prepare data to send
}

When you use click() you are reading the elements available at the moment of loading the page.
In order to read new rendered elements, you must use on
$(document).on('click','.buttonVDelete', function () {
// Your code
});

is it jQuery required? maybe better vanilla javascript:
document.querySelector('.buttonVDelete').addEventListener('click',
function(){
})
Most of modern browser can easy deal with es5/es6
I hope I helped.

jQuery Plugin for Inline Balloon Popup Editor

(I don't quite know what to call this kind of control, so if someone can tell me what the name is, I'll edit the question for clarity.)
I'm looking for a jQuery control that will let me make a little pop-up editor that looks like a balloon coming out from a point in the form. In my use case, I'm tight on space and I want to let the user pick a couple of date ranges.
Something like this in the iCloud Calendar new event pop-up:

I ended up using qTip2 for jQuery:
http://qtip2.com/
But to get it to put a who div in there, I had to customize the JS a bit:
events: {
show: function(event, api) {
$("#tooltipContainer").html("");
$("#btnSelectDatesPopup").detach().appendTo("#tooltipContainer");
$("#btnSelectDatesPopup").show();
},
hide: function(event, api) {
$("#btnSelectDatesPopup").hide();
$("#btnSelectDatesPopup").detach().appendTo("#originalSelectDatesPopupContainer");
$("#tooltipContainer").html("<p>...</p>");
}
}
And on the form submit, close the tooltip if it's not closed already, and put it back into the DOM where it belongs:
// On form submit, trigger the tooltip hide to preserve user-chosen values
$("#aspnetForm").submit("submit", function(event) {
qtipApi.hide();
setTimeout(function(){}, 300);
});

Highcharts csv export issue

I am using Highchart in my application .I am unable to export the chart datapoints to csv format .
I tried using this approach
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/export-csv/master/export-csv.js"></script>
$('#getcsv').click(function () {
var charts1 = $('#aumChart-container').highcharts();
Highcharts.post('http://www.highcharts.com/studies/csv-export/csv.php', {
csv: charts1.getCSV()
});
});
By using this approach i see the default the highcharts context menu inside my chart control .I want to have a csv export from an external button .Is there a way to remove this default context menu .
I tried removing the context menu by removing the reference to exporting.js but then my export to csv from external BUTTON stops working .
Can someone let me know where exactly i am messing up?

Option 1
There's a plugin that allows you to export CSV (which is what you're using).
On that same page they've shown how you can use an alert box to get the CSV, would that be sufficient?
Direct link to jsfiddle
Option 2
You can code it so that only specific menu items are available
The above link - you're looking for "menuItems"
But instead - you would have:
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: 'CSV',
onclick: function() {
/*
obviously you'd have to post this to a script
to get the results into a csv file
instead of getting an alert.
*/
alert(this.getCSV());
}
}]
}
}
}

Sorting Before Event in jQuery jqGrid

I am working on jQuery's jqGrid and I am not using paging in my jqGrid. My code fetch more than 1000 rows data and all data shows in jqGrid without paging and use loadonce: true property. Now my requirement is that when user sort any column it takes 3-5 seconds to sorting data so i want to show at that time loading image. I wrote
beforeRequest: function () { jQuery(".imgLoading").show(0);},
gridComplete: function () {jQuery(".imgLoading").hide(0);}
these 2 events and it works fine when data comes with server and manipulating with server.
But I want to sorting on client side by using loadonce: true and want to show loading image also but I don't know on which event I will write down image show hide code.
Please tell me the name of BeforeSortEvent and AfterSortEvent of jqGrid.
I checked on this URL : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events but didn't find right event.
Please help me out.....

Try:
onSortCol: function(index, iCol, sortorder) {
jQuery(".imgLoading").show(0);
},
gridComplete: function() {
jQuery(".imgLoading").hide(0);
}
EDIT
Since you said the alert() fires off, I'm thinking your problem is in the way you are showing/hiding those .imgLoading elements.
Try:
onSortCol: function(index, iCol, sortorder) {
alert("I'm about to SHOW the loading message");
$(".imgLoading").show();
},
gridComplete: function() {
alert("I'm about to HIDE the loading message");
$(".imgLoading").hide();
}
Be sure those two alert()'s fire off, and if they do, then something is still off with those .imgLoading elements you are trying to show/hide.

JQuery JSTree loads as open and THEN minimizes

Fist off, been lurking for years, hopefully this post will be helpful to more than just me.
So I have a jstree that is generated for my site using very a small amount of JavaScript. Ideally, I would like for the page to load and show the 2 top folders only.
However, currently the page displays all of the names of the folders, subfolders, files, etc. for about 0.5 seconds before switching to the proper view. There are probably about 200 items in the tree structure
I added a manual tree.bind which does a "close_all", and I also tried hiding the DIV that it eventually appears in. Even though I put the code to show the DIV after I create the tree, it still shows everything before hiding itself.
I am using jsTree 1.0-rc3
Anyone have any thoughts?
<script type="text/javascript">
(document).ready(function () {
var tree = $("#sharepointHierarchy");
tree.bind("loaded.jstree", function (event, data) {
tree.jstree("close_all");
});
$("#sharepointHierarchy").jstree({
'plugins' : [ "themes", "html_data", "types", "ui" ],
'core' : {/* core options go here */},
});
document.getElementById("sharepointHierarchy").style.display="block";
});
</script>

I was able to mask this issue by adding the following code to the end of the function(). It is fairly straight-forward and simply gives the table time to load before showing it.
setTimeout(function() {
$("#sharepointDiv").show();
},1200);
I hope this helps someone else also.