Develop Reference

Having trouble using Barba.js and separate JS files

I've setup Barba.js on my Wordpress website. It seems to be working. the only thing is that when I transition to other pages, my other JS files don't load until a hard refresh.
I think to solve this, I have to use namespace and BeforeEnter and re-run my separate JS file within that
The only problem is I don't know how to do that. I've looked all over the net.
I've tried this (which I know is not right, but maybe on the right track?)
let script = document.createElement('script');
script.src="/flickity.init.js";
next.container.appendChild(script);
Any help would be appreciated :)
Thanks in advance!

Was actually a pretty simple fix.
I just wrapped my other JS files code in a const runScripts = function () {} then called the function runScripts() inside a view in my custom Barba script with beforeEnter({ next }) {} and a relevant name space.

BabylonJS Execute Script from External File

I'm having a (simple) issue, but I have no idea how to fix it. Essentially, every tutorial I have come across for Babylon puts all of the Javascript code inside < script > tags in the main HTML page.
However, I would like to have all of my Javascript code inside a separate file. I have tried every way of loading it as I could think of, though I am a novice at Javascript (I am decent at C++, and I can see the similarities); yet I was unable to make it load. (It works fine when called from the HTML page itself).
Does anyone know what (if anything) I can do in order to be able to load my scripts from external files, and still get everything to work? Thanks in advance!

2 options:
register to the DOMContentLoaded event in your external JS file
reference your JS file with the tag at the end of the HTML page
You can find a sample in one of my tutorials here: http://blogs.msdn.com/b/davrous/archive/2014/11/18/understanding-collisions-amp-physics-by-building-a-cool-webgl-babylon-js-demo-with-oimo-js.aspx
Enjoy and thanks for using Babylon.js! :)
David

Head js Problems with loading javascript files

I'm using Head js to load my javascript files in parallel. I added head js to my head and then used head.js("path/to/file/my.js"); but when I load my webpage the script is missing. Only after refreshing a few times does the whole script work properly. Why do I need to refresh it to make it work? Any suggestions would be appreciated!

As the scripts are loaded asynchronously, you can't use it immediately. After you have refreshed the page, it will find the script in the cache, so it will load in time for any code needing it sometimes.
Use the ready method for any code that needs the script:
head.ready(function() {
// any code that needs the script to be loaded first
});

Another way is to mark your library and then get the ready event when your script is loaded. Read more from http://headjs.com/ Labeling scripts.
head.ready("your", function() {
});
head.js(
{jquery: "http://http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"},
{tools: "http://cnd.jquerytools.org/1.2.5/tiny/jquery.tools.min"},
{your: "http://a.heavy.library/we/dont/want/to/wait/for.js"},
// label is optional
"http://can.be.mixed/with/unlabeled/files.js"
);

Loading Javascript through an AJAX load through jQuery?

I have an javascript that I place into a page using the code below. What the code does is place an object/embed code into a webpage. Simple javascript loader to a NicoVideo movie
<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395"></script>
This works great in a webpage. But what if I want to load this javascript into a page using AJAX? This no longer works for the obvious reasons, you would need to eval the script in order to get it to run. However, I have no idea how to do this. I am using jQuery on my page; so keep that in mind. I have tried the following code, but it doesn't seem to work through AJAX, or even in a normal page load environment.
<script>$.getScript("http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395");</script>
Any ideas on how I would get this to work?

I think it works but its attempting to inline the write which I don't know if that would work in this case.
You would need to see if there was a way to essentially execute the '.getHTML' method and take that result and update an existing element on the page.
The issue though is that the anonymous function that is generated and executed inline might not work properly.

After reading official getScript reference, it seems you have to do something with that JS file you got a hold of, using something like this:
$.getScript("http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395", function () {
// use functions from loaded file
});

preventing JS running when the page is not loaded

I have encountered a problem. When I use jQuery to load a page that contains heavy javascript, the page freezes. I believe it is because the js executes before the page loads as my local site does not freeze. However, $(document).ready(function(){}); seems not working with dynamically loaded pages? is that true? or anything i could do to solve this problem. Thanks a million!

$(document).ready() works fine in dynamic pages. There must be an error in your code somewhere.
The first thing to do is to try View Source and save the HTML to a plain .html file, then load that file in your browser. If that still fails then you know the problem has nothing to do with the server-side ASP/PHP/whatever code. Then try removing HTML and JavaScript piece by piece until the problem disappears. That'll help you narrow down the culprit line(s). If you can reduce your page to a small file that still demonstrates the problem, post that here and we'll try to help.

Try using
$(window).load(function(){
dosomething();
});
It will run the js after the whole page is loaded.
Avoid using
$(document).ready(function(){
dosomething();
});
It will run the js just after the loading of DOM.