PDA

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



LoriSun
18 Feb 2009, 1:37 AM
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
18 Feb 2009, 2:28 AM
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
18 Feb 2009, 7:31 AM
Very good!
Try this example zip atached.
tks

LoriSun
18 Feb 2009, 7:39 AM
Thank a lot :D

csextjs
18 Feb 2009, 8:02 AM
Excellent!
Good job.

Lwismanuel
18 Feb 2009, 9:05 AM
Excelente!
I wrote something similar but yours is better. You are mad genius.

Iorek
18 Feb 2009, 10:05 PM
Excelente!
I wrote something similar but yours is better. You are mad genius.

DON'T anybody ever read jquery code?:D:D:D



// 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
18 Feb 2009, 11:38 PM
Thanks, Iorek (http://extjs.com/forum/member.php?u=58031). :D

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
19 Feb 2009, 12:12 AM
Thanks, Iorek (http://extjs.com/forum/member.php?u=58031). :D

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
19 Feb 2009, 1:23 AM
Nice, by Ajax. :D

alexandern
12 Mar 2009, 9:48 AM
Very good!
Try this example zip atached.
tks

Really cool, but I am having issues with IE 6 ( unfortunately ) .. Die IE6! Die!!!

alexandern
12 Mar 2009, 10:25 AM
Thank you, this worked with IE6 and Safari... :D


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);
});
}
};
}();

oletros
16 Mar 2009, 4:36 AM
Hi !
Modified Ext.ux.OnDemandLoadByAjax to permit multiple callbacks, one on each script or
no callback, and no check of script extension (php, js, anything).



/** begin of code **/
Ext.ux.OnDemandLoadByAjax = function() {
loadComponent = function(component) {
var sURL = null;
var sCALLBACK = null;

if (typeof component === "string") {
sURL = component;
} else if (typeof component === "object") {
sURL = component[0];
sCALLBACK = component[1];
}

handleSuccess = function(response, options) {
var head = document.getElementsByTagName("head")[0];
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 sCALLBACK == "function") {
if (document.all) {
sCALLBACK();
} else {
sCALLBACK.defer(50);
}
}
}

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

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

}

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

/** end of code **/

/** example of use, one callback only **/
var oScripts = [
'dependence1.js', 'dependence2.js', [ 'script.php', function(options) {
alert('this is a callback after script.php');
}
]
];
Ext.ux.OnDemandLoadByAjax.load(oScripts);


/** example of use, multiples callbacks **/
var oScripts = [
[ 'script1.php', function(options) {
alert('this is a callback after script1.php');
}
] ,[ 'script2.php', function(options) {
alert('this is a callback after script2.php');
}
]
];

Ext.ux.OnDemandLoadByAjax.load(oScripts);


Thanks

LoriSun
27 Apr 2009, 8:24 AM
Hi oletros (http://extjs.com/forum/member.php?u=55782),

Thanks for your effort, feel free to make upgrade on it.:))

moegal
12 Aug 2009, 1:46 AM
LoriSun,

these are password protected files. 3 .xml and 1 .properties

?

Marty

moegal
13 Aug 2009, 1:38 AM
I am getting the same thing. Password protected xml files.

Sorry, not sure what is going on here.

Marty

Hristina
14 Aug 2009, 2:07 AM
I have something like this
ONE.JS
...
select: function(obj) {
...
}
...
and I want to invoke this function in another js file,but I do not know how to manage that
For Example
TWO.JS
...
if(condition){
...
select: function(obj) :-/
...
}
...
Something like that!
Thanks

LoriSun
23 Aug 2009, 6:52 PM
Thanks, If any concern just send me the email.

mpelzsherman
9 Nov 2009, 8:26 AM
Do either of these solutions work in IE7?

zakif
24 Oct 2011, 4:07 AM
Dear LoriSun,

I have find your solution might be useful for my problem (Loaded Tab Panel js only when needed (http://www.sencha.com/forum/showthread.php?152034-Load-Grid-JS-only-when-needed)).

But I still don't get it. Would you like please to share some tutorial on implementing your solution.

Thanks in advance.