How to check is CDN versions have loaded and if not load local versions of jquery, jquery-mobile,

Question

I searched extensively and checked various suggestions but do not find a reasonable solution for my question: how to check if CDN versions have loaded correctly? This should include checking for css, e.g.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />

Any suggestions on how to check for correctly loaded css file?

Setup: Node.js running locally and on heroku.

my testing file (not working correctly):

<!DOCTYPE html> 
<html> <head>
<meta charset="utf-8">
<title>template.html</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>-->
<script>
  if(typeof jQuery == 'undefined') {
    document.write('<link rel="stylesheet" href="/jqm/jquery.mobile-1.3.2.min.css" \/>')
    document.write('<script src="/jq/jquery-1.10.2.min.js"><\/script>')
    document.write('<script src="/jq/jquery-migrate-1.2.1.min.js"><\/script>')
  }
  if($.mobile == undefined) {document.write('<script src="/jqm/jquery.mobile-1.3.2.min.js"><\/script>')}
</script>
</head>
<body> 

<div data-role="page">
    <div data-role="header">
        <h1>data-role="header"</h1>
    </div>

    <div data-role="content">   
        <p>data-role="content"</p>
    </div>

    <div data-role="footer" data-position="fixed">
        <h4>data-role="footer" data-position="fixed"</h4>
    </div>
</div>
</body>    </html>

The my test 'hello-world' web.js is below (run locally as node s/web.js, s is for server dir):

var express = require("express");
var path = require('path');//http://stackoverflow.com/questions/10434001/static-files-with-express-js
var app = express();

process.env.PWD = process.cwd();//http://stackoverflow.com/questions/17212624/deploy-nodejs-on-heroku-fails-serving-static-files-located-in-subfolders

app.use(express.logger());
app.use(express.static(path.join(process.env.PWD, 'html'))); //http://stackoverflow.com/questions/14576644/whats-the-simplest-way-to-serve-static-files-using-node-js
app.use(express.static(path.join(process.env.PWD, 'jq')));
app.use(express.static(path.join(process.env.PWD, 'jqm')));

//app.get('/', function(request, response) {
//    response.send('Hello jc138691');
//});

var port = process.env.PORT || 3000;
app.listen(port, function() {
    console.log("Listening on " + port);
});

This also does not work locally on windows: process.env.PWD = process.cwd() does not return correct dir.

So in the nutshell, does anyone have a reasonable setup example for: node-backend and any type of front-end (e.g. jquery mobile)? Including flexible directory structure (i.e. not everything in one dir).

score 0 · Answer 1 · answered Sep 06 '13 at 04:24

The following works both in heroku and running locally via webstorm. Is there a "better" setup, please comment? c_xxx for client code; s_xxx for server code;

enter image description here

template_130906.html:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>template_130906.html</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<!--<script src="loadJQ_1_10_2_JQM_1_3_2.js"></script>-->

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script>
  if (typeof jQuery == 'undefined') {
    document.write('<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css" \/>');
    document.write('<script src="jquery-1.10.2.min.js"><\/script>');
    document.write('<script src="jquery-migrate-1.2.1.min.js"><\/script>');
  }
  if (typeof $ == 'undefined'  ||  $.mobile == undefined) {
    document.write('<script src="jquery.mobile-1.3.2.min.js"><\/script>');
  }
</script>
</head>
<body> 

<div data-role="page">
    <div data-role="header">
        <h1>data-role="header"</h1>
    </div>

    <div data-role="content">   
        <p>data-role="content"</p>
    </div>

    <div data-role="footer" data-position="fixed">
        <h4>data-role="footer" data-position="fixed"</h4>
    </div>
</div>
</body>  </html>

Still no solution for checking css was loaded correctly?!?!

web_130906.js:

// webstorm setup:
//http://blog.jetbrains.com/webide/2010/11/working-with-javascript-libraries-in-phpstorm-webstorm/

var express = require("express");
var path = require('path');//http://stackoverflow.com/questions/10434001/static-files-with-express-js
var app = express();

process.env.PWD = process.cwd();//http://stackoverflow.com/questions/17212624/deploy-nodejs-on-heroku-fails-serving-static-files-located-in-subfolders

app.use(express.logger());
app.use(express.static(path.join(process.env.PWD, 'c_html'))); //http://stackoverflow.com/questions/14576644/whats-the-simplest-way-to-serve-static-files-using-node-js
app.use(express.static(path.join(process.env.PWD, 'c_js')));
app.use(express.static(path.join(process.env.PWD, 'jq')));
app.use(express.static(path.join(process.env.PWD, 'jquery.mobile-1.3.2')));

//app.get('/', function(request, response) {
//    response.send('Hello jc138691');
//});

var port = process.env.PORT || 3000;
app.listen(port, function() {
    console.log("Listening on " + port);
});

package.json:

{
    "name": "jqm130824",
    "version": "2013.08.27",
    "description": "jqm130824",
    "dependencies": {
      "express": "3.3.5",
      "path": "0.4.9"
    },
    "engines": {
        "node": "0.10.15",
        "npm": "1.3.5"
    }
}

For heroku, Procfile:

web: node s_js/web_130906.js

Entry point index.html:

<!DOCTYPE html>
<html>
<head>
    <title> title </title>
</head>
<body>
     <h1> index.html boby </h1>
     <a href="template_130906.html">template_130906.html </a>
</body>
</html>

score 0 · Answer 2 · answered Dec 10 '13 at 15:40

Here is my mixture :

if (typeof jQuery == 'undefined') {

    var jqueryins = document.createElement('script');
    jqueryins.type = 'text/javascript';
    jqueryins.async = true;
    jqueryins.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
    var s = document.getElementsByTagName('jqueryins')[0];
    s.parentNode.insertBefore(jquery-ins, s);

Inspired from googleAnalytics script insertion

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-146052-10']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

How to check is CDN versions have loaded and if not load local versions of jquery, jquery-mobile,

2 Answers2