views:

57

answers:

2

Hi, I am using the liveTwitter plugin

The problem is that I need to stop the plugin from hitting the Twitter api.

According to the documentation I need to do this

$("#tab1 .container_twitter_status").each(function(){ this.twitter.stop(); });

Already, the each does not make sense on an id (the author uses $(´#twittersearch´) )

and what does this refer to?

Anyway, I get an undefined error.

I will paste the plugin code and hope it makes sense to somebody.

The statements that I used where these

$("#tab1 .container_twitter_status").empty();
$("#tab1 .container_twitter_status").liveTwitter('bacon', {limit: 5, rate: 30000});

and when want to stop

$("#tab1 .container_twitter_status").each(function(){console.log(this.twitter);});
$("#tab1 .container_twitter_status").each(function(){ this.twitter.stop(); });

thanks in advance, Richard

/*
 * jQuery LiveTwitter 1.5.0
 * - Live updating Twitter plugin for jQuery
 *
 * Copyright (c) 2009-2010 Inge Jørgensen (elektronaut.no)
 * Licensed under the MIT license (MIT-LICENSE.txt)
 *
 * $Date: 2010/05/30$
 */

/*
 * Usage example:
 * $("#twitterSearch").liveTwitter('bacon', {limit: 10, rate: 15000});
 */

(function($){
    if(!$.fn.reverse){
        $.fn.reverse = function() {
            return this.pushStack(this.get().reverse(), arguments);
        };
    }
    $.fn.liveTwitter = function(query, options, callback){
        var domNode = this;
        $(this).each(function(){
            var settings = {};

            // Handle changing of options
            if(this.twitter) {
                settings = jQuery.extend(this.twitter.settings, options);
                this.twitter.settings = settings;
                if(query) {
                    this.twitter.query = query;
                }
                this.twitter.limit = settings.limit;
                this.twitter.mode  = settings.mode;
                if(this.twitter.interval){
                    this.twitter.refresh();
                }
                if(callback){
                    this.twitter.callback = callback;
                }

            // ..or create a new twitter object
            } else {
                // Extend settings with the defaults
                settings = jQuery.extend({
                    mode:      'search', // Mode, valid options are: 'search', 'user_timeline'
                    rate:      15000,    // Refresh rate in ms
                    limit:     10,       // Limit number of results
                    refresh:   true
                }, options);

                // Default setting for showAuthor if not provided
                if(typeof settings.showAuthor == "undefined"){
                    settings.showAuthor = (settings.mode == 'user_timeline') ? false : true;
                }

                // Set up a dummy function for the Twitter API callback
                if(!window.twitter_callback){
                    window.twitter_callback = function(){return true;};
                }

                this.twitter = {
                    settings:      settings,
                    query:         query,
                    limit:         settings.limit,
                    mode:          settings.mode,
                    interval:      false,
                    container:     this,
                    lastTimeStamp: 0,
                    callback:      callback,

                    // Convert the time stamp to a more human readable format
                    relativeTime: function(timeString){
                        var parsedDate = Date.parse(timeString);
                        var delta = (Date.parse(Date()) - parsedDate) / 1000;
                        var r = '';
                        if (delta < 60) {
                            r = delta + ' seconds ago';
                        } else if(delta < 120) {
                            r = 'a minute ago';
                        } else if(delta < (45*60)) {
                            r = (parseInt(delta / 60, 10)).toString() + ' minutes ago';
                        } else if(delta < (90*60)) {
                            r = 'an hour ago';
                        } else if(delta < (24*60*60)) {
                            r = '' + (parseInt(delta / 3600, 10)).toString() + ' hours ago';
                        } else if(delta < (48*60*60)) {
                            r = 'a day ago';
                        } else {
                            r = (parseInt(delta / 86400, 10)).toString() + ' days ago';
                        }
                        return r;
                    },

                    // Update the timestamps in realtime
                    refreshTime: function() {
                        var twitter = this;
                        $(twitter.container).find('span.time').each(function(){
                            $(this).html(twitter.relativeTime(this.timeStamp));
                        });
                    },

                    // Handle reloading
                    refresh: function(initialize){
                        var twitter = this;
                        if(this.settings.refresh || initialize) {
                            var url = '';
                            var params = {};
                            if(twitter.mode == 'search'){
                                params.q = this.query;

                                if(this.settings.geocode){
                                    params.geocode = this.settings.geocode;
                                }
                                if(this.settings.lang){
                                    params.lang = this.settings.lang;
                                }
                                if(this.settings.rpp){
                                    params.rpp = this.settings.rpp;
                                } else {
                                    params.rpp = this.settings.limit;
                                }

                                // Convert params to string
                                var paramsString = [];
                                for(var param in params){
                                    if(params.hasOwnProperty(param)){
                                        paramsString[paramsString.length] = param + '=' + encodeURIComponent(params[param]);
                                    }
                                }
                                paramsString = paramsString.join("&");
                                url = "http://search.twitter.com/search.json?"+paramsString+"&amp;callback=?";
                            } else if(twitter.mode == 'user_timeline') {
                                url = "http://api.twitter.com/1/statuses/user_timeline/"+encodeURIComponent(this.query)+".json?count="+twitter.limit+"&amp;callback=?";
                            } else if(twitter.mode == 'list') {
                                var username = encodeURIComponent(this.query.user);
                                var listname = encodeURIComponent(this.query.list);
                                url = "http://api.twitter.com/1/"+username+"/lists/"+listname+"/statuses.json?per_page="+twitter.limit+"&amp;callback=?";
                            }
                            $.getJSON(url, function(json) {
                                var results = null;
                                if(twitter.mode == 'search'){
                                    results = json.results;
                                } else {
                                    results = json;
                                }
                                var newTweets = 0;
                                $(results).reverse().each(function(){
                                    var screen_name = '';
                                    var profile_image_url = '';
                                    if(twitter.mode == 'search') {
                                        screen_name = this.from_user;
                                        profile_image_url = this.profile_image_url;
                                        created_at_date = this.created_at;
                                    } else {
                                        screen_name = this.user.screen_name;
                                        profile_image_url = this.user.profile_image_url;
                                        // Fix for IE
                                        created_at_date = this.created_at.replace(/^(\w+)\s(\w+)\s(\d+)(.*)(\s\d+)$/, "$1, $3 $2$5$4");
                                    }
                                    var userInfo = this.user;
                                    var linkified_text = this.text.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) { return m.link(m); });
                                    linkified_text = linkified_text.replace(/@[A-Za-z0-9_]+/g, function(u){return u.link('http://twitter.com/'+u.replace(/^@/,''));});
                                    linkified_text = linkified_text.replace(/#[A-Za-z0-9_\-]+/g, function(u){return u.link('http://search.twitter.com/search?q='+u.replace(/^#/,'%23'));});

                                    if(!twitter.settings.filter || twitter.settings.filter(this)) {
                                        if(Date.parse(created_at_date) > twitter.lastTimeStamp) {
                                            newTweets += 1;
                                            var tweetHTML = '<div class="tweet tweet-'+this.id+'">';
                                            if(twitter.settings.showAuthor) {
                                                tweetHTML += 
                                                    '<img width="24" height="24" src="'+profile_image_url+'" />' +
                                                    '<p class="text"><span class="username"><a href="http://twitter.com/'+screen_name+'"&gt;'+screen_name+'&lt;/a&gt;:&lt;/span&gt; ';
                                            } else {
                                                tweetHTML += 
                                                    '<p class="text"> ';
                                            }
                                            tweetHTML += 
                                                linkified_text +
                                                ' <span class="time">'+twitter.relativeTime(created_at_date)+'</span>' +
                                                '</p>' +
                                                '</div>';
                                            $(twitter.container).prepend(tweetHTML);
                                            var timeStamp = created_at_date;
                                            $(twitter.container).find('span.time:first').each(function(){
                                                this.timeStamp = timeStamp;
                                            });
                                            if(!initialize) {
                                                $(twitter.container).find('.tweet-'+this.id).hide().fadeIn();
                                            }
                                            twitter.lastTimeStamp = Date.parse(created_at_date);
                                        }
                                    }
                                });
                                if(newTweets > 0) {
                                    // Limit number of entries
                                    $(twitter.container).find('div.tweet:gt('+(twitter.limit-1)+')').remove();
                                    // Run callback
                                    if(twitter.callback){
                                        twitter.callback(domNode, newTweets);
                                    }
                                    // Trigger event
                                    $(domNode).trigger('tweets');
                                }
                            });
                        }   
                    },
                    start: function(){
                        var twitter = this;
                        if(!this.interval){
                            this.interval = setInterval(function(){twitter.refresh();}, twitter.settings.rate);
                            this.refresh(true);
                        }
                    },
                    stop: function(){
                        if(this.interval){
                            clearInterval(this.interval);
                            this.interval = false;
                        }
                    }
                };
                var twitter = this.twitter;
                this.timeInterval = setInterval(function(){twitter.refreshTime();}, 5000);
                this.twitter.start();
            }
        });
        return this;
    };
})(jQuery);
+2  A: 

I think you want to use $(this) and not just this

Take a look here

$("#tab1 .container_twitter_status").each(function(){ $(this).twitter.stop(); });

Edited: Check your selector

Should your selector be

  $("#tab1 .container_twitter_status")  //returns all decendents of #tab1 with class .container_twitter_status

or should it be

  $("#tab1.container_twitter_status") //returns a single element with id #tab1 and class .container_twitter_status.
John Hartsock
thanks, that was quick and no, that diddn´t work for me either.
Richard
ok the this is not the problem but perhaps your selector is. have you looked at what your $("("#tab1 .container_twitter_status") selector is returning? I only ask because you state "the each does not make sense on an id" but your selector actually gets all elements with the class .container_twitter_status under the id tab1.
John Hartsock
yes, the first one is correct, I have just one container under tab1basicly, it´s the same as the authors $(´#twittersearch´) selector
Richard
I also don´t understand how it is possible to call twitter.stop() considering it is inside the scope of fn.liveTwitter the way I see it?
Richard
+2  A: 

$('#myDiv').each(function(){}); does the callback function with every matched DOM node as this.

The functionality in the liveTwitter plugin is wrapped up in an object and assigned to the DOM node on .twitter, so this in this context is the DOM node itself.

These would be equivalent:

$('#myDiv').get(0).twitter.stop(); document.getElementById('myDiv').twitter.stop();

I just tested the example code, and it should work as intended.

Are you using the same selector when you call the stop function? You could try doing:

$("#tab1 .container_twitter_status").each(function(){console.log(this.twitter);});

and see if Firebug/Webkit returns Object or null.

Also, if you don't want it to refresh automatically, just pass refresh: false:

$("#twitterSearch").liveTwitter('bacon', {limit: 10, refresh: false});

You can do this on the fly to disable refreshing temporarily:

$("#stuff").liveTwitter('banana', {refresh: false}); $("#stuff").liveTwitter('banana', {refresh: true});

elektronaut
Thanks, I will try that inmediatly. The automatic refreshing is ok, but it needs to stop if I switch tabs, thats the reason behind it.
Richard
Ah, right. You can also disable refreshing temporarily by calling .liveTwitter again and setting refresh to false. Edit: put example in the original answer.
elektronaut
ok, but the other should work also right.Anyway, I exceeded the Twitter rate limit, so I will have to get back to you in a couple or more minutes.
Richard
Yep. What happens when you switch tabs? If you remove the div from the DOM, jQuery obviously won't work.
elektronaut
But just to be precise, one should never have more then one id on the same page, thats why I was saying that each does not make sense.The it should be a class.
Richard
The way it works now is the tabcontent gets loaded with the public timeline from php. The search is done by the plugin and the first action is to empty the container.The searchdata go´s in. If I switch to another tab, the tabcontent get´s hided and a new `div` will be visible. At this point I want to stop hitting the twitter api.
Richard
There should never be more than one id on a page, but the selector could be anything, #twitterSearch is just an example. There's nothing stopping you from having multiple twitter feeds on a page.
elektronaut
Right.. I suspect you're removing the twitter div from the DOM. Are you stopping refreshing before you clear the container?
elektronaut
No, I am just hiding it,I only empty it one time and that is before I start to use the search, not when I switch to another tab.Anyway, I had to reinstall firebug to get console log to work.It seems I have a twitter object. with the callback set to undefined.I can see window->object->container->twitter
Richard
Oh my god, I only needed to do this if( this.twitter) this.twitter.stop(); because I was calling it before it was created Thanks for thinking with me. It became apparent when I saw the object in firebug.
Richard