-
Notifications
You must be signed in to change notification settings - Fork 10
Technologyjquery
jQuery is one of the standard JavaScript Ajax Libraries. It ships with Ruby on Rails and will be used by us for various things including AJAX and cleaning up usability and user interfaces. There is a powerfull API Documentation of jQuery available: http://api.jquery.com/
http://www.jqueryrain.com/2012/03/35-best-ajax-jquery-autocomplete-tutorial-plugin-with-examples/
I'll try to show some of the functionality of AJAX by the means of our autocompletion. First of all I show the code as a whole, then I'll pick out the AJAX part and describe / explain it in greater detail.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- <link rel="stylesheet" href="/resources/demos/style.css" />-->
<script>
$(function() {
$( "#tags" ).autocomplete({
//http://jqueryui.com/autocomplete/#remote-jsonp
source: function( request, response ) {
$.ajax({
url: "/autocompleteServer-0.0.1-SNAPSHOT/suggest",
dataType: "json",
data: {
numItems: 7,
indexName: "generalindex",
term: request.term
},
success: function( data ){
$.each(data, function(key, val) {
if (key === "suggestionList"){
response( val );
}
if (key ===
});
}
});
},
//http://codeblogging.net/blogs/1/15/
minLength: 1})
.data("ui-autocomplete")._renderItem =
function(ul, item) {
var inner_html = '<a><div class = "list_item_container"><div><img src="'+item.image+'"></div>' + item.suggestion + item.key + '</div></a>';
return $("<li></li>").data("item.autocomplete", item).append(inner_html).appendTo(ul);
}
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Suche: </label>
<input id="tags" />
</div>
</body>
</html>
So our Ajax-request is in our autocompletion, it is the part where we define the origin for our search results. When you override the "source" part of our autocompletion, and want to use an external source, e.g. a server as ours, you can use a function for that, with 2 parameters, (request, response) Here comes our AJAX into play, our asynchronous request, while the user is typing a search term.
- the auto complete suggestions will come from componentAutoSuggestionServer and follow the protocol specified on componentAutoSuggestionServer
- a standard autocomplete example in jQuery http://jqueryui.com/autocomplete/
- autocompletions can work within a textbox: http://forum.jquery.com/topic/hashtag-and-mention-autocomplete
###Newsfeed Widget
We tried to get a newsfeed widget tutorial to work with a JSON input instead of a xml: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-a-widget-to-display-your-buzzing/
The widget was a bit hard to understand, thanks to some weird code that seemed to do nothing at all. Thanks to Rene we streamlined it down to its core and now I try to explain a bit more in detail how it works. First of all, here is our complete js code we need for the widget to work:
var BuzzReader = function(options){
//var url = "http://localhost:8080/Graphity-Server-0.0.1-SNAPSHOT/read?user_id=1&poster_id=1&num_items=15&own_updates=0";
var url = "https://api.flattr.com/rest/v2/users/voxpelli/things.as";
jQuery.extend(this,options || {});
if(this.user === "") throw "The 'user' property is required";
if(this.renderTo === "") throw "The 'renderTo' property is required";
if(this.url === "")this.url = url;
this.read();
};
BuzzReader.prototype = {
renderTo: "",
user : "",
url : "",
items : 10,
render : function(element){
var html = [];
html.push("<ul>");
for(var i = 0; i < this.items && i < this.data.length;i++){
html.push("<li><strong><a href=\""+this.data[i].object.id+"\">"+this.data[i].published+"</a></strong><br><span>"+this.data[i].actor.displayName+": "+this.data[i].title+"</span></li>");
}
html.push("</ul>");
this.el.append(html.join(""));
},
read : function(){
this.el = jQuery(this.renderTo);
this.el.append("<div class=\"buzz-loading\"></div>");
jQuery.ajax({
url : this.url,
context : this, // GIVE ME FUCKING CONTEXT SO "THIS" IS WHAT I (<- ME RENE PICKHARDT) expect it to be!
success : this.parse,
});
},
parse : function(json_data){
this.el.empty();
this.data = json_data.items;
this.render(this.renderTo);
}
};
jQuery.fn.buzzReader = function(options){
return this.each(function(){
var opts = options || {};
opts.renderTo = this;
new BuzzReader(opts);
});
};
The script has the following structure. It basically starts at the end with jQuery.fn.buzzReader = function(options){...} In this part we define how we can use the final widget in our html source code. This code checks if the given options are empty and writes the renderTo part of the options to this, which in that part refers to JQuery. After that we instantiate a new Object of our BuzzReader Class.
In our html part, we can call our widget now with ```$(function(){
$("#buzz .reader").buzzReader({
user : "nettutsblog",
items : 3
});
});```
- display an activity stream following the activitystrea.ms forma like our graphity can easily be built using jquer: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-a-widget-to-display-your-buzzing/ (the example assumes google buzz as a data source and XML as a format instead of JSON but should be possible to fill the gaps)