Sample of Deferred Object - Twitter

Sample of Deferred Object - Twitter

by toshimaru

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<form action="javascript:void(0)">
    <input type="text" name="query" value="jquery deferred" />
    <input type="submit" value="search" />
</form>
<ul id="tweets"></ul>

CSS

ul {
    margin-top: 10px;
    font-size: 10pt;
}
li {
    padding: 2px;
    border-bottom: 1px dotted #aaa;
}
li:first-child {
    border-top: 1px dotted #aaa;
}

JavaScript

if ((!window.firebug || !firebug.firebuglite) &&
    (!window.console || !console.firebuglite)) {
    window.console = {};
    window.console['log'] = function () {}
}

Twitter = {
    search: function(query, n) {
        var defer = $.Deferred();
        $.ajax({
            url: "http://search.twitter.com/search.json",
            data: {
                q: query,
                rpp: n
            },
            dataType: 'jsonp',
            success: defer.resolve,
            error: defer.reject
        });
        return defer.promise();
    },
    show: function(ele, prop, data) {
        console.log(data);
        ele.empty().hide();
        if (!data.error) {
            if (data.results.length) {
                $.each(data.results, function(i, tweet) {
                    Twitter.msg(ele, prop, tweet.text);
                });
            } else {
                Twitter.msg(ele, prop, 'no results');
            }
        } else {
            Twitter.msg(ele, prop, data.error);
        }
        ele.fadeIn();
    },
    msg: function(ele, prop, msg) {
        ele.append(prop.before + msg + prop.after);
    }
};

$('form').submit(function() {
    var query = $('input[name=query]').val();
    Twitter.search(query, 5).then(function(data) {
        Twitter.show($('#tweets'), {
            before: '<li>',
            after: '</li>'
        }, data);
    });
    return true;
});