There is a autocomplete rails plugin made by DHH. So why use this one?

• jQuery is unobtrusive, better and you will be one of the cool guys using jQuery. The rails prototype helpers will add a bunch of onclick code to the html elements, not very elegant. And if you wants to do more than what the helpers offers you are stuck with some code in rails and some code with pure javascript which makes it harder to maintain the code.

 

• jQuery autocomplete can use id as value instead of just the name. The autocomplete prototype plugin uses only value making it useless if you have duplicate values (i.e. cities with same name) or want to present the selection text as something more than the value itself (i.e. city, country).

 

• More options. Better styling out of the box.

Anything wrong with the jQuery autocomplete plugin?

• Data input support. No JSON. No XML. No CSV. Both are using non-standard data formats. jQuery UI autocomplete is using pipe-separated values while Prototype plugin uses a html list. Should at least be possible to specify value/text delimiter.

 

• It is in beta but does not seem to be under development. Still has bugs if you use some of the extended options. No indication whether it is still under development.

 

• The jQuery UI lists autocomplete as one of the feautres included. However the example uses the jQuery autocomplete plugin and the source code in jQuery UI autocomplete and the jQuery autocomplete plugin is different. In this example I have used the code in the latest jQuery UI

 

What you need

jQuery
jQuery UI beta

Remember to use the minified versions in production.

How it works

In Rails

Make sure your controller will respond to javascript (or whatever format you prefer to respond with).

The index action in CitiesController must be set up to search for the query paramater (q) and to respond with the javascript format:

def index
@cities = City.find(:all,:conditions => ['name LIKE ?', "#{params[:q]}%"],  :limit => 5,  rder => 'name')
respond_to do |format|
format.html # index.html.erb
format.xml  { render  ml => @cities }
format.js # index.js.erb
format.json { render :json => @cities }
end
end

Create the index.js.erb view file under views/cities

<% for city in @cities -%>
<%= city.name %>, <%= city.country.name %> |<%= city.id %>
<% end -%>

On the client

Write javascript/stylesheets in the HEAD section in your layouts/application.html.erb:

<%= yield :head %>

Include the required files (i.e. views/cities/index.html.erb):

<% content_for :head do %>
<%= javascript_include_tag 'jquery-1.2.6.min', 'jquery.ui-1.6rc2/ui/minified/ui.core.min', 'jquery.ui-1.6rc2/ui/minified/ui.autocomplete.min' %>
<%= stylesheet_link_tag 'jquery.ui-1.6rc2/themes/default/ui.all' %>

<script type="text/javascript">
$(document).ready(function(){
jQuery.ajaxSetup({
'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})
$("#q").autocomplete( {
url : '<%= formatted_cities_path(:js) %>',
mustMatch : false
}
);
$("#q").autocomplete('result', function(event, data, formatted) {
if (data)
document.location.href = '/cities/' + data[1];
});
});
</script>
<% end%>

And finally the form on the same page:

<% form_tag cities_path, :method => 'get' do %>
<%= text_field_tag :q, params[:q] %>
<%= submit_tag "Locate city", :name => nil %>
<% end %>

So what happened with Gaiaware and ra-ajax?

Back in August Thomas announced he had resigned from his position at Gaiaware with reasons for disagreements in strategy, product features and basically everything else that can be disagreed upon with the new CEO Bård Strainheim, previously CEO (and founder?) of Gatsoft. Thomas goes into great length on his blog about the history and the disagreements.

Thomas then founds ra-ajax and later on another developer from Gaiaware joined him. Ra-ajax is basically the same product with a new codebase but according to Thomas more lightweight and even better. Ra-ajax is also completely free and open-source (how are you going to feed your kids Thomas?).

But things does not stop there. I assume Gaiaware is not happy with losing the founder and brain behind their only product so they go to action. They have a meeting with Thomas and threatens to sue him if he did not agree to hand over the 25% shares he stills own in Gaiaware. The threat was based on Thomas creating a competing product. It should be strongly noted that this competing product, ra-ajax, is based on a new codebase. And as far as I know not based on any code from Gaiaware. However it still is a competing product but unless Gaiware has certain IP-rights in their contract I do not see how they can stop Thomas from making a competing product. For something new and unique I could understand but something as commodizied as an ajax framework which there are many other similar products on the market I cannot see how Gaiaware could claim IP-rights to the idea and restrict past employees in such a way.

After a new meeting Thomas gets an ‘offer’ from Gaiaware which involves him selling his 25% share in the company for $30,000, restrict ra-ajax to LGPL while offering a free MIT license to Gaiaware, a week training for the developers in Gaiaware and future consultation services as needed.

I am no lawyer and have not read the contracts involved in this case but it seems to be that this is not only unfair but also something that would probably not be the result in a court case. I think Thomas definitively should be strong in his case as he gives away and accepts a lot in his latest meeting with Gaiaware. Thomas also writes why they would win a potential court case against Gaiaware.

Ra-Ajax is a new company by Thomas Hansen, the founder of GaiaWare. I covered them earlier and was astonished to se the new turns this company and Thomas has taken (will explain later).

#1:

if a user is not logged in the requested page (/getSomeData/) returns a http 403 – forbidden status.

#2:

var url = "/getSomeData/";
var opt = {
method: "post",
onSuccess: success,
// Handle 404
on404: function(t) {
alert(’Error 404: location "‘ + t.statusText + ‘" was not found.’);
},
// Handle other errors
onFailure: function(t) {
if ( t.status == 403 ) {
doLogin(); // show login box to user
}
},
asynchronous: false
}

new Ajax.Request(url, opt);

(code not tested..just example

If you do not want to ping every minute, we do so mainly because of other reason than to keep session alive, then Jack Slocum’s advice (outlined in the comments here) is a good solution. It basically does a cookie check every 30 seconds on the client and pings the server just before the session is about to be end.

Also, it seems like this new open-source release no longer includes the ‘powered by’ image which was inserted in earlier versions (making it useless in practical development). I hope one of the nice Gaia guys can confirm this for me. confirmed.

Technorati: Ajax, Gaia Ajax Widgets

Technorati: Ajax, Gaia Ajax Widgets, asp.net

snap_preview_anywhere=new snapPreviewAnywhere();/*altered upon codebase change @ 20070106*/snap_preview_anywhere.onload();

I should note that I also had minor problems with this code. Sometimes it didn’t run the snap function properly. I had to set a 100 ms timeout when running the code.

Technorati: Snap

Lack of documentation and support is the main problem with using open-source Ajax/Javascript libraries on a large scale.

Technorati: Ajax

I realized that the MSXML library shipped with IE and I had some good contacts over in the XML team who would probably help out- I got in touch with Jean Paoli who was running that team at the time and we pretty quickly struck a deal to ship the thing as part of the MSXML library. Which is the real explanation of where the name XMLHTTP comes from- the thing is mostly about HTTP and doesn’t have any specific tie to XML other than that was the easiest excuse for shipping it so I needed to cram XML into the name (plus- XML was the hot technology at the time and it seemed like some good marketing for the component). 

Read the complete story behind the XMLHTTP object from Microsoft at Alex Hopmann’s blog.

Technorati: XMLHTTPRequest, Ajax

document.snap_preview_anywhere.onload();

Move your mouse over one of the links to see it in action

Technorati: Snap