jQwidgets How to Dynamically loading external JavaScript files? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

jQwidgets How to Dynamically loading external JavaScript files? Posts

August 14, 2012 at 2:58 am jQwidgets How to Dynamically loading external JavaScript files? #6767

webiis

Member

I use jqwidgets each page needs many JS, and dependencies need to be considered a little cumbersome;
Direct load jqx-all.js, and too big, and long load times.
I want to know jqwidgets Can Dynamically loading external JavaScript Files?

Code like this!

function LoadJsCssFile(filename, filetype){ if (filetype=="js"){ var fileref=document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src",filename); }


else if (filetype=="css"){

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("scripts/gettheme.js", "js");

LoadJsCssFile("jqwidgets/jqxcore.js", "js");

LoadJsCssFile("jqwidgets/jqxsplitter.js", "js");

LoadJsCssFile("jqwidgets/jqxtabs.js", "js");

LoadJsCssFile("jqwidgets/jqxtree.js", "js");

LoadJsCssFile("jqwidgets/jqxmenu.js", "js");

LoadJsCssFile("jqwidgets/jqxbuttons.js", "js");

LoadJsCssFile("jqwidgets/jqxpanel.js", "js");

LoadJsCssFile("jqwidgets/jqxcheckbox.js", "js");

LoadJsCssFile("jqwidgets/jqxsplitter.js", "js");

LoadJsCssFile("jqwidgets/jqxscrollbar.js", "js");

Best Wishes,
Webiis

August 14, 2012 at 8:24 pm jQwidgets How to Dynamically loading external JavaScript files? #6780

Peter Stoev

Keymaster

For loading external files on demand, use can use the jQuery’s getScript method. Of course, if you want to use multiple widgets, you have 2 options – load the widgets files or load the jqx-all.js.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 14, 2012 at 11:52 pm jQwidgets How to Dynamically loading external JavaScript files? #6785

webiis

Member

I use jQuery’s getScript method.

But they do not support opera, Chrome, only support ie8, firefox, But also has bug.

There are other methods?

Direct load jqx-all.js, and too big, and long load times.


$.getScript("jqwidgets/jqxcore.js");

$.getScript("jqwidgets/jqxsplitter.js");

$.getScript("jqwidgets/jqxtabs.js");

$.getScript("jqwidgets/jqxtree.js");

$.getScript("jqwidgets/jqxmenu.js");

$.getScript("jqwidgets/jqxscrollbar.js");

$.getScript("jqwidgets/jqxbuttons.js");

$.getScript("jqwidgets/jqxpanel.js");

$.getScript("jqwidgets/jqxcheckbox.js");

Best Wishes,
Webiis

August 16, 2012 at 9:34 pm jQwidgets How to Dynamically loading external JavaScript files? #6812

Peter Stoev

Keymaster

I guess that’s because getScript is using internally ajax and it’s appropriate for loading the jqx-all.js on demand. I’ve also prepared a small sample which demonstrates how to dynamically load jQWidgets javascript files.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url: '../../jqwidgets/jqxcore.js',
                dataType: "script",
                async: false
            });
            $.ajax({
                url: '../../jqwidgets/jqxbuttons.js',
                dataType: "script",
                async: false
            });
            var theme = '';
            // Create jqxButton widgets.
            $("#jqxButton").jqxButton({ width: '150', height: '25', theme: theme });
            $("#jqxSubmitButton").jqxButton({ width: '150', height: '25', theme: theme });
            $("#jqxDisabledButton").jqxButton({ disabled: true, width: '150', height: '25', theme: theme });
            // Subscribe to Click events.
            $("#jqxButton").bind('click', function () {
                $("#events").find('span').remove();
                $("#events").append('<span>Button Clicked</span');
            });
            $("#jqxSubmitButton").bind('click', function () {
                $("#events").find('span').remove();
                $("#events").append('<span>Submit Button Clicked</span');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='content'>
        <div style='width: 150px;' id='jqxWidget'>
            <div>
                <input type="button" value="Button" id='jqxButton' />
            </div>
            <div>
                <input style='margin-top: 20px;' type="submit" value="Submit" id='jqxSubmitButton' />
            </div>
            <div>
                <input style='margin-top: 20px;' type="Button" value="Disabled" id='jqxDisabledButton' />
            </div>
            <div style='font-size: 13px; font-family: Verdana; margin-top: 10px;'>
                <div>
                    Events:</div>
                <div id='events'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.