Develop Reference

Jquery not loading on normal refresh

Javascript and Jquery is not loading on normal page refresh, but loads correctly on hard refresh (CTRL+SHIFT+R) and Incognito.
I'm calling the functions through window.onload:
window.onload = function() {
adddata(); adddata_pages();
adddata_views7();
adddata_pages7();
adddata_views1();
adddata_pages1();
};
And I'm including the Jquery files in this order in the head of html:
jquery.min.js , bootstrap.min.js , Chart.min.js , jquery.dataTables.js.
And in the end (before closing body tag) I'm calling my external js file which has all my functional code.
Can please anyone help as where I'm going wrong or what is the solutions for this?

Load your external js file inside document ready tags. jQuery has to be first in load order.
$( document ).ready(function() {
//load here your file
});

It is depends on your IDE in NetBeans you should refresh the cache to see the changes. Because refreshing page is not helping at all.Alternative solution is that you could use nodejs which uses auto refreshing when typing.

JavaScript Will Not Load After DOM

I'm having trouble getting my JS to run after all my content has loaded. Right now on the site Im working on: http://hsvgridproject.com, the grid will not load the first time a user visit the site and needs a hard refresh before it will work. I believe I need to use a window.onload function of some sort but as I am still learning Java I'm not sure how to implement it into my project without breaking the code.
The script for the grid on homepage has a window tag surrounding it already (credit Codrops):
(function(window) {
Please let me know if you need more info. Thank you!

It's probably not working because you're executing your script before the DOM is fully loaded.
To ensure it's executed after the DOM is fully loaded, either move the script tag which executes your code right before the closing tag of the body element or use DOMContentLoaded event like this:
document.addEventListener("DOMContentLoaded", function(event) {
// execute your code
});

Import stylesheets and javascript on the fly

I have a website whose navigation is all done via ajax (with jquery); each page is dynamically loaded into an element on the page. While I have a universal stylesheet and JS scripts, each page also has a page-specfic stylesheet and JS script. What is the most effect/efficient way to load these page-specfic scripts and stylesheets? On page load, most of the page-specfic scripts/stylesheets will not be needed. A page's scripts/stylesheet will only be needed when a user loads in (via ajax) a particular page. Should I load every single script and stylesheet at page load?
Another option would be to simply append appropriate <link> and <script> elements to the head when a page is dynamically loaded; however, would they be called? Also, would I need to remove the <link> and <script> elements when a different page is called (via ajax)? For the scripts, I could use jQuery's .getScript() function. What is the best approach to this in terms of efficiency and cross-browser support?
Thank you!

Js and CSS are one time load and are browser cached (depends on your server conf as well)
So if you have an ajax, with just 1 JS inclusion. You could
Insert this JS at the footer of your home page (lazy loading; pre-emptive thinking .. faster 2nd pages)
Bring the include JS tag along with ajax response. (nothing complex here. browser makes fresh JS call)
Combine all your JS/CSS into one combined JS, push it to home page head tag (eyeing performance and caching)
once document ready, do similar to #1 using getScript() as you suggested

Well one way I know of that this can be done is with RequireJS,
but the downside is that all the JS you have need to be defined as AMDs.
Don't know if you know anything about RequireJS, but its quite a neat library,
you can imagine it as a dependency injector and loads files in async way.
If you are interested you can check their docs:
Intro
CSS

Before I have commented what you could do with the CSS.
This is how you can work with js:
var script = document.createElement('script');
script.src = "path to your src";
// load event
script.onload = function () {
//some staff
};
document.head.appendChild(script);
Also, for you, I'll recommend reading this gist.
Another good information.

loading a js file asynchronously from a js file that loads asynchronously

I had a javascript file(initial.js) on the page inserted through the script tag like so:
<script src="initial.js"></script>
This file creates dom elements(let say two links) and also loads another jQuery plugin(plugin.js) asynchronously via jQuery ajax method. Clicking on those two links brings up a module from the jQuery plugin(plugin.js).
The javascript file(initial.js) was then modified to load asynchronously on the page via jQuery ajax instead of via script tag. This has resulted in some events not getting attached to the links intermittently and this results in the plugin not being called.
I believe the browser is loading the async scripts in its own order and hence the links fail to launch the plugin intermittently. Any pointers to resolve this issue with this new set up?

At a high-level, I think you need to look into something like require.js. Alternatively, you could look into some jQuery event handling code which allows you to listen on load events of calls which may help you determine when one script loaded before loading the next one.

You have probably tried something like this in the past:
var output;
$.get('data.php',function(data){
output=data;
});
alert(output);
You will get an undefined error because Javascript doesn't wait around for the AJAX call to be returned before moving onto the next code.
Same thing goes for scripts. If you place multiple calls to multiple scripts, you will probably get the smallest one returned the quickest, and that script executed. If you load a script that is 10kb and then one that is 1kb, the 1kb script will probably return the quickest and then be executed even though it was called after the 10kb script.
To correct this, you could make a queue system and then only load each script after the previous has loaded:
var scripts=['script1.js','script2.js','script3.js'];
$(document).ready(function(){
loadScript();
});
function loadScript(){
if(sendQueue.length==0)
return;
$.getScript(scripts[0],function(){
scripts=scripts.slice(1);
loadScript();
});
}
But if you are loading scripts from within scripts from within scripts... very Inception like, then this still may not work.

jQuery append doesn't work fully with <script> tag

Appending a script element using jquery rather than putting it in the html by hand seems to lead to very different results. For instance
snaphtml = '<script src="http:\/\/seadragon.com\/embed\/lxe.js?width=auto&height=400px"><\/script>';
$('#content').append(snaphtml);
destroys the layout of my page, but putting the script element in the page directly works fine.
I have posted a test case online:
Working example with script in html.
Broken example with script appended via jquery.
The second div should not be deleted / invisible once the silverlight object is added.
Ideas?

I would recommend you to use $.getScript method for loading external script files programmatically:
$.getScript('path/to/script.js', function() {
alert('Script loaded.');
});
The script load is made asynchronously, and as you see in the above example, you can specify a callback function that will be executed when your external file has been loaded and is ready to use.

Tristan, you will not be able to include the script you reference dynamically onto the page after it has finished loading. The external script is using document.write which will only work correctly when called before the page has finished loading. This is why your static implementation works fine, and your dynamic one tears the page apart.
You might want to put together a dummy HTML file that just has a basic HTML structure and this script in it already. Then dynamically add an iframe to your page that loads the HTML. There are even more dynamic ways to make it work with an iframe, but that would be the easiest.

Try to use $.getScript:
$.getScript("http://seadragon.com/embed/lxe.js?width=auto&height=400px");
Edit:
The provided script is using document.write, which is likely causing your problems: you cannot add it dynamically at the middle of the page. Try loading SeaDragon as shown here:
http://www.seadragon.com/developer/ajax/getting-started/

try to break script tag like
snaphtml = '</sc'+'ript>'