I've been working on a project to fetch the most recent 50 tweets with a specific hash tag. The project is built for mobile devices using PhoneGap (0.9.6) and jQuery (1.6.1). Below is my code:
function retrieveTweets(hash, numOfResults) {
var uri = "http://search.twitter.com/search.json?q=" + escape(hash) + "&callback=?&rpp=" + numOfResults;
console.log("uri: " + uri);
$.getJSON(uri, function(data) {
var items = [];
if(data.results.length > 0) {
console.log("found " + data.results.length + " results");
$.each(data.results, function(key, val) {
var item = "<li>";
item += "<img width='48px' height='48px' src='" + val.profile_image_url + "' />";
item += "<div class='tweet'><span class='author'>" + val.from_user + "</span>";
item += "<span class='tweettext'>" + val.text + "</span>";
item += "</div>";
item += "</li>";
items.push(item);
});
}
else {
console.log("no results found for " + hash);
items.push("<li>No Tweets about " + hash + " yet</li>");
}
$("#tweetresults").html($('<ul />', {html: items.join('')}));
});
}
This code functions perfectly in a browser environment. Previously, it also worked in both the iPhone and Android simulators. However, it no longer works in either simulator, and I am not receiving any console logs. Surprisingly, it still works fine in a browser.
I am unsure what went wrong. If it is indeed impossible to use getJson() on a mobile device using PhoneGap, I would appreciate alternatives that don't involve native code as that defeats the purpose of the project.
Bonus question: How can I debug this issue on a mobile simulator? Usually, when working in a browser, I rely on dev tools or Firebug for debugging purposes. Unfortunately, in the simulators, the log messages aren't even displayed.
Thank you for your time,
Guy
Update:
As @Greg pointed out, the function wasn't being called at all. Here's what I discovered and how I resolved it:
In my HTML file, there is an <a> element with the following content
<a href="#" id="getTweets">Get tweets</a>Then, within the
$(document).ready() function, I have the following code:
$("#getTweets").click(function() {
var hash = "#bla";
retrieveTweets(hash, 50);
});
Unfortunately, the click event did not trigger the function. However, after making the following changes:
function gt() {
var hash = "#bla";
retrieveTweets(hash, 50);
}
And modifying my HTML like so:
<a href="javascript:gt()" id="getTweets">Get Tweets</a>
The code now works as expected and successfully calls Twitter. I have no idea what caused the issue with the original click() binding, but I have encountered similar problems in the past while working with PhoneGap. Any insights or suggestions are greatly appreciated.