How to get Twitter status with JQuery

Question

I found about JQuery jsonp issues in jQuery ajax (jsonp) ignores a timeout and doesn’t fire the error event.

I have tried to get my last twitter updates with:

var jsonTwitterFeed = "http://twitter.com/statuses/user_timeline/softamo.json?count=3";

$.jsonp({
        url: jsonTwitterFeed,
        data: {},
        dataType: "jsonp",
        callbackParameter: "jsoncallback",
        timeout: 5000,
        success: function(data){
            $.each(data, function(){
                $("#sNews ul.tweets").append("<li>" + replaceURLWithHTMLLinks(data.text) + "</li>");                
            });            

        },
        error: function(XHR, textStatus, errorThrown){
            alert("ERREUR: " + textStatus);
            alert("ERREUR: " + errorThrown);
        }
    });

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>");
}

The error alert calls execute with:

ERREUR: error
ERREUR: undefined

However, I can see the JSON Object in Firebug.

Any idea what's happening?

@Sergio: see updated answer with working page... (at least for me) — beggs, Oct 27 '09 at 15:36
Appending "&callback=?" was enough for me to get it working; didn't need data, dataType or callbackParameter. — WhyNotHugo, Aug 03 '10 at 15:28

beggs · Answer 1 · 2009-10-27T14:01:52.473

Try changing

 $.each(data, function(){
    $("#sNews ul.tweets").append("<li>" + replaceURLWithHTMLLinks(data.text) + "</li>");

to

$.each(data, function(post, val){
   $("#sNews ul.tweets").append("<li>" + replaceURLWithHTMLLinks(val.text) + "</li>");

Edit:

I did change one other thing but forgot to add it to the answer.

callbackParameter: "jsoncallback",

should be

callbackParameter: "callback",

Just for completeness here is a test page I did that works:

<html>
<head>
   <title>test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="jquery.jsonp-1.1.0.min.js"></script>
   <script type="text/javascript">
      $(document).ready( function() {
         var jsonTwitterFeed = "http://twitter.com/statuses/user_timeline/dougw.json?count=3";

         $.jsonp({
            url: jsonTwitterFeed,
            data: {},
            dataType: "jsonp",
            callbackParameter: "callback",
            timeout: 5000,
            success: function(data){
               $.each(data, function(key, val){
                  $("#sNews ul.tweets").append("<li>" + replaceURLWithHTMLLinks(val.text) + "</li>");                
             });            
         },
         error: function(XHR, textStatus, errorThrown){
             alert("ERREUR: " + textStatus);
             alert("ERREUR: " + errorThrown);
         }
     });
         function replaceURLWithHTMLLinks(text) {
            var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
            return text.replace(exp,"<a href='$1'>$1</a>");
         }
      });
   </script>
</head>
<body>
   <div id="sNews">
      <ul class="tweets">
      </ul>
   </div>
</body>

Does not change anything. I think the success code does not execute at all. — Sergio del Amo, Oct 27 '09 at 09:33
@Sergio, sorry I forgot one of the changes I made to make it work... see edit in answer. \Cheers — beggs, Oct 27 '09 at 14:02

Corey Ballou · Accepted Answer · 2009-10-27T10:56:52.457

I don't know if this is entirely relevant but you might have been missing the callback for JSONP in your feed URL unless it's set by default:

var jsonTwitterFeed = "http://twitter.com/statuses/user_timeline/softamo.json?count=3&callback=?";

Also, your jquery AJAX call can simply use the default AJAX and not JSONP. Try this and let us know:

$.ajax({
        url: jsonTwitterFeed,
        data: {},
        dataType: "jsonp",
        callbackParameter: "jsoncallback",
        timeout: 5000,
        success: function(data){
            var str = '';
            for(var i = 0; i < data.length; i++) { 
                str += '<li>' + replaceURLWithHTMLLinks(data[i].text) + '</li>';
            }
            $("#sNews ul.tweets").append(str);
        },
        error: function(XHR, textStatus, errorThrown){
            alert("ERREUR: " + textStatus);
            alert("ERREUR: " + errorThrown);
        }
    });

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>");
}

&callback=? is not necessar. Replace the code insde success with the next code and I will accept your answer. for(var i = 0; i < data.length; i++) { $("#sNews ul.tweets").append("
@sergio, code updated and I also made a speed improvement to your loop. It avoids multiple DOM lookups until it's absolutely necessary to append the string after all tweets were found and the HTML has been generated. — Corey Ballou, Oct 27 '09 at 10:57

score 0 · Answer 3 · answered Oct 27 '09 at 09:45

0

I tried with the following code, and got the success function to fire correctly.

$.getJSON(jsonTwitterFeed, {
    success: function(data){
        $.each(data, function(){
            $("#sNews ul.tweets").append("<li>" + replaceURLWithHTMLLinks(data.text) + "</li>");                
        });            

    },
    error: function(XHR, textStatus, errorThrown){
        alert("ERREUR: " + textStatus);
        alert("ERREUR: " + errorThrown);
    }
});

answered Oct 27 '09 at 09:45

Joel L

3,031
1
20
33

I get the next error with your suggestion: object is undefined script.appendChild(document.createTextNo...(object[name],args)===false)break;}else\n – Sergio del Amo Oct 27 '09 at 09:50

How to get Twitter status with JQuery

3 Answers3