We Keep Coding

JS script sometimes not loading on Rails 5

I want to be sure that my scripts are being loaded before I call a function.
This code is written inline on the page, it is not being loaded by application.js, sometimes the scripts are loaded correctly but not always.
<script>
$(document).on('turbolinks:load', function() {
$.when(
// Required libs to token and fraud detection
$.getScript("https://openpay.s3.amazonaws.com/openpay.v1.min.js"),
$.getScript("https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"),
$.Deferred(function(deferred){
$(deferred.resolve);
})
).done(function(){
OpenPay.setId('123');
... more code ...
});
</script>
I'm getting:
How can I do that? I'm using rails 5

Transition page with jQuery

I use Jquery script Barba to make fluid and smooth transitions between my pages.
I have Jquery scripts in my website. The most of my js functions are in a file named main.js.
To make my plugins works with Barba.js I use the Views methods.
So I put all my jQuery functions in my main.js like this :
var Homepage = Barba.BaseView.extend({
namespace: 'homepage',
onEnter: function() {
// Here's they are my jQuery functions.
},
});
Homepage.init();
Barba.Pjax.start();
It works for these jQuery functions.
The problem is that I have some other jQuery functions in two other pages : index.phpand single.php. I have no more choice to put them in these pages because these Jquery functions contain php code.
So I put the other jQuery functions in my index.php and single.php like this :
<script type="text/javascript" src="main.js"></script>
// Here's they are my html code.
<script type="text/javascript">
var Homepage = Barba.BaseView.extend({
namespace: 'homepage',
onEnter: function() {
// Here's they are my jQuery functions.
},
});
Homepage.init();
</script>
It doesn't works for these jQuery functions which are in my index.php and single.php. I can't see them in my pages. Like they don't exist.
Why and how to fix it ?

Get remote .js to work

I wrote a tiny piece of script. It's working when I add it directly into my page. But how do I make it working when the script is in a .js file? And is it enough to put the code into a .js file? Or do I need to add extra lines of code?
I know I have to refer to the file in the header. But that doesn't do the trick. This is the script:
$("#david").mouseover(function() {
$('#charlotte').addClass('hover');
$('#timon').addClass('hover');
}).mouseout(function() {
$('#charlotte').removeClass('hover');
$('#timon').removeClass('hover');
});
$("#charlotte").mouseover(function() {
$('#david').addClass('hovert');
$('#timon').addClass('hovert');
}).mouseout(function() {
$('#david').removeClass('hovert');
$('#timon').removeClass('hovert');
});
$("#timon").mouseover(function() {
$('#david').addClass('hovertt');
$('#charlotte').addClass('hovertt');
}).mouseout(function() {
$('#david').removeClass('hovertt');
$('#charlotte').removeClass('hovertt');
});
I hope you guys can help me out!
I know it's a very basic question, but I can't find the answer I need and I'm still a noob at making scripts..

Within the your HTML document add the second line after your jQuery script.
<script src="/js/jquery.js"></script>
<script src="/js/name-of-your-file.js"></script>
In the example, I've prepended /js/ to your scripts. It's best practice to separate your files into specific folders, so you'll have to create a new js folder. Also, jQuery needs to be in place and ready for you to start using it. If you need to wait for the document to load then you'll need to wrap your code in the following.
$(function() {
// Past your code here.
// This syntax is simply a shortcut for
// $(document).ready(function(){});
});

First of all you will need to include that javascript file in your html page:
<script src="yourscript.js"></script>
or
<script src="pathToYourScript/yourscript.js" type="text/javascript"></script>
furthenrmore you will need to tell the js when to execute and I would recomend either wrapping your code in
$(document).ready(function{
// your code here
})
or in window.load
$(window).load(function{
// your code here
})
or in self executing function :
(function(){
// your code here
})();

wordpress flexslider is not a function

I'm developing custom theme for wordpress and using META SLIDER plugin for that, but in rendering page. in firebug result that says:
$(...).flexslider is not a function
line 242 :
useCSS:false
full attached java script with plugin:
<script type="text/javascript">
var metaslider_99 = function($) {
$('#metaslider_99').flexslider({
slideshowSpeed:3000,
animation:"fade",
controlNav:true,
directionNav:true,
pauseOnHover:true,
direction:"horizontal",
reverse:false,
animationSpeed:600,
prevText:"<",
nextText:">",
easing:"linear",
slideshow:true,
useCSS:false
});
};
var timer_metaslider_99 = function() {
var slider = !window.jQuery ? window.setTimeout(timer_metaslider_99, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_99, 100) : metaslider_99(window.jQuery);
};
timer_metaslider_99();
</script>
Is this an issue of the order of the stacking of the javascript files?
LINK:
Please see this link

Your theme looks like it's missing a call to wp_footer() (it looks like its missing the whole footer.php actually).
Meta Slider needs this in place in order to enqueue the correct JavaScript and CSS files.
Please see this page:
http://codex.wordpress.org/Function_Reference/wp_footer

Is there a way to run RequireJS Modules before all elements are loaded?

I am run jQuery initializations from a RequireJS module.
I have noticed however that RequireJS waits until all page assets are loaded before executing my code.
I am loading some large images into my page, but do not want to wait until they are loaded to setup my jQuery plugins.
Is there a best practice when trying to do this?
Here is my setup:
index.html
<script data-main="js/main.js" src="js/libs/require.js"></script>
main.js
require(["inits"], function(Inits) {
//Nothing here yet.
});
inits.js
define([
'jquery',
'jquery.plugin1',
'jquery.plugin2',
'etc'
], function ($) {
//jQuery Document Ready.
$(function(){
//Jquery Init Code here
});
}
I am new to RequireJS, am I doing this wrong?

Alright, so I have a work around that appears to be working.
Referencing this ticket here:
https://github.com/jrburke/requirejs/issues/463
I moved my script tag with data-main to the end of my body tag.
<script data-main="js/main.js" src="js/libs/require.js"></script>
</body>
And then unwrapped my jquery functions:
Before
define([
'jquery',
'jquery.plugin1',
'jquery.plugin2',
'etc'
], function ($) {
//jQuery Document Ready.
$(function(){
//Jquery Init Code here
});
}
After
define([
'jquery',
'jquery.plugin1',
'jquery.plugin2',
'etc'
], function ($) {
//Jquery Init Code here with no Ready Wrapper.
}
It seems to be working, and being at the end of the html file "should" prevent there being any problems with the DOM. I am however not entirely comfortable with this approach. I would like to keep this open to see if others have a better idea.