Uncaught Typeerror: Can Not Set Propery 'function_name' Of Undefined For Widget Implementation

I am trying to develop a jQuery widget which can be embedded on any site. Following is the script code: (function($) { var jQuery; if (window.jQuery === undefined || window

Solution 1:

If jQuery was undefined before your code execution, then you get TypeError here:

$.fn.fetchfeed

because $ aren't jQuery object. Try to move this row and following code in the main() into the jQuery(document).ready(function($){ ... }); construction above.

Solution 2:

Okay, after countless attempts I solved it and got to learn many things. Still I'm unclear about many things. Do correct me by editing this answer or please comment if you find anything wrong.

First $.fn was null (or value being passed to it was null/undefined). Reason, the script was getting executed after <script>$('#my-widget-container').fetchfeed({/*parameters*/});</script> being called. So .fetchfeed({...}) was undefined.

Then I moved the code in window.onload it gave me error can not call method fetchfeed on null. It must be because it was not getting the element (i.e. $('#my-widget-container')) also script was not able to recognize $.

Again after few tweaks making $.fn.fetchfeed to function fetchfeed() {...} gave me error undefined fetchfeed. This was because function fetchfeed was inside another function.

Also encoding &callback=? parameter gives Access-Control-Allow-Origin error. This should be passed in url as is.

After some research I modified the code as below and now working correctly.

functionfetchfeed(options) {
    var o = options;
    var jQuery;
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.6.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.6.2/jquery.min.js");
        script_tag.onload = scriptLoadHandler;
        script_tag.onreadystatechange = function () 
        { 
            if (this.readyState == 'complete' || this.readyState == 'loaded')
                scriptLoadHandler();
        };
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    }
    else 
    {
        jQuery = window.jQuery;
        ff(jQuery, o);
    }
    functionscriptLoadHandler() 
    {
        jQuery = window.jQuery.noConflict(true);
        ff(jQuery, o);
    }
    functionff($, options) {
        var defaults = {
            ...
        };
        var opts = $.extend(defaults, options);

        var jsonp_url = "http://mysite.com/?callback=?";            
        $.getJSON(jsonp_url, function(data) {
            //success
        })
        .error(function() {
            //fail
        });
    }
}

Code on user's site/blog will be

<divid='my-widget-container'></div><scriptid='my_widget_script'src='https://PATH_OF_SCRIPT/FILE_NAME.js'></script><scripttype='text/javascript'>fetchfeed({/*params*/});
</script>

The function will be executed when page load completes.