Jquery: function doesn't allow to be appended

Question

I'm trying to insert the jquery function tweetable into a specific place in my HTML. The documentation says something like this:

$('#twitter').tweetable({username: 'username'});

The problem is that the tweetable HTML is placed before anything else inside the #twitter ID. In my case I want it at the end, so I tried this:

$('#twitter').append( tweetable({username: 'username'}) );

But Firebug says that tweetable is not defined. How should I call tweetable so that it can append to the #twitter ID?

EDIT: A part of the source of tweetable that is probably interesting for solving this:

(function ($) {
    $.fn.tweetable = function (options) {
        var defaults = {
            limit: 5,
            username: 'twitter',
            time: true,
            replies: false
        };
        var options = $.extend(defaults, options);
        return this.each(function (options) {
            ...
        });
    }
})(jQuery);

Answer 1

How about creating a new element, calling tweetable on that, and appending it to your current element?

var temp = $('<div></div>');
temp.tweetable({username:'username'});
$('#twitter').append(temp.html());

I haven't tested this, let me know if it doesn't work. I am guessing it could be combined into one line:

$('#twitter').append( $('<div></div>').tweetable({username:'username'}).html() );

Answer 2

In the plugin, try replacing this line:

$(act).prepend('<ul class="tweetList">');

...with this:

$(act).append('<ul class="tweetList">');

By the way, there are some things in the plugin that make me wonder about the quality of it.

Take the above code for example. Here act is already a jQuery object, so there's no need to wrap it again. You should be able to do act.append('<ul....

It then proceeds to re-select the above element that was just created using $('.tweetList') instead of caching a reference to it. This is done in a loop inside the callback to the getJSON request. Terribly inefficient.

---

EDIT: Here's a version that allows an extra option called position which will accept "append" or "prepend" to be set.

It also caches the list. Other improvements could be made, but this is a little better anyway.

$('#twitter').tweetable({username: 'username', position: 'append'});

plugin:

(function ($) {
    $.fn.tweetable = function (options) {
        var defaults = {
            limit: 5,
            username: 'philipbeel',
            time: false,
            replies: false,
            position: 'append'
        };
        var options = $.extend(defaults, options);
        return this.each(function (options) {
            var act = $(this);
            var $tweetList;
            var api = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=";
            var count = "&count=";
            $.getJSON(api + defaults.username + count + defaults.limit + "&callback=?", act, function (data) {
                $.each(data, function (i, item) {
                    if (i == 0) {
                        $tweetList = $('<ul class="tweetList">')[defaults.position.toLowerCase() + 'To'](act);
                    }
                    if (defaults.replies === false) {
                        if (item.in_reply_to_status_id === null) {
                            $tweetList.append('<li class="tweet_content_' + i + '"><span class="tweet_link_' + i + '">' + item.text.replace(/#(.*?)(\s|$)/g, '<span class="hash">#$1 </span>').replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '<a href="$&">$&</a> ').replace(/@(.*?)(\s|\(|\)|$)/g, '<a href="http://twitter.com/$1"&gt;@$1 </a>$2'));
                            if (defaults.time == true) {
                                $('.tweet_content_' + i).append('<small> ' + item.created_at.substr(0, 20) + '</small>');
                            }
                        }
                    } else {
                        $tweetList.append('<li class="tweet_content_' + i + '"><span class="tweet_link_' + i + '">' + item.text.replace(/#(.*?)(\s|$)/g, '<span class="hash">#$1 </span>').replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '<a href="$&">$&</a> ').replace(/@(.*?)(\s|\(|\)|$)/g, '<a href="http://twitter.com/$1"&gt;@$1 </a>$2'));
                        if (defaults.time == true) {
                            $('.tweet_content_' + i).append('<small> ' + item.created_at.substr(0, 20) + '</small>');
                        }
                    }
                });
            });
        });
    }
})(jQuery);