How To Load A Css Dynamically In Cordova

I'm trying to load a CSS dynamically in cordova over a xhr request. The loading of the CSS is not a Problem, I can load it over xhr and store it to the filesystem over the HTML5 F

Solution 1:

$('head').append('<link rel="stylesheet" href="style2.css"type="text/css" />');

Solution 2:

* UPDATE: I've got a working solution and I'll add it to my answer below *

I've found this problem and the suggested answers unfortunately haven't resolved it.

Loading the CSS data from an external PHP script via an XHR request (as my CSS data is dynamic to each page) I use:

var storeCSSURL = "https://www.example.com/dynamicCSS.php?storeID=x";
$('head').append('<link rel="stylesheet" href="' + storeCSSURL + '" type="text/css" />');

I'd also tried replacing the existing stylesheet link with the new URL; and added datetime stamp to it to prevent caching, which also didn't work.

Works great in the web browser and I know the data is loading through the XHR request and also being applied to the head CSS tag, although it doesn't work in Cordova / Phone Gap... the Apps just don't update with the CSS changes from the PHP script.

* NEW UPDATE *

I finally came up with a solution that works, it's a bit of a hack as it doesn't directly solve the problem; but works around it and is great for my needs.

In PhoneGap / Cordova, I use a pageInit.js type scenario that loads the web page in dynamically from a PHP script, I imagine most people use it in a somewhat similar way.

After page load I added:

$("body").append('<styleid="dynamicStyles"></style>');

Then simply did a $.POST request to the Dynamic CSS (PHP) file, which returned all the dynamic style data; which I then loaded into a style tag.

This looks something like this:

$.post("https://www.example.com/controller.php", { url: url }, function (data, status) {
    if (status == "success") {
        $("body").html(data);
        // Loads the main page content into the body tag
        $("body").append('<style id="dynamicStyles"></style>');
        // Appends the main page content with a style tag
        $.post("https://www.example.com/dynamicCSS.php", { storeID: storeID }, function (data, status) {
            if (status == "success") {
                $("#dynamicStyles").html(data);
                // Loads CSS data from external PHP script dynamically// then places it into the new style tag.
            }
        });
    }
});

The CSS updates from this line:

$("#dynamicStyles").html(data);

This loads all the new dynamic style data into the style tag; so the result is an on-page style definition, which you can replace the styles with using .html() at any stage from your external PHP with CSS data.

Phone Gap / Cordava recognises the style tag changes and updates visuals accordingly :-)

I'm sure you could set your project up to load all CSS data in this way instead of the normal head CSS link; and you'd never have that annoying CSS caching issue with Phone Gap / Cordova.

I hope this is useful to someone!

Solution 3:

$(document).ready(function () {

    $("a").click(function () {

        $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

    });

});