Loading jQuery

[skippt]

Hi, I am trying to build an embeddable widget, so that a user can embed a short piece of javascript on their site and it will track where users click.

 

My code for the HTML page is:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
        google.load("jquery", "1.3");
</script>
<script src="clickmap.js" type="text/javascript"></script>
<script type="text/javascript">$(function() { $(document).saveClicks(); });</script>

I am trying to shorten it down so I can load the jquery and clickmap.js through one file like this:

 <script type="text/javascript" src="initial.js"></script>

The clickmap.js code is:

(function($) {
alert('HELLO');
$.fn.saveClicks = function() {
    jQuery(this).bind('mousedown.clickmap', function(evt) {
        jQuery.post('clickmap.php', {  
            x:evt.pageX,  
            y:evt.pageY,  
            l:escape(document.location.pathname)
        });
    });
};

         
})(jQuery);

I am able to load clickmap.js as the alert works but everything after that does not. I believe it may have something to do with loading the jQuery through google.load. When I load the jQuery through google.load without using inital.js the code will execute as it should, but when I load it like this:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Then the code will not execute.

 

Code for initial.js:

(function () {

    var scriptName = "initial.js"; //name of this script, used to get reference to own tag
    var jQuery; //noconflict reference to jquery
    var jqueryPath = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
    var jqueryVersion = "1.8.3";
    var scriptTag; //reference to the html script tag

    var allScripts = document.getElementsByTagName('script');
    var targetScripts = [];
    for (var i in allScripts) {
        var name = allScripts[i].src
        if(name && name.indexOf(scriptName) > 0)
            targetScripts.push(allScripts[i]);
    }

    scriptTag = targetScripts[targetScripts.length - 1];

    function loadScript(src, onLoad) {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src", src);

        if (script_tag.readyState) {
            script_tag.onreadystatechange = function () {
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    onLoad();
                }
            };
        } else {
            script_tag.onload = onLoad;
        }
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    }

    if (window.jQuery === undefined || window.jQuery.fn.jquery !== jqueryVersion) {
        loadScript(jqueryPath, initjQuery);
    } else {
        initjQuery();
    }

    function initjQuery() {
        jQuery = window.jQuery.noConflict(true);
        main();
    }

    function main() {
        jQuery(document).ready(function ($) {
            loadScript("clickmap.js", function() { /* loaded */ });
        });
        
    }

})();

Could anyone help me fix this please?

[dalecosp]

Just a wild, wild guess ... scope issues. Are you really only loading it that way for the sake of brevity in the top-level document?

 

What does your debugger tell you?

[cyberRobot]

Have you considered using Crazy Egg instead of building your own tool?

http://www.crazyegg.com/

[ks123]

Or u can take as example Plerdy click tracking map

https://www.plerdy.com/heatmap/