Is there a way to dynamically load the CSS and JS files?

[RichardMember]

Is there a way to dynamically load the jqxWidgets Tree CSS and JS files?

First of all I started with a page that has the tree menu installed and works perfectly.  Then I tired to convert the page to dynamically load the CSS and JS files.

I found an example from the internet and I modified it to load the jqxWidget CSS and JS files.  Below is my code.

function loadjscssfile(filename, filetype){
if (filetype==”js”){ //if filename is a external JavaScript file
var fileref=document.createElement(‘script’)
fileref.setAttribute(“type”,”text/javascript”)
fileref.setAttribute(“src”, filename)
}
else if (filetype==”css”){ //if filename is an external CSS file
var fileref=document.createElement(“link”)
fileref.setAttribute(“rel”, “stylesheet”)
fileref.setAttribute(“type”, “text/css”)
fileref.setAttribute(“href”, filename)
}
if (typeof fileref!=”undefined”)
document.getElementsByTagName(“head”)[0].appendChild(fileref)
}

loadjscssfile(“http://www.domainname.com/ca_files/css/hcc_ca_style.css”, “css”)
loadjscssfile(“http://www.domainname.com/ca_files/js/jqwidgets/styles/jqx.base.css”, “css”)
loadjscssfile(“http://www.domainname.com/ca_files/js/jqwidgets/styles/jqx.hcc.css”, “css”)
loadjscssfile(“http://www.domainname.com/ca_files/js/jqwidgets/scripts/gettheme.js”, “js”)
loadjscssfile(“http://www.domainname.com/ca_files/js/jqwidgets/jqxcore.js”, “js”)
loadjscssfile(“http://www.domainname.com/ca_files/js/jqwidgets/jqxbuttons.js”, “js”)
loadjscssfile(“http://www.domainname.com/ca_files/js/jqwidgets/jqxscrollbar.js”, “js”)
loadjscssfile(“http://www.domainname.com/ca_files/js/jqwidgets/jqxpanel.js”, “js”)
loadjscssfile(“http://www.domainname.com/ca_files/js/jqwidgets/jqxtree.js”, “js”)
loadjscssfile(“http://www.domainname.com/ca_files/js/jqwidgets/jqxexpander.js”, “js”)

I am using the source option to define the menu. When the page displays, the menu does not appear.  When I use Firebug to display the CSS files assigned to the page, I see all of the files.  When I view the JS files assigned to the page, I see all of the jqxWidgets JS files.  Everything appears to be in place but the page is not rendering properly.

Can you tell me why this is not working?

[Peter StoevKeymaster]

Hi Richard,

Here’s how to dynamically add CSS file:

  var url = "../../jqwidgets/styles/jqx.base.css";
    if (document.createStyleSheet != undefined) {
            document.createStyleSheet(url);
    }
    else $(document).find('head').append('<link rel="stylesheet" href="' + url + '" media="screen" />');

Here’s how to add JS files:

   var files = ['globalization/jquery.global.js', '../demos/jqxgrid/generatedata.js',
            '../scripts/knockout-2.1.0.js', 'jqx-all.js'];
      
        for (var i = 0; i < files.length; i++) {
            var url = '../../jqwidgets/' + files[i];
            $.ajax({
                url: url,
                dataType: "script",
                async: false
            });
        }

The above is tested and works for us.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[RichardMember]

Thanks Peter, You have been a tremendous help… thank you so much for your time…

It works with warnings in IE; the warning is Error: ‘$’ is undefined

It does not work in Fire Fox. I noticed in your code example the load for the js files is being performed with

$.ajax({
url: url,
dataType: “script”,
async: false
});

How can you use the $.ajax statement when JQuery has yet to be loaded?

Here is my load routine

var files = ['/ca_files/js/jqwidgets/scripts/gettheme.js', '/ca_files/js/jquery.1.8.2.js',
'/ca_files/js/jqwidgets/jqxcore.js', '/ca_files/js/jqwidgets/jqxbuttons.js','/ca_files/js/jqwidgets/jqxscrollbar.js','/ca_files/js/jqwidgets/jqxpanel.js','/ca_files/js/jqwidgets/jqxtree.js','/ca_files/js/jqwidgets/jqxexpander.js'];
path = 'www.domainname.com'
for (var i = 0; i < files.length; i++) {
var url = 'http://' + path + files[i];
$.ajax({
url: url,
dataType: "script",
async: false
});

You can see that JQuery is the second file to be loaded.

[Peter StoevKeymaster]

Hi Richard,

If that’s the warning, then a file using jQuery is loaded before the jQuery framework. Btw. gettheme file is used only in our samples. It is not necessary to use it in your project.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[RichardMember]

Hi Peter,
Thanks for letting me know about gettheme. The only code that is being loaded is your code that loads the JavaScript.

$.ajax({
url: url,
dataType: “script”,
async: false
});

The $ is causing the warning…

How can you use the $.ajax statement when JQuery has yet to be loaded?.

[Peter StoevKeymaster]

You can’t. $.ajax is implemented in the jQuery framework so before using $.ajax, jQuery must be loaded.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[RichardMember]

That is what I thought. The code you gave me is using JQuery to load the JavaScript.

var files = [‘globalization/jquery.global.js’, ‘../demos/jqxgrid/generatedata.js’,
‘../scripts/knockout-2.1.0.js’, ‘jqx-all.js’];
for (var i = 0; i < files.length; i++) {
var url = '../../jqwidgets/' + files[i];
$.ajax({
url: url,
dataType: "script",
async: false
});
}

How can I dynamically load all of the JavaScript?
I have found lots of examples on the internet but none have worked so far. I am still searching.

[RichardMember]

Good Day Peter, I was wrong when I said your code worss with IE and fails with FF. As it turned out, after adding your code example, I neglected to delete the <SCRIPT html statements for the JS files. That is why it works in IE and not in FF. After removing the html statements the tree does not display in IE nor FF.

That appears to confirm that the css files are loading properly.

The example I gave at the top of this post should work… I am left wondering why the Tree menu does not function properly after all of the js support files are loaded. Peter, can you show me a way to dynamically load the jqxTree App, that works?

[Peter StoevKeymaster]

Hi Richard,

I prepared a working sample for you. Please, see it below:

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // add CSS files.
            var baseThemeURL = "../../jqwidgets/styles/jqx.base.css";
            var darkblueThemeURL = "../../jqwidgets/styles/jqx.darkblue.css";
            if (document.createStyleSheet != undefined) {
                document.createStyleSheet(baseThemeURL);
                document.createStyleSheet(darkblueThemeURL);
            }
            else {
                $(document).find('head').append('<link rel="stylesheet" href="' + baseThemeURL + '" media="screen" />');
                $(document).find('head').append('<link rel="stylesheet" href="' + darkblueThemeURL + '" media="screen" />');
            }
            // add scripts.
            var files = ['jqxcore.js', 'jqxbuttons.js', 'jqxscrollbar.js', 'jqxpanel.js', 'jqxtree.js'];
            for (var i = 0; i < files.length; i++) {
                var url = '../../jqwidgets/' + files[i];
                $.ajax({
                    url: url,
                    dataType: "script",
                    async: false
                });
            }
            // Create jqxTree
            $('#jqxTree').jqxTree({ height: '400px', width: '300px', theme: 'darkblue' });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxTree' style='float: left; margin-left: 20px;'>
        <ul>
            <li>Home</li>
            <li>Solutions
                        <ul>
                            <li>Education</li>
                            <li>Financial services</li>
                            <li>Government</li>
                            <li>Manufacturing</li>
                            <li>Solutions
                                <ul>
                                    <li>Consumer photo and video</li>
                                    <li>Mobile</li>
                                </ul>
                            </li>
                            <li>All industries and solutions</li>
                        </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[RichardMember]

Thanks Peter, but the example you give does not load JQuery dynamically.

I finally figured out how to make this work… See my code below.

// Dynamically Load the Style Sheets
function loadcssfile(filename){
var fileref=document.createElement(“link”)
fileref.setAttribute(“rel”, “stylesheet”)
fileref.setAttribute(“type”, “text/css”)
fileref.setAttribute(“href”, filename)
if (typeof fileref!=”undefined”)
document.getElementsByTagName(“head”)[0].appendChild(fileref)
}
loadcssfile(“http://www.domainname.com/ca_files/css/hcc_ca_style.css”)
loadcssfile(“http://www.domainname.com/ca_files/js/jqwidgets/styles/jqx.base.css”)
loadcssfile(“http://www.domainname.com/ca_files/js/jqwidgets/styles/jqx.hcc.css”)

// Dynamically Load the JavaScript
document.Echo=document[“standard”+”Write”]==null?document[“write”]:document[“standard”+”Write”];
var include=function(path){path=”http://www.domainname.com/ca_files/js/”+path;document.Echo(”);};
include(“jquery.1.8.2.js”);
include(“jqwidgets/jqxcore.js”);
include(“jqwidgets/jqxbuttons.js”);
include(“jqwidgets/jqxscrollbar.js”);
include(“jqwidgets/jqxpanel.js”);
include(“jqwidgets/jqxtree.js”);
include(“jqwidgets/jqxexpander.js”);
include(“store.js”);

All of these instructions can be placed in the body of the page.

[Author]

Posts