Skip to content
trezmann edited this page Aug 22, 2013 · 15 revisions

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/

AJAX

AutoCompletion

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.

###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);
	});
};

Activity Stream

Loading Components

Event Bus

User Interface

Transitions

Fading

Drag and drop

Clone this wiki locally