SUPPORT THE SITE WITH A CLICK

Subscribe Rss:

SUPPORT THE SITE WITH A CLICK

Wednesday, July 16, 2008

Prototype UI autocomplete (Ajax) Using Ruby on Rails -II



This is my IInd article on Prototype UI autocomplete.The main source of the article is from
Prototype-UI.

Download this tutorial





In my previous article the autocomplete is a normal one.but now it has been integrated with ajax.The major changes in this artilce is we can add name in the textbox list.In the first article i have shown the names are populating from database,but now it has been integrated with add functionality.

Major Changes


I have included auto_complete.js & drop_shadow stylesheets

Step 1.changes in Layout

In the head part of the layout include the new js files & stylesheets.
<%= javascript_include_tag :defaults%>
<%= javascript_include_tag 'auto_complete'%>
<%= stylesheet_link_tag 'default'%>
<%= stylesheet_link_tag 'drop_shadow'%>


Step 2.Changes in the erb file

<div>
<label><b>User</b></label>
<p>
<%= text_field 'user','id'%>
</p>
<script type="text/javascript">
Event.observe(window, "load", function() {
pui = new UI.AutoComplete('user_id', { infoMessage: "Type a user name",
noMatchMessage: "Nothing found",
shadow: "auto_complete",
});
pui.setAutocompleteList(<%=@users%>);
});
</script>
</div>
<div style="margin-top:50px;">
<label><b>Add a new box</b></label>
<p>
<%= text_field 'name','id' %>
<%=link_to 'Add' ,{},:onclick=>"add()",:href=>'#'%>

</p>
</div>


Add functionality was integrated in the erb file.here onclick event has been called for adding a new user or text

Step 3.Javascript in head tag

<script type="text/javascript">
function add()
{
if($F('name_id').length > 0)
{

pui.add($F('name_id'));

}
}
</script>


Now we can add the text into the textbox list.

Thanks!

Download this tutorial



Recently i received a comment from Amin which he mentioned he entry.text is undefined & this.selectedList = this.list....}).slice(0, this.options.max.selection);
error occuring in his application.

So if u switch ur project from rails 2.0.2 to other higer versions.Just make

ActiveRecord::Base.include_root_in_json = false

which will be in config/initializers/new_rails_defaults.rb


Kind notice this application has been created & tested in rails 2.0.2