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

12 comments :

  1. Hi,
    Thank you for your code.But When i add you code to my rail app it will show the error in firefox(Firebug)
    entry.text is undefined
    (?)()auto_com...203675916 (1706 行目)
    findAll()prototyp...216204764 (655 行目)
    (?)()prototyp...216204764 (594 行目)
    each()prototyp...216204764 (593 行目)
    findAll()prototyp...216204764 (654 行目)
    displayCompletion()auto_com...203675916 (1706 行目)
    keyup()auto_com...203675916 (1663 行目)
    bind()prototyp...216204764 (208 行目)
    wrapper()prototyp...216204764 (3883 行目)
    [Break on this error] this.selectedList = this.list.fi...value)}).slice(0, this.options.maxItem);

    I am using rails 2.2.2
    Please help me.
    AMin

    ReplyDelete
  2. Sorry Again me.
    I have uploaded the my test project in this location
    http://www.sendspace.com/file/b72cw8
    Please have a look at it.
    I am using mysql and rails 2.2.2
    Thanks in advance
    Amin.

    ReplyDelete
  3. Thanks for ur reply.i will check the issue

    ReplyDelete
  4. Gen.lostwarrior ,
    Thank your for your reply. Your example works for me. But in my application I have test field as tag filed.
    rails tag start
    text_field_tag 'tag_list'
    rails tag end
    and in you app you have
    rails tag start
    text_field 'user','id'
    rails tag end

    How can I make it to work with acts_as_taggable_on_steroids plugin.
    Please show me the way.
    Thanks for your time.

    ReplyDelete
  5. Gen.lostwarrior ,
    Thank your for your reply. Your example works for me. But in my application I have test field as tag filed.
    rails tag start
    text_field_tag 'tag_list'
    rails tag end
    and in you app you have
    rails tag start
    text_field 'user','id'
    rails tag end

    How can I make it to work with acts_as_taggable_on_steroids plugin.
    Please show me the way.
    Thanks for your time.

    ReplyDelete
  6. If u need help just send ur application i will check it

    ReplyDelete
  7. Hi Gen.lostwarrior,
    Here is my application.
    http://www.sendspace.com/file/ab8pkc
    Today I have tried all the day but can not make the tag field auto compplete.
    Please Please have a look on it.

    ReplyDelete
  8. hi Gen.lostwarrior,
    Sorry to write you again. Have you looked on my application? what do you think about it?
    Please show me a way.
    Regards.
    Amin

    ReplyDelete
  9. i found a tutorial here. it works with me. May be helpful for u
    http://share-facts.blogspot.com/2009/02/ruby-on-rails-installation-in-ubuntu.html

    ReplyDelete
  10. Hi,

    I'm using this tutorial and everything auto-completes, but the values are not being submitted when I submit the form. How are the values being accessed? to params are empty

    ReplyDelete
  11. How to do it without static list? I have 19k items to autocompleting, so i want to updating list on keyup.

    ReplyDelete
  12. Thanks Gen.lostwarrior autocomplete is working but the problem is i am not getting the data based on the word that i enter.
    ex: in my database i am having name as abc , bob , cat
    when i enter b i am not getting bob first, i am getting abc.

    Please send me the solution to my mail id: praneetheee240@gmail.com

    ReplyDelete