views:

21

answers:

0

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.