I'm currently developing a webpage where users can search for Twitter accounts in their local area. The process involves entering a name into the search box, which then displays users with that name within a 50-mile radius of a specific city (the city remains constant).
Initially, I encountered authentication issues and discovered oauth.io as a solution. After implementing it successfully, I faced a new challenge where my request to Twitter resulted in a 400 bad request error. Despite consulting the oauth.io documentation, I couldn't pinpoint the issue.
Below is the segment of code responsible for capturing user input from the form field:
// Click function
$('.user-getter').submit(function(event) {
// prevent form refresh
event.preventDefault();
// clear previous search results
$('.user-results').html('');
// Get the values entered in the search field
var query = $(this).find("input[name='user_search']").val();
// Call function to send API request to Twitter
getUser(query);
}); // end click function
Additionally, here is the snippet of code handling authorization and subsequent AJAX requests:
var getUser = function(query) {
OAuth.initialize('oMQua1CuWerqGKRwqVkzDx5uijo')
OAuth.popup('twitter').done(function(twitterData) {
$.ajax({
type: "GET",
url: "https://api.twitter.com/1.1/users/search.json?&geocode=42.94003620000001,-78.8677924,50mi&q=" + query,
dataType: "jsonp"
});
console.log( "Data Saved: " + twitterData ); // viewable in Network tab under inspector
}); // end oAuth popup
};
For now, I am focused on observing the results via console.log.