CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
sm.ali
sm.ali

Reputation: 65

loading jquery library from javascript getting error $ is not defined

I have loaded my jquery library in my plug in from javascript and getting an error $ is not defined if I call my plug in anonymous function from another javscript page Following is my work

(function () {

    // Localize jQuery variable
    var jQuery;

    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.11.3') {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src",
            "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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
        jQuery = 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
        jQuery = window.jQuery.noConflict();
        // Call our main function
        main();
    }

    /******** Our main function ********/
    function main() {
        // Add some validation here to make sure UI is not loaded etc...
        jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js');

        jQuery(document).ready(function ($) {
            /******* Load CSS *******/
            var css_link = $("<link>", {
                rel: "stylesheet",
                type: "text/css",
                href: "StyleSheet.css"
            });
            css_link.appendTo('head');

            //loading plug in
            "use strict";
            $.fn.myplugin = function (options) {
                var settings = $.extend({
                    //default
                    isstatic: false
                });
                var options = $.extend(settings, options);
                var images = ['http://www.example1.com'/1.png, 'http://www.example2.com/final.gif'];
                //Iterate over the current set of matched elements
                return this.each(function () {
                    var obj = $('.div2');

                    obj.hide();
                    $(this).show();

                    $(this).click(function () {

                        obj.toggle("slow");
                        if (options.isstatic) {
                            $(".image-class").attr("src", images[0]);
                            options.isstatic = false;
                        }
                        else {
                            $(".image-class").attr("src", images[1]);
                            options.isstatic = true;
                        }
                    });

                });

                return options.isstatic = false;
            }



        });




    }
})();

I am calling it using another file.js

$(document).ready(function () {
    $('#mydiv').myplugin();

});

I am getting an error here $ is no defined how to remove this error may b I have done something wrong with jQuery variable or $ in javascript file

Upvotes: 2

Views: 449

Answers (1)

debatanu
debatanu

Reputation: 776

I guess you need jquery for further scripts in your page or for your plugin to run, so jquery reference should be the first one in the head, could you try replacing the part of your code ( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild(script_tag)

with

var head=( document.getElementsByTagName("head")[0] || document.documentElement ); head.insertBefore(script_tag,head.firstChild);

Upvotes: 2

Related Questions