Hi. I am building a javascript widget and i plan to use JQuery so i need to load it dynamicly and set it to no conflict mode. I am using a Object Oriented approach in my js following the example of GetSatatisfaction.com widget (http://s3.amazonaws.com/getsatisfaction.com/javascripts/feedback-v2.js)
I have also found this tutorial about loading jquery dynamicly but it uses a annonymous function.(http://alexmarandon.com/articles/web_widget_jquery/(. So what i am trying to do is to mix both links I provided.
Here is my widget code;
var MyNamespace;
var jQuery;
if(MyNamespace == undefined) {
MyNamespace = {};
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler()
{
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
}
MyNamespace.feedbackFormWidget = function(options) {
this.loadAssets();
(...)
jQuery(document).ready(function($) {
alert("x");
});
}
MyNamespace.feedbackFormWidget.prototype = {
css_path: '...',
loadAssets : function(){
MyNamespace.loadStylesheet(this.css_path + 'style.css');
MyNamespace.loadJQuery();
}
}
MyNamespace.loadJQuery = function()
{
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
script_tag.onload = scriptLoadHandler;
script_tag.onreadystatechange = function () { // Same thing but for IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
}
}
When i run my code it says that "jQuery is not a function" when I call the ready method. The jQuery is being correctly loaded and if i call the ready function in the scriptLoadHandler it executes correctly.
Also i would prefer to include the jQuery variable inside my namespace.
Thanks for your help.