Como obter status do Twitter com jQuery
Pergunta
Eu encontrei sobre questões jQuery jsonp em JQuery Ajax (JSONP) ignora um tempo limite e não dispara o evento de erro.
Eu tentei obter minhas últimas atualizações do Twitter com:
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>");
}
O alerta de erro chamadas é executado com:
Erreur: Erro
Erreur: indefinido
No entanto, posso ver o objeto JSON em Firebug.
Alguma ideia do que está acontecendo?
Solução
Não sei se isso é totalmente relevante, mas você pode estar perdendo o retorno de chamada do JSONP no seu URL de alimentação, a menos que seja definido por padrão:
var jsonTwitterFeed = "http://twitter.com/statuses/user_timeline/softamo.json?count=3&callback=?";
Além disso, sua chamada jQuery Ajax pode simplesmente usar o Ajax padrão e não o JSONP. Experimente isso e informe -nos:
$.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>");
}
Outras dicas
Tente mudar
$.each(data, function(){
$("#sNews ul.tweets").append("<li>" + replaceURLWithHTMLLinks(data.text) + "</li>");
para
$.each(data, function(post, val){
$("#sNews ul.tweets").append("<li>" + replaceURLWithHTMLLinks(val.text) + "</li>");
Editar:
Eu mudei outra coisa, mas esqueci de adicioná -la à resposta.
callbackParameter: "jsoncallback",
deveria estar
callbackParameter: "callback",
Apenas por completude aqui está uma página de teste que fiz que funciona:
<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>
Tentei com o código a seguir e obtive a função de sucesso para disparar corretamente.
$.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);
}
});