javascript - Loading jQuery into the head -
i'm trying dynamically load jquery libraries document head.
<head> <script src="../js/jquery.js"></script> <script src="../js/app.js"></script> </head>
jquery.js looks this:
(function() { /* * load jquery components * * @private */ var head = document.getelementsbytagname('head')[0]; var components = []; var jquery = document.createelement('script'); jquery.type = 'text/javascript'; jquery.src = 'http://' + location.host + '/js/jquery-1.8.2.min.js'; components.push(jquery); var jquerymobile = document.createelement('script'); jquerymobile.type = 'text/javascript'; jquerymobile.src = 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js'; components.push(jquerymobile); var jquerymobilecss = document.createelement('link'); jquerymobilecss.type = 'text/css'; jquerymobilecss.href = 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'; components.push(jquerymobilecss); var meta = document.createelement('meta'); meta.name = 'viewport'; meta.content = 'width=device-width, initial-scale=1'; components.push(meta); components.foreach( function( component ) { head.appendchild( component ); }); // edit - fix: var app = document.createelement('script'); jquerymobile.type = 'text/javascript'; jquerymobile.src = 'http://' + location.host + '/js/app.js'; jquery.onload = function() { head.appendchild(app); }; })();
the console.log shows head object contains script tags loading jquery libraries. app.js requires jquery throwing error stating jquery not defined. missing?
app.js trying execute before dependencies loaded. should add callback function inside jquery.js file load app.js after other libraries have loaded.
Comments
Post a Comment