Uncaught TypeError: Impossible de définir propery 'FUNCTION_NAME' undefined pour la mise en œuvre widget de

Question

Je suis en train de développer un widget jQuery qui peut être intégré sur un site. Voici le code de script:

(function($) {
    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;
        main();
    }
    function scriptLoadHandler() 
    {
        jQuery = window.jQuery.noConflict(true);
        main();
    }
    function main() {
        jQuery(document).ready(function($) {
            var css = $("<link>", { rel: "stylesheet", type: "text/css", href: "http://mysite.com/my_css_path.css" });
            css.appendTo('head');
        });
        $.fn.fetchfeed = function(options) {
            var defaults = {
                //default params;
            };
            var opts = $.extend(defaults, options);

            var myURL = "http://mysite.com/"+opts.user+".json?";
            var params = "&callback=?"
            var jsonp_url = myURL + encodeURIComponent(params);

            $.getJSON(jsonp_url, function(data) {
                //build widget html
            })
            .error(function() {
                //show error
            });
        }
    }
})(jQuery);

Voici le code qui doit être placé sur le site de l'utilisateur:

 <script id='mywidgetscript' src='http://my_site.com/javascripts/widget.js'></script>
 <div id='my-widget-container'></div>
 <script>$('#my-widget-container').fetchfeed({/*parameters*/});</script>

Quand je mets ce code sur d'autres sites et essayez de charger le widget, il me donne l'erreur de Uncaught TypeError: Can not set property 'fetchfeed' of undefined et ne parvient pas à charger le widget. Qu'est-ce qui pourrait être erroné?

Etonnamment ce code widget travaille sur mon site sur localhost !!!

Answer 1

D'accord, après d'innombrables tentatives je l'ai résolu et ai appris beaucoup de choses. Cependant, je ne suis pas clair sur beaucoup de choses. Ne me corriger en éditant cette réponse ou s'il vous plaît commentaire si vous trouvez quelque chose de mal.

First $.fn était nulle (ou valeur étant transmis à elle était nulle / indéfini). La raison, le script a été exécuté après se <script>$('#my-widget-container').fetchfeed({/*parameters*/});</script> appelé. Alors .fetchfeed({...}) a été défini.

Ensuite, je me suis déplacé le code dans window.onload il m'a donné can not call method fetchfeed on null d'erreur. Il doit être parce qu'il ne recevait pas l'élément (à savoir $('#my-widget-container')) aussi script n'a pas été en mesure de reconnaître $.

Encore une fois, après quelques coups secs faisant $.fn.fetchfeed à function fetchfeed() {...} m'a donné undefined fetchfeed d'erreur. En effet, la fonction fetchfeed était dans une autre fonction.

encodant également paramètre &callback=? donne l'erreur de Access-Control-Allow-Origin. Cela devrait être passé dans l'URL comme il est.

Après quelques recherches, je modifie le code ci-dessous et maintenant fonctionne correctement.

function fetchfeed(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);
    }
    function scriptLoadHandler() 
    {
        jQuery = window.jQuery.noConflict(true);
        ff(jQuery, o);
    }
    function ff($, 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 sur le site de l'utilisateur / blog sera

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

La fonction sera exécutée lorsque finalise de chargement de la page.

Answer 2

Si jQuery a été undefined avant l'exécution de votre code, vous TypeError ici:

$.fn.fetchfeed

parce que $ ne sont pas objet jQuery. Essayez de déplacer cette ligne et le code suivant dans le main() dans la construction de jQuery(document).ready(function($){ ... }); ci-dessus.