Uncaught TypeError: Cannot call method 'noConflict' of undefined

Question

I am trying to create a widget using javascript and jquery in SalesForce, I was stuck with an ERROR: Uncaught TypeError: Cannot call method 'noConflict' of undefined

Below is the code which I used:

(function() {

// Localize jQuery variable

var $j;

/******** Load jQuery if not present *********/

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",

        "https://ap1.salesforce.com/resource/go/jquery.min.js");

    if (script_tag.readyState) {

      script_tag.onreadystatechange = function () { // For old versions of IE

          if (this.readyState == 'complete' || this.readyState == 'loaded') {

              scriptLoadHandler();

          }

      };

    } else {

      script_tag.onload = 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

    $j = window.jQuery;

    main();

}

/******** 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

    $j = window.jQuery.noConflict(true);

    // Call our main function

    main(); 

}

/******** Our main function ********/

function main() { 

    $j(document).ready(function($) { 

        /******* Load CSS *******/

       var css_link = $("<link>", { 

            rel: "stylesheet", 

            type: "text/css", 

            href: "style.css" 

        });

        css_link.appendTo('head');          

        /******* Load HTML *******/

        var jsonp_url = "http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?";

        $.getJSON(jsonp_url, function(data) {

          $('#example-widget-container').html("This data comes from another server: " + data.html);

        });

    });

}

})(); // We call our anonymous function immediately

In the browser console ERROR is pointed to the first line of the scriptLoadHandler function.

Answer 1

The local jquery variable can be declared as given below:

//Localize jQuery variable

var $j = jQuery.noConflict();