I am building a website of finding and showing the hottest topics curretly on Twitter for my final project. Does anyone know how to extract the topics from the huge amount of tweets in the last week, or in a single day? I'm also wondering how to show the topics like a tag cloud on http://tweet3d.com/ and show the trend of each topic like http://trendistic.indextank.com/.
I really need your help since this final project dues at the end of this month. My partner asks me to use Flash Builder, I'm also learning to use that. Thanks guys.
Additional Info(11/20/2011): after I do a search on Google, I come to this paper: comparing Twitter and traditional media using Topic Model,you may access it with this link: paper, but I cannot understand the model since I lack the related background.
I am not so familiar with the Twitter API, but maybe this could help:
https://dev.twitter.com/docs/api/1/get/trends/current
I put together a nice JS fiddle that should answer all your questions when it comes to dealing with the Twitter API. The webapp grabs the trending locales, and allows you to drill down to the trending topics, and then see the Tweets within.
I also included a standard Twitter search submission box, so in a weird way, this is a barebones Tweetdeck client for you to examine. Also, to push the adaption of the new Jquery libraries, I have used 1.91 which utilities the new live.bind click event syntax.
Enjoy
http://jsfiddle.net/jdrefahl/5M3Gn/
function searchTwitter(query) {
$.ajax({
url: 'http://search.twitter.com/search.json?' + jQuery.param(query),
dataType: 'jsonp',
success: function (data) {
var tweets = $('#tweets');
tweets.html('');
for (res in data['results']) {
tweets.append('<div>' + data['results'][res]['from_user'] + ' wrote: <p>' + data['results'][res]['text'] + '</p></div><br />');
}
}
});
}
$(document).ready(function () {
function getTrendsByID(id) {
$.ajax({
url: 'http://api.twitter.com/1/trends/' + id + '.json',
dataType: 'jsonp',
success: function (data) {
$.each(data[0].trends, function (i) {
});
}
});
};
function getLocales() {
$.ajax({
url: 'https://api.twitter.com/1/trends/available.json',
dataType: 'jsonp',
success: function (data) {
var locales = $('ul#locales');
locales.html('');
$.each(data, function (i) {
localeID[i] = data[i].woeid;
$('ul#locales').append('<li>' + data[i].name + '</li>');
});
}
});
};
function getTrends(id) {
$.ajax({
url: 'https://api.twitter.com/1/trends/' + id + '.json',
dataType: 'jsonp',
success: function (data) {
var trends = $('ul#currentTrends');
trends.html('');
$.each(data[0].trends, function (i) {
$('ul#currentTrends').append('<li>' + data[0].trends[i].name + '</li>');
});
}
});
};
// Event Handlers
$(document).on("click", "#locales li", function () {
var $this = $(this);
var localesHdr = $('#currentTrendsCont h3');
var tweets = $('#tweets');
var trendsHdr = $('#tweetsCont h3');
trendsHdr.html('');
tweets.html('');
localesHdr.html('');
$('#currentTrendsCont h3').html($this.text());
getTrends(localeID[$this.index()]);
});
$(document).on("click", "#currentTrends li", function () {
var $this = $(this);
var trendsHdr = $('#tweetsCont h3');
trendsHdr.html('');
$('#tweetsCont h3').html($this.text());
var params = {
q: $this.text(),
rpp: 10
};
searchTwitter(params);
});
$('#submit').click(function () {
var trendsHdr = $('#tweetsCont h3');
var trends = $('#currentTrends');
var local = $('#currentTrendsCont h3');
local.html('');
trendsHdr.html('');
trends.html('');
$('#tweetsCont h3').html('search query: '+$('#query').val());
var params = {
q: $('#query').val(),
rpp: 10
};
searchTwitter(params);
});
// Globals
var localeID = new Array();
// Init!
getLocales();
});
Related
I am using the very simple to implement Trix Editor provided from Basecamp in an "Edit View".
How would one save automatically changes, without having the user to interact through the update button?
I am thinking about something like this:
(OLD SCRIPT)
window.setInterval(function() {
localStorage["editorState"] = JSON.stringify(element.editor)
}, 5000);
What I actually want to do:
post a ajax "post" request to the rails server. something like:
$('trix-editor').on('blur', function() {
var sendname = $('#note_name').val();
var sendlink = $('#linkinput').val();
var sendnote = $('input[name="note[note]"]').val();
$.ajax({
type: "POST",
url: "/notes",
data: { note: { name: sendname, link: sendlink, note: sendnote } },
success: function(data) {
alert(data.id);
return false;
},
error: function(data) {
return false;
}
});
(There is as well the problem with authentification and devise. Only if you are loged in you should be able to send an ajax post request ..??)
Even better would be to save changes only when the user changes some data, and then wait 5s and then push the updated data via json to the server. I have no clue how to do that...
PS: would have loved to tag this question with a "trix-editor" tag, sorry have not enought rep for doing so...
If you are using plain JavaScript, use a hidden input field:
<form>
<input type="hidden" id="noticeEditorContent"/>
<trix-editor input="noticeEditorContent" id="x" style="min-height: 200px;"></trix-editor>
</form>
Now you have access to the element with the ID x.
Which means, with getElementById, you can do something like that:
var richTex = document.getElementById("x");
With this variable, you can either set an interval as you already explained, or you are using jQuery to do the job:
$('#x').on('input', function() {
localStorage["editorState"] = JSON.stringify($('#x').val());
});
Just a suggestion. You can write this code a bit nicer and cleaner.
Now it depends. Is setting an interval every 5 seconds better or writing every change to the LocalStorage?
Suggestion:
Save the input when the user deselects the field:
$('#x').on('blur', function() {
localStorage["editorState"] = JSON.stringify($('#x').val());
});
Update: Here is a working JSFiddle.
so I came up with this code which saves via ajax on 'trix-blur' (which fires when the user disselects the trix-editor). There is only the question left if this code is secure enought with devise, or if now anyone can send data to be saved?!?
I have the authentification in the notes controller like that:
before_action :authenticate_user!
and here is the javascript part (with a custom messages functionality):
$('trix-editor').on('trix-blur', function() {
var sendname = $('#note_name').val();
var sendlink = $('#linkinput').val();
var sendnote = $('input[name="note[note]"]').val();
var sendid = $('#note_id').val();
$.ajax({
type: "PUT",
url: "/notes/" + sendid,
dataType: "json",
data: { note: { name: sendname, link: sendlink, note: sendnote }, id: sendid, commit: "Update Note" },
success: function(data) {
addMessage('auto saved ...', 'msg-success');
return false;
},
error: function(data) {
alert('error');
return false;
}
});
var addMessage = function(msg, msgclass) {
$('#notifications').append('<div id="msg" class="msg '+msgclass+'">'+msg+'</div>');
setTimeout(function() {
$('#msg:last-child').addClass('msgvisible');
}, 100);
displayMessage();
};
var displayMessage = function() {
setTimeout(function() {
hideMessage();
}, 2000);
};
var hideMessage = function() {
$('#msg').addClass('msghide');
setTimeout( function() {
deleteMessage();
}, 300);
};
var deleteMessage = function() {
$('#msg').remove();
if ($('#notificatosn').find('#msg') > 1) {
displayMessage();
}
};
});
Per the Trix project page the trix-editor emits different events on specific conditions.
The trix-change event is what you need; it fires whenever the editor’s contents has changed.
So, the first line of your JavaScript code could be
$('trix-editor').on('trix-change', function() {
/* Here will be your code to save the editor's contents. */
})
I am using select2 select box to populate and show some server data. Most of it works fine as I am able to get the results and populate the combo box. But when I type in the search box, the selection doesn't narrow down the the closest match.
I found the problem was because the backend URL doesn't support searching based on the string provided, while select2 keeps making multiple search request to backend, based on user entered text. The legacy backend code returns results in one shot, which is populated into the combobox the first time.
My question is, how do I get the the select box to focus to the closest matching result, without making multiple Ajax calls. I want the search to happen in the results which are already fetched.
Thanx to anyone helping me out on this.
My ajax call is like below, if this helps...
select2: {
placeholder: 'Select Next Plan Id',
allowClear: true,
id: function (item) {
return item.id;
},
ajax: {
type: 'GET',
dataType: "jsonp",
url: "http://172.16.7.248:8480/app/gui?action=1&type=11",
data: function (term, page) {
return { search: term };
},
results: function (data, page) {
return { results: data.aaData };
},
success : function(data, status, xhr) {
var html = "<option value=''>None</option>";
$.each(data.aaData, function(i, item) {
html += "<option data=" + JSON.stringify(item.id) + " value=" + item.id + "'>" + item.id + "</option>";
});
$('#nextplanid').html(html);
self.prop('data-loaded', 'true');
},
error : function(data, status, xhr) {
}
},
formatResult: function (item) {
return item.id;
},
formatSelection: function (item) {
return item.id;
},
initSelection: function (element, callback) {
return $.get('/getText', { query: element.val() }, function (data) {
callback(data);
});
}
},
In my jquery autocomplete select function, I need to use the event.preventDefault() method to prevent the default ui.item.value from populating the input text box the autocomplete is wired too. This works great in Chrome, however in IE 8 (which is in use by a majority of our users) the .preventDefault() line throws the following error:
Unexpected call to method or property access
Here is the jQuery for good measure. Does anyone know of a work-around for this method in IE 8?
var tempResults = [];
$(function () {
$('#DRMCompanyName').autocomplete({
source: function (request, response) {
$.ajax({
url: '#Url.Action("compSearchByName", "AgentTransmission")',
type: 'GET',
dataType: 'json',
data: request,
success: function (data) {
tempResults = data;
response($.map(data, function (value, key) {
return {
label: value + " " + key,
value: key
};
}));
},
});
},
minLength: 2,
select: function (event, ui) {
event.preventDefault(); // <-Causing a problem in IE 8...
$('#DRMCompanyName').val(tempResults[ui.item.value]);
$('#DRMCompanyName').text(tempResults[ui.item.value]);
if ($('#DRMCompanyId').text() == '') {
$('#DRMCompanyId').val(ui.item.value);
$('#DRMCompanyId').text(ui.item.value);
}
}
});
});
You could use return false instead but as i said in comment: return false = event.preventDefault() + event.stopPropagation() But in your case, should fit your needs.
I'm trying to get the twitter trends for a specific location say "Bristol" from UK for my application.
Problem is that right now we can get the Trends for only countries and some cities in US as mentioned in twitter API. But i'm just wondering how the site like
http://trendsmap.com/local/gb/bristol
is getting the trends in most of the countries and cities even though they were not listed in twitter trends api.
Please help in figuring out this
Regards,
Sukumar
I put together a nice JS fiddle that should answer all your questions when it comes to dealing with the Twitter API. The webapp grabs the trending locales, and allows you to drill down to the trending topics, and then see the Tweets within.
I also included a standard Twitter search submission box, so in a weird way, this is a barebones Tweetdeck client for you to examine. Also, to push the adaption of the new Jquery libraries, I have used 1.91 which utilities the new live.bind click event syntax.
Enjoy
http://jsfiddle.net/jdrefahl/5M3Gn/
function searchTwitter(query) {
$.ajax({
url: 'http://search.twitter.com/search.json?' + jQuery.param(query),
dataType: 'jsonp',
success: function (data) {
var tweets = $('#tweets');
tweets.html('');
for (res in data['results']) {
tweets.append('<div>' + data['results'][res]['from_user'] + ' wrote: <p>' + data['results'][res]['text'] + '</p></div><br />');
}
}
});
}
$(document).ready(function () {
function getTrendsByID(id) {
$.ajax({
url: 'http://api.twitter.com/1/trends/' + id + '.json',
dataType: 'jsonp',
success: function (data) {
$.each(data[0].trends, function (i) {
});
}
});
};
function getLocales() {
$.ajax({
url: 'https://api.twitter.com/1/trends/available.json',
dataType: 'jsonp',
success: function (data) {
var locales = $('ul#locales');
locales.html('');
$.each(data, function (i) {
localeID[i] = data[i].woeid;
$('ul#locales').append('<li>' + data[i].name + '</li>');
});
}
});
};
function getTrends(id) {
$.ajax({
url: 'https://api.twitter.com/1/trends/' + id + '.json',
dataType: 'jsonp',
success: function (data) {
var trends = $('ul#currentTrends');
trends.html('');
$.each(data[0].trends, function (i) {
$('ul#currentTrends').append('<li>' + data[0].trends[i].name + '</li>');
});
}
});
};
// Event Handlers
$(document).on("click", "#locales li", function () {
var $this = $(this);
var localesHdr = $('#currentTrendsCont h3');
var tweets = $('#tweets');
var trendsHdr = $('#tweetsCont h3');
trendsHdr.html('');
tweets.html('');
localesHdr.html('');
$('#currentTrendsCont h3').html($this.text());
getTrends(localeID[$this.index()]);
});
$(document).on("click", "#currentTrends li", function () {
var $this = $(this);
var trendsHdr = $('#tweetsCont h3');
trendsHdr.html('');
$('#tweetsCont h3').html($this.text());
var params = {
q: $this.text(),
rpp: 10
};
searchTwitter(params);
});
$('#submit').click(function () {
var trendsHdr = $('#tweetsCont h3');
var trends = $('#currentTrends');
var local = $('#currentTrendsCont h3');
local.html('');
trendsHdr.html('');
trends.html('');
$('#tweetsCont h3').html('search query: '+$('#query').val());
var params = {
q: $('#query').val(),
rpp: 10
};
searchTwitter(params);
});
// Globals
var localeID = new Array();
// Init!
getLocales();
});
Take a look at the documentation here
<script type="text/javascript">
$(function () {
$("select#oblast").change(function () {
var oblast_id = $("#oblast > option:selected").attr("value");
$("#Rayondiv").hide();
$.ajax({
type: "GET",
contentType: "application/json",
url: "http://site.com/Regions.aspx/FindGorodByOblastID/",
data: 'oblast_id=' + oblast_id,
dataType: "json",
success: function (data) {
if (data.length > 0) {
var options = '';
for (p in data) {
var gorod = data[p];
options += "<option value='" + gorod.Id + "'>" + gorod.Name + "</option>";
}
$("#gorod").removeAttr('disabled').html(options);
} else {
$("#gorod").attr('disabled', false).html('');
}
}
});
});
});
</script>
If you're trying to call a URL on a third-party site you will need to look in to JSONP (JSON with Padding) options. These are designed to make it slightly easier to work with third-party services.
See jQuery.ajax and the discussion of the "jsonp" in there for some additional details.
Where is this code running? Unless you're on http://site.com/, that won't work for security reasons.
If that's the case, is there any way you make the request and do whatever server side?
Maybe make the request to some page you set up on your site, and in its code behind do the work:
HttpWebRequest request = (HttpWebRequest)WebRequest.Create("http://example.com");
request.Method = "GET";
request.Headers["Accept-Encoding"] = "gzip,deflate";
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
String html = new StreamReader(response.GetResponseStream()).ReadToEnd();
response.Close();