2

I'm adding theme setting to my js application. The application should work also off-line, so I have to check if the remote style file (like http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/jquery/jquery-ui.css) exists and is reachable, otherwise I set the href in <link rel="stylesheet"> to point to a local file.

Till now I used the following code, but with jQuery 2.1.3 it output on console a warning:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

elicited at line jquery-2.1.3.js:8556 Well, I could ignore the warning...

url = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/jquery/jquery-ui.css";

$.ajax({url: url,
    type: "HEAD",
    timeout: 1000,
    async: false,
    error: function() {url = 'css/jquery-ui.css';}
});
/* modify link statement to use url for href */

Searching for an alternative method, I tried to check if the link statement has loaded the new css after changing its href, something like:

$('#id_of_the_link_stmt').error(function() {
  console.log("New url not loaded, reverting to local file")
}).attr('href', url);

but it does not works.

Thanks for suggesting!

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
SiliconValley
  • 1,465
  • 17
  • 30
  • 1
    And simply making the AJAX request be async is not an option? – CBroe Feb 15 '15 at 14:53
  • Which browser you use, or do you have this problem with all browsers ? – JC Sama Feb 15 '15 at 14:53
  • 1
    Maybe you should check [How to determine if CSS has been loaded?](http://stackoverflow.com/questions/10537039/how-to-determine-if-css-has-been-loaded) or [How to use Javascript to check and load CSS if not loaded?](http://stackoverflow.com/questions/4724606/how-to-use-javascript-to-check-and-load-css-if-not-loaded) – Bardh Lohaj Feb 15 '15 at 14:54
  • Why dont you just check whether a local file exists, if it does not exists then load the file from server and if you are not able to get the file then it means neither local file exists nor the browser is connected to internet. – void Feb 15 '15 at 15:02
  • Or just check if the browser has internet access, if it has, then fetch the file from server else search local. – void Feb 15 '15 at 15:02
  • @void how do you check if local file exists in user cache using javascript? – charlietfl Feb 15 '15 at 15:33
  • I guess the later method is better, Because it is the browser's responsibility to do some task like this. – void Feb 15 '15 at 15:37

2 Answers2

2

Why not using alternate style-sheets and groups?

You can always include the base stylesheet and custom one as an alternate one:

<link rel="stylesheet" type="text/css" href="css/base.css" title="base" />
<link rel="alternate stylesheet" type="text/css" href="css/custom.css" title="base" />

In this case the custom.css is available and the browser will load him (only him) - In case its not available the browser will move to the first one (without the alternate) and will load him- e.g:

<link rel="stylesheet" type="text/css" href="css/base.css" title="base" />
<link rel="alternate stylesheet" type="text/css" href="css/custom11111.css" title="base" />

Now the base.css is loaded because custom1111.css is not available.

Note that the group is defined by the title attribute - you can set many groups too - e.g:

<link rel="stylesheet" type="text/css" href="css/main.css" title="base" />
<link rel="alternate stylesheet" type="text/css" href="css/main_custom.css" title="base" />

<link rel="stylesheet" type="text/css" href="css/nav.css" title="nav" />
<link rel="alternate stylesheet" type="text/css" href="css/nav_custom.css" title="nav" />

Using JavaScript to switch style sheets:

You can disable a style-sheet by setting it to disabled = true use the title attribute to identify the proper style-sheet to disable or enable.

More reading and examples:

HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
Shlomi Hassid
  • 6,500
  • 3
  • 27
  • 48
0

So the solution that works is to put in index.html:

<link rel="stylesheet" href="css/jquery-ui.css" title="theme"/>
<link rel="alternate stylesheet" id="ui-theme" title="theme"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/dark-hive/jquery-ui.css"/>

And in the theme changing code:

url = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/"+theme_name+"/jquery-ui.css";
$('#ui-theme').attr('href', url);

So if the user is offline, the local copy of jquery-ui.css kickes-in and she does not face an unstyled jQuery UI screen.

SiliconValley
  • 1,465
  • 17
  • 30