Noel Carcases Noel Carcases - 6 months ago 14
Javascript Question

load jquery after page initialization using javascript function

I am working on a project to provide facebook autentication to an existing captive portal. This captive portal has one option to customize the template so... I can edit the html code to show one of my own.

The problem is that for some reason every time I import a script on the template like this

<script src="external http or https script"></script>


it fails and the result is a blank page with nothing loaded from the template...

I had found a solution by importing the script after the page has loaded like this....

var script=document.createElement('script');
script.src="http://code.jquery.com/jquery-latest.min.js";
var head=document.getElementsByTagName('head')[0]
head.appendChild(script);


It is working ... I can confirm on console that calling $('body') for example return the body element of html.. so jquery is ready...

My problem:
If, after loading jquery ussing the workaraound I load other scripts (angular and socket.io in this case) those scripts fail with jquery issues

Uncaught ReferenceError: $ is not defined


My question:
How can i do to load those scripts after the jquery has finish loaded...
Do I need to initialize jquery some how to use it?

Thanks in advance

FULL CODE

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="expires" content="-1"/>
</head>
<body onload="initialFunction()">
<script>
function initialFunction(){
document.getElementsByName('username')[0].placeholder="Nombre de Usuario"
document.getElementsByName('password')[0].placeholder="ContraseƱa"
var script=document.createElement('script');
var angularScript=document.createElement('script');
var socketScript=document.createElement('script');
var angularFacebookScript=document.createElement('script');
var appScript=document.createElement('script');
var materializeScript=document.createElement('script');
script.src="http://code.jquery.com/jquery-latest.min.js";
angularScript.src="http://192.168.1.5/js/angular.js";
socketScript.src="http://192.168.1.5:8080/socket.io/socket.io.js"
angularFacebookScript.src="http://192.168.1.5/angular-facebook-master/lib/angular-facebook.js"
appScript.src="http://192.168.1.5/js/app.js"
materializeScript.src="http://192.168.1.5/js/materialize.min.js"
var head=document.getElementsByTagName('head')[0]
var body=document.getElementsByTagName('body')[0]
head.appendChild(script);
body.appendChild(angularScript);
body.appendChild(socketScript);
body.appendChild(angularFacebookScript);
body.appendChild(appScript);
body.appendChild(materializeScript);
}
</script>
<center>
<style>
body {
background-color:#298eea;
}
....some other stuff...
</style>
<div>
<h3>{company_logo}</h3>
<h2>Captive Portal</h2>
<div id="__loginbox"></div>
//here I want to insert the facebook button with an angular controller to pass info to a backend via socket io.... I have already do that before ussing the "normal way"
</div>
</center>
</body></html>

Answer

Try using onload event at script variables

script.onload = function() {
  console.log(jQuery().jquery);
  // do stuff with jQuery script
}

angularScript.onload = function() {
  // do stuff with angular script
}

similarly with socketScript, angularFacebookScript, appScript, materializeScript