That was my first attempt, but, as Felix suggested, you don't know when the
script has ended loading since it's an async load. The callback solution did
the trick. Here you have the final code. It loads .js and .css in one call, and
seems to work in FF and IE. You can specify base directories for .js and .css
files with 'jsbase' and 'cssbase' options respectively, and switch css loading
with the 'css' option. Finally you can specify the callback function with the
'onload' option.
An example of use:
$(document).ready(function(){
$.require('jquery.accordion', {jsbase: 'js',
onload: function(){
$('#theaccordion').Accordion();
}
});
$.require('jquery.history', {jsbase: 'js'});
...
It assumes the same name for plugin.js and plugin.css
//Plugin loading in jquery
(function(jq){
jq.extend({
require: function(plugin, o){
o = jq.extend({
css: false,
jsbase: '',
cssbase: '',
onload: null
}, o || {});
var src = o.jsbase + '/' + plugin + '.js';
// Provide a callback function to the getScript function
jq.getScript(src, o.onload);
if(o.css){
var c = document.createElement('link');
c.type = 'text/css';
c.rel = 'stylesheet';
c.href = o.cssbase + '/' + plugin + '.css';
jq('head')[0].appendChild(c);
}
}
});
})(jQuery);
Thanks to all.
Jip
-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Michael Geary
Enviado el: jueves, 28 de diciembre de 2006 17:58
Para: 'jQuery Discussion.'
Asunto: Re: [jQuery] dynamic plugin loading
If you're just trying to load a stylesheet dynamically, all you need to do
is this:
function addSheet( url, doc ) {
doc = doc || document;
var link = doc.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
doc.getElementsByTagName('head')[0].appendChild( link );
}
Similarly, you can load a script with:
function addScript( url, doc ) {
doc = doc || document;
var script = doc.createElement( 'script' );
script.type = 'text/javascript';
script.charset = 'utf-8';
script.src = url;
doc.getElementsByTagName('head')[0].appendChild( script );
}
-Mike
> > I'm trying to develope a small piece for dynamic loading in jquery,
> > wich loads the .js and .css source files on the fly without any
> > special markup in the html page.
>
> For .js files you can use jspax (www.jspax.org). I use it to
> load jQuery and plugins on demand (actually I made it for
> that purpouse at the beginning).
> For .css I just had that question from a friend of mine and
> made a small set of jsPax-packages for him:
>
> ---cssloader.js
> $using('xBrowser.simulateXMLHttpRequest',function() {
> $package('cssloader', {
> base: '/',
> load: function(css) {
> var x = new XMLHttpRequest();
> x.open('GET',cssloader.base+css+'.css');
>
> x.onload = function() {
> var e = document.createElement("style");
> e.type="text/css";
>
> e.appendChild(document.createTextNode(x.responseText));
> document.getElementsByTagName("head")
> [0].appendChild(e);
> };
> x.send('');
> }
> });
> });
> ---
>
> ---xBrowser/simulateXMLHttpRequest.js
> var impl = 'native';
> if( !window.XMLHttpRequest ) impl =
> (window.ActiveX)?'activex':'iframe';
> $using('xBrowser.simulateXMLHttpRequest.'+impl,function() {});
> ---
>
> ---xBrowser/simulateXMLHttpRequest/native.js:
> $package('xBrowser.simulateXMLHttpRequest.native',{});
> ---
>
> ---xBrowser/simulateXMLHttpRequest/activex.js:
> var lib = /MSIE 5/.test(navigator.userAgent) ? "Microsoft" :
> "Msxml2"; window.XMLHttpRequest = function() {
> var rval = new ActiveXObject(lib + ".XMLHTTP");
> rval.onreadystatechange = function() {
> if(x.readystate == 4) rval.onload();
> };
> return rval;
> };
> $package('xBrowser.simulateXMLHttpRequest.activex',{});
> ---
>
> use them like this:
>
> $using('cssloader', function(){
> cssloader.base='https://www.example.com/styles/';
> cssloader.load('mywonderfull');
> ...
> });
>
> I have not tested the code, but he did not complain up to now ;-)
>
> > The problem is that it seems that the browser doesn't wait
> until the
> > script (the plugin) is finished loading
>
> Yes, you are using assynchronous XMLHttpRequests. JsPax does
> that as well, but it can cope with that by usein callback
> functions. JSAN does use synchronous XMLHttpRequests to
> circumvent that problem.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
