Question

I created a jquery plugin which inserts the element #tweetFeed, along with some other things. When I call my plugin, and then try to insert an element into #tweetFeed in the callback, it doesn’t insert it. Any ideas why?

Here’s the code that is calling the plugin:

$(document).ready(function() {

    // add the sidebar plugin
    $('html').social(function() {

        //doesn't print anything...ARGGG!!
        console.log('#tweetFeed = '+ $('#tweetFeed').parent().html());
        //$('#tweetFeed').append("<p>TEST</p>");
        //alert("test alert");  // this works now!

        //this line does NOT work. Why?
        $('#tweetFeed').append('<script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: \'profile\',rpp: 4,interval: 6000,width: 250,height: 280,theme: {shell: {background: \'#333333\',color: \'#ffffff\'},tweets: {background: \'#ffffff\',color: \'#444444\',links: \'#e02046\'}},features: {scrollbar: false,loop: false,live: false,hashtags: true,timestamp: true,avatars: false,behavior: \'all\'}}).render().setUser(\'CSuitesIndepend\').start();</script>'); 
    }); 

});

You can see a live example of my problem here

EDIT: After adding @Nicos suggestion, my plugin looks like this:

(function($) {
    $.fn.social = function(callback) {

        var defaults = {

        };
        var options = null;
        var settings = $.extend({}, defaults, options); 

        // stuff goes on here


        if(typeof callback == 'function'){
            callback.call(this);
        }
        return this;
    }
})(jQuery)

The only problem is when I try to append my twitter js code, I get errors which you can see here . What is causing these errors? The alert works just fine.

Answer 1

Look, the declaration of your plugin must recieve the function that you want do recieve…

Please, remove that code on the end of your plugin. Change your plugin to the latest version before you made that changes.

after that you must change this 2 lines:

1. $.fn.social = function() {
2. return this;

the first one will look like this:

$.fn.social = function(callback) {

and the second one will be looking lke this:

if(typeof callback == 'function'){
  callback.call(this, data);
}
return this;

this last bit of code ensures that your plugin will call tha callback function, if you don`t do that the callback is never called

if you want the code already changed look here

P.S. i will delete this paste to protect your plugin, just warn me when you read it