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 <head> 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:
<tr>
<td class="col-1"
valign="top">City: </td>
<td class="col-2" valign="top">
<%= text_field_with_auto_complete :agent, :city, :skip_style => true %>
</td>
</tr>
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<meta name="generator" content="HTML Tidy, see
www.w3.org" />
<meta http-equiv="Content-type" content="text/html;
charset=utf-8" />
<title>Braintray</title>
<!--
<script src="/javascripts/prototype.js?1206058700"
type="text/javascript"></script>
<script src="/javascripts/effects.js?1206058700"
type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1206058700"
type="text/javascript"></script>
<script src="/javascripts/controls.js?1206058700"
type="text/javascript"></script>
<script src="/javascripts/widgets/tooltip.js?1206129032"
type="text/javascript"></script>
<script src="/javascripts/application.js?1206130840"
type="text/javascript"></script>
-->
<script src="/javascripts/scriptaculous/prototype.js?1199416034"
type="text/javascript"></script>
<script
src="/javascripts/scriptaculous/scriptaculous.js?1199416034"
type="text/javascript"></script>
<script
src="/javascripts/calendar_date_select/calendar_date_select.js?1206211205"
type="text/javascript"></script>
<link href="/stylesheets/style.css?1206124303"
media="screen"
rel="stylesheet" type="text/css" />
<script
src="/javascripts/calendar_date_select/calendar_date_select.js?1206211205"
type="text/javascript"></script>
<link
href="/stylesheets/calendar_date_select/silver.css?1206211205"
media="screen" rel="stylesheet" type="text/css"
/>
</head>
<body>
<div id="content">
<div align="right">
<strong>Logged in as ryan</strong><br />
<a href="/logout">Logout</a>
</div>
<center>
<h1>Braintray</h1>
</center>
<table width="100%">
<tr>
<td width="15%" valign="top">
<table class="width100" align="center">
<tr>
<td>
<a href="/">Home</a><br />
<a href="/agent/new">New Agent</a><br />
<a href="/listing/new">New Listing</a><br />
<a href="/agent/list">Show Agents</a><br />
<a href="/listing/list">Show Listings</a><br
/>
</td>
</tr>
</table>
</td>
<td width="85%" valign="top">
<table class="width100" align="center">
<tr>
<td>
<!-- begin page specific data -->
<center><h1>New Agent</h1></center>
<form action="/agent/create"
enctype="multipart/form-data"
method="post"><div
style="margin:0;padding:0"><input
name="authenticity_token" type="hidden"
value="a1e26185ba3062d1d2786a357322476eb3f8d3a9" /></div>
<table class="width50" align="left">
<!--begin form import-->
<!-- agent error messages -->
<!-- end error messages -->
<!--[form:profile]-->
<tr>
<td class="col-1" valign="top">First
Name: </td>
<td class="col-2" valign="top"><input
id="agent_first_name"
name="agent[first_name]" size="30" type="text"
/></td>
</tr>
<tr>
<td class="col-1" valign="top">Last
Name: </td>
<td class="col-2" valign="top"><input
id="agent_last_name"
name="agent[last_name]" size="30" type="text"
/></td>
</tr>
<tr>
<td class="col-1" valign="top">Home
Phone: </td>
<td class="col-2" valign="top"><input
id="agent_home_phone"
name="agent[home_phone]" size="30" type="text"
/></td>
</tr>
<tr>
<td class="col-1" valign="top">Cell
Phone: </td>
<td class="col-2" valign="top"><input
id="agent_cell_phone"
name="agent[cell_phone]" size="30" type="text"
/></td>
</tr>
<tr>
<td class="col-1" valign="top">Alternate
Phone: </td>
<td class="col-2" valign="top"><input
id="agent_alternate_phone"
name="agent[alternate_phone]" size="30"
type="text" /></td>
</tr>
<tr>
<td class="col-1"
valign="top">Fax: </td>
<td class="col-2" valign="top"><input
id="agent_fax"
name="agent[fax]" size="30" type="text"
/></td>
</tr>
<tr>
<td class="col-1"
valign="top">Website: </td>
<td class="col-2" valign="top"><input
id="agent_website"
name="agent[website]" size="30" type="text"
/></td>
</tr>
<tr>
<td class="col-1"
valign="top">Date: </td>
<td class="col-2" valign="top"><input
id="e_date" name="e_date"
type="text" /> <img alt="Calendar" onclick="new
CalendarDateSelect(
$(this).previous(), {year_range:10} );"
src="/images/calendar_date_select/calendar.gif?1206211205"
style="border:0px; cursor:pointer;" /></td>
</tr>
<tr>
<td class="col-1"
valign="top">City: </td>
<td class="col-2" valign="top">
<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;
}
</style><input id="agent_city" name="agent[city]"
size="30"
skip_style="true" type="text" /><div
class="auto_complete"
id="agent_city_auto_complete"></div><script
type="text/javascript">
//<![CDATA[
var agent_city_auto_completer = new
Ajax.Autocompleter(''agent_city'',
''agent_city_auto_complete'',
''/agent/auto_complete_for_agent_city'', {})
//]]>
</script>
</td>
</tr>
<!--[eoform:profile]-->
<!--end form import-->
<tr>
<td><input name="commit" type="submit"
value="Create" /></td>
</tr>
</table>
</form>
<!-- end page specific data -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
--
Posted via http://www.ruby-forum.com/.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---
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/ On 04/04/2008, at 1:49 PM, Ryan Xx wrote:> > 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 <head> 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: > > <tr> > <td class="col-1" valign="top">City: </td> > <td class="col-2" valign="top"> > <%= text_field_with_auto_complete :agent, :city, :skip_style => true > %> > </td> > </tr> > > 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: > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> > > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> > <head> > <meta name="generator" content="HTML Tidy, see www.w3.org" /> > <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> > <title>Braintray</title> > <!-- > <script src="/javascripts/prototype.js?1206058700" > type="text/javascript"></script> > <script src="/javascripts/effects.js?1206058700" > type="text/javascript"></script> > <script src="/javascripts/dragdrop.js?1206058700" > type="text/javascript"></script> > <script src="/javascripts/controls.js?1206058700" > type="text/javascript"></script> > <script src="/javascripts/widgets/tooltip.js?1206129032" > type="text/javascript"></script> > <script src="/javascripts/application.js?1206130840" > type="text/javascript"></script> > --> > <script src="/javascripts/scriptaculous/prototype.js?1199416034" > type="text/javascript"></script> > <script src="/javascripts/scriptaculous/scriptaculous.js?1199416034" > type="text/javascript"></script> >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
Julian Leviston 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. -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
I also forgot to mention, that the styling doesn''t go all out of wack in IE, only Firefox. IE doesn''t do anything. -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
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
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---