Ext.ux.OnDemandLoad : Dynamic load js file and invoke the method in it

[LoriSun]

Hi guys,
I try to dynamic down load one js file, then invoke the method in it. I did it !!!!!!

//------------------------------HAHA.js-------------------------------
Ext.namespace('Ext.ux');

Ext.ux.OnDemandLoad = function(){
    
    loadComponent = function(component,callback){
        var fileType = component.substring(component.lastIndexOf('.'));
        var head = document.getElementsByTagName("head")[0];
        var done = false;
        if (fileType === ".js") {
            var fileRef = document.createElement('script');
            fileRef.setAttribute("type", "text/javascript");
            fileRef.setAttribute("src", component);
            fileRef.onload = fileRef.onreadystatechange = function(){
                    if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") ) {
                        done = true;
                        eval(callback+'()');
                        head.removeChild(fileRef);
                    }
                };
        } else if (fileType === ".css") {
            var fileRef = document.createElement("link");
            fileRef.setAttribute("type", "text/css");
            fileRef.setAttribute("rel", "stylesheet");
            fileRef.setAttribute("href", component);
        }
        if (typeof fileRef != "undefined") {
            head.appendChild(fileRef);
        }
    };

    return {
        load: function(components, callback){
            Ext.each(components, function(component){
                loadComponent(component,callback);
            });
        }
    };
}();

to use it :

Ext.ux.OnDemandLoad.load('js/desktop/AccountSeletor.js','initAccountSelect');

function  initAccountSelect(){
       //do what you want to do, when js file be download already.
}

[chalu]

Hi guys,
I try to dynamic down load one js file, then invoke the method in it. I did it !!!!!!

You did what . Your code is not even readable, why would I want to use it anyways

edit that post, wrap the code in blocks.

[tanajura]

Very good!
Try this example zip atached.
tks

[LoriSun]

Thank a lot

[csextjs]

Excellent!
Good job.

[Lwismanuel]

Excelente!
I wrote something similar but yours is better. You are mad genius.

[Iorek]

Excelente!
I wrote something similar but yours is better. You are mad genius.

DON'T anybody ever read jquery code?

// If we're requesting a remote document
        // and trying to load JSON or Script with a GET
        if ( s.dataType == "script" && type == "GET"
                && remote.test(s.url) && remote.exec(s.url)[1] != location.host ){
            var head = document.getElementsByTagName("head")[0];
            var script = document.createElement("script");
            script.src = s.url;
            if (s.scriptCharset)
                script.charset = s.scriptCharset;

            // Handle Script loading
            if ( !jsonp ) {
                var done = false;

                // Attach handlers for all browsers
                script.onload = script.onreadystatechange = function(){
                    if ( !done && (!this.readyState ||
                            this.readyState == "loaded" || this.readyState == "complete") ) {
                        done = true;
                        success();
                        complete();
                        head.removeChild( script );
                    }
                };
            }

            head.appendChild(script);

            // We handle everything using the script element injection
            return undefined;
        }

[LoriSun]

Thanks, Iorek.

New Version upgrade:
1. Clean useless Ext.each.
2. Change the type of second parameter to fix the callbackFN scope issue.
details please refer to the attached.

[Iorek]

Thanks, Iorek.

New Version upgrade:
1. Clean useless Ext.each.
2. Change the type of second parameter to fix the callbackFN scope issue.
details please refer to the attached.

Here's another approach to achieve this:

Ext.ux.OnDemandLoadByAjax = function(){

    loadComponent = function(component, callback){
        handleSuccess = function(response, options) {
            var type = component.substring(component.lastIndexOf('.'));
            var head = document.getElementsByTagName("head")[0];
            if (type === ".js") {
                var js = document.createElement('script');
                js.setAttribute("type", "text/javascript");
                js.text = response.responseText;
                if (!document.all) {
                    js.innerHTML = response.responseText;
                }

                head.appendChild(js);
            }

            if(typeof callback == "function"){
                if(document.all) {
                    callback();
                } else {
                    callback.defer(50);
                }
            };
        };

        handleFailure = function(response, options) {
            alert('Dynamic load script: [' + component + '] failed!');
        };

        Ext.Ajax.request({
            url: component,
            method: 'GET',
            success: handleSuccess,
            failure: handleFailure,
            disableCaching : false
        });
    };

    return {
        load: function(components, callback){
            Ext.each(components, function(component){
                loadComponent(component, callback);
            });
        }
    };
}();

[LoriSun]

Nice, by Ajax.