Auto Complete Problems

Hello All,

I’m a RoR newbiew, trying to experiment with Autocomplete, but I’m
having some difficulties. When I start typing in my input box, instead
of getting a nice drop down, the styling on my page is getting all out
of wack (ie my background colours change, link styling changes, etc) and
I’m not seeing any autcompletion data. Here are the steps I’ve taken
with code snippets.

My section:

<%= javascript_include_tag “scriptaculous/prototype” %>
<%= javascript_include_tag “scriptaculous/scriptaculous” %>
<%= javascript_include_tag “calendar_date_select/calendar_date_select”
%>
<%= stylesheet_link_tag ‘style’ %>

later on down, I have this:

City:  <%= text_field_with_auto_complete :agent, :city, :skip_style => true %>

In my agent_controller.rb, I have this:

auto_complete_for :agent, :city

I’ve put all of the scriptaculous .js files in my public dir in a folder
named scriptaculous. Am I supposed to be including some css files or
anything else? I’m kind of stumped here. Below is what my HTML looks
like for the full page:

Braintray
<strong>Logged in as ryan</strong><br />

<a href="/logout">Logout</a>

Braintray

Home
New Agent
New Listing
Show Agents
  <a href="/listing/list">Show Listings</a><br />
</td>
</tr>
</table>

New Agent

<td class="col-2" valign="top"><input id="agent_first_name"

name=“agent[first_name]” size=“30” type=“text” />

<td class="col-2" valign="top"><input id="agent_home_phone"

name=“agent[home_phone]” size=“30” type=“text” />

<td class="col-2" valign="top"><input id="agent_alternate_phone"

name=“agent[alternate_phone]” size=“30” type=“text” />

<td class="col-2" valign="top"><input id="agent_website"

name=“agent[website]” size=“30” type=“text” />

First Name: 
Last Name: 
Home Phone: 
Cell Phone: 
Alternate Phone: 
Fax: 
Website: 
Date:  Calendar
City: 
  <style type="text/css">        div.auto_complete {
      width: 350px;
      background: #fff;
    }
    div.auto_complete ul {
      border:1px solid #888;
      margin:0;
      padding:0;
      width:100%;
      list-style-type:none;
    }
    div.auto_complete ul li {
      margin:0;
      padding:3px;
    }
    div.auto_complete ul li.selected {
      background-color: #ffb;
    }
    div.auto_complete ul strong.highlight {
      color: #800;
      margin:0;
      padding:0;
    }

</td>
</tr>
</table>

Hey,

I’d suggest you don’t thrust your hand directly into the gyrating
plunger of joy that is AJAX straight away if you’re a newbie.

It takes a while before you properly grok request/response, especially
if you’re not familiar with web development or even web site creation.

If you have your head around the request/response cycle, and params
passing, and then you also have your head around basic AJAX using
link_to_remote and observe_field types, etc, then THEN would be the
time to try out autocomplete stuff.

It sits on top of the basic AJAX stuff, and does div reloading and
database querying and makes a few assumptions that can be hard to
“get”. (For instance, the way it id-tags things from an HTML/CSS point
of view.)

I’d also be using FireFox’s lovely DOM viewer, because you can’t
simply view the source of a post-javascript-modified page and expect
it to display the html for what appears on the page.

Good luck!

Julian.

Learn Ruby on Rails! CHECK OUT THE FREE VIDS (LIMITED TIME) VIDEO #3
OUT APRIL 6
http://sensei.zenunit.com/

I also forgot to mention, that the styling doesn’t go all out of wack in
IE, only Firefox. IE doesn’t do anything.

Hey Ryan,
I had the same problem…my guess (I’m still new to the whole rails
thing too) is that you’re using RoR2.0 or something which is late
enough to include forgery protection. There are 2 ways I found to
‘fix’ this.

  1. flip forgery protection off on a per AJAX method basis
    controller:
    protect_from_forgery :except => [
    :auto_complete_method1
    :auto_complete_method2 ]

  2. Change the auto_complete plugin to include the forgery key when
    making a javascript request. This requires that you patch the
    auto_complete plugin.
    http://dev.rubyonrails.org/attachment/ticket/10059/auto_complete_should_work_with_CSRF_and_be_testable_outside_a_project.patch
    the meat is here for the forgery (CSRF) stuff…the other changes are
    for the test harness:
    auto_complete/lib/auto_complete_macros_helper.rb

Good luck,
Dale

Julian L. wrote:

Thanks for the input Julian. I’m not a newbie to web development, it’s
what I do for a profession, and I have a degree in computer science.
But this is my first time ever doing anything with RoR. I was getting
frustrated and came here for help.

I’ll check out the Firefox DOM viewer you suggested, see if I can see
anything in there.

Cheers.

This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.

| Privacy Policy | Terms of Service | Remote Ruby Jobs