Rails - Sep 2008 - Autocomplete (plugin&Scriptaculous) not working in Safari.

Hi all,
Been trying to fix this for a while now. Been searching but have not
found anything related documented. Surprised that noone else seems to
have encountered this problem. I am trying to implement Autocomplete
in one of my forms and although its working in FF, not in Safari. This
is the work-flow I am talking about.

1.User starts typing
2.Autocomplete kicks off and returns matching strings in relevant
attributes and Model.
3.User scrolls down options and selects the one he/she wants.
4.Selected option appears on the text box
   4a.Text appearing in text box may be different from that shown to
user in options list. Like in the Scriptaculous
customised_autocomplete demo.
5.When the form is submitted -> The autocomplete field may be either a
virtual attribute or otherwise. The field is for a belongs_to
associated model so ultimately, the foreign key must be set (in my
case, its contact_id for a Create/Edit Reminder form).

Safari breaks in Step 4 ie. the selected option does not appear in the
text box, and does not get submitted with the rest of the form. I have
tried using the auto_complete plugin for this as well as the
Scriptaculous methods. Both break at the same step in Safari. An
observation here if its any help - the blue focus outline for the
field is slightly eaten up on the bottom side of the field as though
there is something on top of it. This is after I select an option from
the list.
I am also not able to figure out how to achieve steps 4a and 5. Here
is the code I have so far.

_reminder.html.erb
<%= text_field_with_auto_complete :reminder, :contact_id,
{}, :skip_style => false %><br/>
...

reminders_controller.rb
Code :   - fold - unfold

protect_from_forgery :except =>
[:auto_complete_for_reminder_contact_id]
  def auto_complete_for_reminder_contact_id
    auto_complete_responder_for_contacts params[:reminder]
[:contact_id]
  end
...
private
    def auto_complete_responder_for_contacts(value)
      @contacts = current_user.contacts.find(:all,
        :conditions => [ ''LOWER(name) LIKE ? OR LOWER(email) LIKE
?'',
        ''%'' + value.downcase +
''%'',''%'' + value.downcase +
''%''  ],
        :order => ''name ASC'',
        :limit => 8)
      render :partial => ''list''
    end
...

_list.html.erb
<ul>
<%- for contact in @contacts do -%>
  <li>
    <div><%=h contact.name %></div>|<div><%=h
contact.email %></div>|
<div><%=h contact.company.name %></div>
  </li>
<%- end -%>
</ul>

Hope someone''s got pointers. Thanks!

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

On Mon, Sep 29, 2008 at 7:13 AM, Vinay
<yourstruly.vinay-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> 1.User starts typing
> 2.Autocomplete kicks off and returns matching strings in relevant
> attributes and Model.
> 3.User scrolls down options and selects the one he/she wants.
> 4.Selected option appears on the text box
>   4a.Text appearing in text box may be different from that shown to
> user in options list. Like in the Scriptaculous
> customised_autocomplete demo.
> 5.When the form is submitted -> The autocomplete field may be either a
> virtual attribute or otherwise. The field is for a belongs_to
> associated model so ultimately, the foreign key must be set (in my
> case, its contact_id for a Create/Edit Reminder form).
Just in case, model_auto_completer addresses this use case. You
autocomplete a belongs_to association and get an ID or else (if
:allow_free_text), get a new value.
> _list.html.erb
> <ul>
> <%- for contact in @contacts do -%>
>  <li>
>    <div><%=h contact.name %></div>|<div><%=h
contact.email %></div>|
> <div><%=h contact.company.name %></div>
>  </li>
> <%- end -%>
> </ul>
Try removing the DIVs somehow, sometimes even spaces around a LI
content may result in weird behaviour in some browsers. Once you get
it working, add stuff incrementally.

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Xavier,
Thanks for your reply. And i DID come across your plugin today :). So
will try to implement it soon. However, I also want to understand why
it is not working in Safari. If i remove the li and ul tags, the
autocomplete results dont show up. The partial is rendered if i look
into the dvlpmnt log but the results dont show up (in any browser).
Ive tried removing the div tags, and showing just contact_name in the
results without any html tags around it. Nothing works. I am running a
protect_from_forgery filter for the auto_complete method alone in the
controller if you notice. Will that affect this in any way? I put this
filter in because the authenticity token was not being passed with the
call. Would really appreciate assistance in this! Thanks!

On Sep 29, 1:38 pm, "Xavier Noria"
<f...-xlncskNFVEJBDgjK7y7TUQ@public.gmane.org>
wrote:
> On Mon, Sep 29, 2008 at 7:13 AM, Vinay
<yourstruly.vi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > 1.User starts typing
> > 2.Autocomplete kicks off and returns matching strings in relevant
> > attributes and Model.
> > 3.User scrolls down options and selects the one he/she wants.
> > 4.Selected option appears on the text box
> >   4a.Text appearing in text box may be different from that shown to
> > user in options list. Like in the Scriptaculous
> > customised_autocomplete demo.
> > 5.When the form is submitted -> The autocomplete field may be
either a
> > virtual attribute or otherwise. The field is for a belongs_to
> > associated model so ultimately, the foreign key must be set (in my
> > case, its contact_id for a Create/Edit Reminder form).
>
> Just in case, model_auto_completer addresses this use case. You
> autocomplete a belongs_to association and get an ID or else (if
> :allow_free_text), get a new value.
>
> > _list.html.erb
> > <ul>
> > <%- for contact in @contacts do -%>
> >  <li>
> >    <div><%=h contact.name
%></div>|<div><%=h contact.email %></div>|
> > <div><%=h contact.company.name %></div>
> >  </li>
> > <%- end -%>
> > </ul>
>
> Try removing the DIVs somehow, sometimes even spaces around a LI
> content may result in weird behaviour in some browsers. Once you get
> it working, add stuff incrementally.
--~--~---------~--~----~------------~-------~--~----~
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@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Also, how can i match more than one field in the Contact model? In the
sense, the User can type either the contact name or the contact email
and get relevant results. Like in Gmail.

On Sep 29, 2:31 pm, Vinay
<yourstruly.vi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Xavier,
> Thanks for your reply. And i DID come across your plugin today :). So
> will try to implement it soon. However, I also want to understand why
> it is not working in Safari. If i remove the li and ul tags, the
> autocomplete results dont show up. The partial is rendered if i look
> into the dvlpmnt log but the results dont show up (in any browser).
> Ive tried removing the div tags, and showing just contact_name in the
> results without any html tags around it. Nothing works. I am running a
> protect_from_forgery filter for the auto_complete method alone in the
> controller if you notice. Will that affect this in any way? I put this
> filter in because the authenticity token was not being passed with the
> call. Would really appreciate assistance in this! Thanks!
>
> On Sep 29, 1:38 pm, "Xavier Noria"
<f...-xlncskNFVEJBDgjK7y7TUQ@public.gmane.org> wrote:
>
> > On Mon, Sep 29, 2008 at 7:13 AM, Vinay
<yourstruly.vi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > > 1.User starts typing
> > > 2.Autocomplete kicks off and returns matching strings in relevant
> > > attributes and Model.
> > > 3.User scrolls down options and selects the one he/she wants.
> > > 4.Selected option appears on the text box
> > >   4a.Text appearing in text box may be different from that shown
to
> > > user in options list. Like in the Scriptaculous
> > > customised_autocomplete demo.
> > > 5.When the form is submitted -> The autocomplete field may be
either a
> > > virtual attribute or otherwise. The field is for a belongs_to
> > > associated model so ultimately, the foreign key must be set (in
my
> > > case, its contact_id for a Create/Edit Reminder form).
>
> > Just in case, model_auto_completer addresses this use case. You
> > autocomplete a belongs_to association and get an ID or else (if
> > :allow_free_text), get a new value.
>
> > > _list.html.erb
> > > <ul>
> > > <%- for contact in @contacts do -%>
> > >  <li>
> > >    <div><%=h contact.name
%></div>|<div><%=h contact.email %></div>|
> > > <div><%=h contact.company.name %></div>
> > >  </li>
> > > <%- end -%>
> > > </ul>
>
> > Try removing the DIVs somehow, sometimes even spaces around a LI
> > content may result in weird behaviour in some browsers. Once you get
> > it working, add stuff incrementally.
--~--~---------~--~----~------------~-------~--~----~
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@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

You need to leave the UL and LIs, only start with a bare

<li><%=h this %> and <%= that %></li>

without additional markup and no newline between the LI tags and the content.

You can write your custom action in the controller to implement any
search criteria, both in bare auto_complete and model_auto_completer,
there''s a documented convention for the action name, as well as
options to point to a different action.

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Thanks loads Xavier!! :) i just removed the div tags and kept the ul
and li tags like you said and it worked.. i cant believe it was so
simple!! been having this problem for quite a while! Also, I have
implemented your plugin and its working well.. thanks! :) Just one
more thing i could never figure out. If you take a look at the
scriptaculous demo, the select options have an avatar, the name, and
the email id, but when the user selects  an option, only the name
shows up in the text box. How can we achieve that?

On Sep 29, 3:34 pm, "Xavier Noria"
<f...-xlncskNFVEJBDgjK7y7TUQ@public.gmane.org>
wrote:
> You need to leave the UL and LIs, only start with a bare
>
> <li><%=h this %> and <%= that %></li>
>
> without additional markup and no newline between the LI tags and the
content.
>
> You can write your custom action in the controller to implement any
> search criteria, both in bare auto_complete and model_auto_completer,
> there''s a documented convention for the action name, as well as
> options to point to a different action.
--~--~---------~--~----~------------~-------~--~----~
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@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

On Tue, Sep 30, 2008 at 8:01 AM, Vinay
<yourstruly.vinay-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> Thanks loads Xavier!! :) i just removed the div tags and kept the ul
> and li tags like you said and it worked.. i cant believe it was so
> simple!! been having this problem for quite a while! Also, I have
> implemented your plugin and its working well.. thanks! :) Just one
> more thing i could never figure out. If you take a look at the
> scriptaculous demo, the select options have an avatar, the name, and
> the email id, but when the user selects  an option, only the name
> shows up in the text box. How can we achieve that?
I am not 100% sure, but I believe it is a side-effect of the CSS +
what the browser takes from the LI to display something in the text
field. The CSS goes in the HEAD of the page if you''d like to play
around.

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

For those interested, include an "informal" class for the element you
don''t want to get in your text field.
:) works well.
@Xavier, Thanks for pointing me in the right direction with that! How
can i customize model_auto_completer_result to show more than one
attribute in the results? like contact name, contact email? Hoping you
can hep me with that.

On Sep 30, 11:38 am, "Xavier Noria"
<f...-xlncskNFVEJBDgjK7y7TUQ@public.gmane.org>
wrote:
> On Tue, Sep 30, 2008 at 8:01 AM, Vinay
<yourstruly.vi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > Thanks loads Xavier!! :) i just removed the div tags and kept the ul
> > and li tags like you said and it worked.. i cant believe it was so
> > simple!! been having this problem for quite a while! Also, I have
> > implemented your plugin and its working well.. thanks! :) Just one
> > more thing i could never figure out. If you take a look at the
> > scriptaculous demo, the select options have an avatar, the name, and
> > the email id, but when the user selects  an option, only the name
> > shows up in the text box. How can we achieve that?
>
> I am not 100% sure, but I believe it is a side-effect of the CSS +
> what the browser takes from the LI to display something in the text
> field. The CSS goes in the HEAD of the page if you''d like to play
> around.
--~--~---------~--~----~------------~-------~--~----~
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@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

On Wed, Oct 1, 2008 at 12:38 PM, Vinay
<yourstruly.vinay-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> For those interested, include an "informal" class for the element
you
> don''t want to get in your text field.
> :) works well.
> @Xavier, Thanks for pointing me in the right direction with that! How
> can i customize model_auto_completer_result to show more than one
> attribute in the results? like contact name, contact email? Hoping you
> can hep me with that.
If you founded a solution for auto_complete that one should work,
because model_auto_completer is really a wrapper around auto_complete,
and that showing results is completely delegated to the original
plugin.

If you''d like to update the view elsewhere with that additional data
from the selected item there''s a hook :after_update_element that
receives among other arguments the very selected LI element. (Details
in http://model-ac.rubyforge.org/).

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

@Xavier
I used a solution i had for auto_complete for the results. But there
are a few issues like the options list does not go away when the user
selects an option. I either need to press "esc" or click on some other
part of the page for that to go away. And i cant use the mouse to
select an option from the options list. it shows up on the text field
and then automatically deletes itself if i use the mouse.
Also, for this, <%belongs_to_auto_completer :reminder, :contact, :name%>
can you show me
an example of how to use :after_update_element. The functionality i
need is this. Once an option is chosen, using the chosen contact, i
want to query the contact''s employer''s details and display
them on an
adjacent div. Something like @company
current_user.companies(params[:contact.company_id]) where im expecting
contact to be passed in by after_update_element. I understand its a JS
function. I dont know anything about JS. Least of all, writing
functions in JS.
I realise im slowly getting confused with my requirements and which
methods to use here. Pl excuse me if i am not making myself clear.
Thanks for all the help!


On Oct 1, 6:44 pm, "Xavier Noria"
<f...-xlncskNFVEJBDgjK7y7TUQ@public.gmane.org>
wrote:
> On Wed, Oct 1, 2008 at 12:38
PM,Vinay<yourstruly.vi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > For those interested, include an "informal" class for the
element you
> > don''t want to get in your text field.
> > :) works well.
> > @Xavier, Thanks for pointing me in the right direction with that! How
> > can i customize model_auto_completer_result to show more than one
> > attribute in the results? like contact name, contact email? Hoping you
> > can hep me with that.
>
> If you founded a solution for auto_complete that one should work,
> because model_auto_completer is really a wrapper around auto_complete,
> and that showing results is completely delegated to the original
> plugin.
>
> If you''d like to update the view elsewhere with that additional
data
> from the selected item there''s a hook :after_update_element that
> receives among other arguments the very selected LI element. (Details
> inhttp://model-ac.rubyforge.org/).
--~--~---------~--~----~------------~-------~--~----~
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@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Anyone? This is the very last step in this implementation and im not
able to find a solution by myself.

On Oct 3, 10:38 am, Vinay
<yourstruly.vi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> @Xavier
> I used a solution i had for auto_complete for the results. But there
> are a few issues like the options list does not go away when the user
> selects an option. I either need to press "esc" or click on some
other
> part of the page for that to go away. And i cant use the mouse to
> select an option from the options list. it shows up on the text field
> and then automatically deletes itself if i use the mouse.
> Also, for this, <%> belongs_to_auto_completer :reminder, :contact,
:name%> can you show me
> an example of how to use :after_update_element. The functionality i
> need is this. Once an option is chosen, using the chosen contact, i
> want to query the contact''s employer''s details and
display them on an
> adjacent div. Something like @company >
current_user.companies(params[:contact.company_id]) where im expecting
> contact to be passed in by after_update_element. I understand its a JS
> function. I dont know anything about JS. Least of all, writing
> functions in JS.
> I realise im slowly getting confused with my requirements and which
> methods to use here. Pl excuse me if i am not making myself clear.
> Thanks for all the help!
>
> On Oct 1, 6:44 pm, "Xavier Noria"
<f...-xlncskNFVEJBDgjK7y7TUQ@public.gmane.org> wrote:
>
> > On Wed, Oct 1, 2008 at 12:38
PM,Vinay<yourstruly.vi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > > For those interested, include an "informal" class for
the element you
> > > don''t want to get in your text field.
> > > :) works well.
> > > @Xavier, Thanks for pointing me in the right direction with that!
How
> > > can i customize model_auto_completer_result to show more than one
> > > attribute in the results? like contact name, contact email?
Hoping you
> > > can hep me with that.
>
> > If you founded a solution for auto_complete that one should work,
> > because model_auto_completer is really a wrapper around auto_complete,
> > and that showing results is completely delegated to the original
> > plugin.
>
> > If you''d like to update the view elsewhere with that
additional data
> > from the selected item there''s a hook :after_update_element
that
> > receives among other arguments the very selected LI element. (Details
> > inhttp://model-ac.rubyforge.org/).
--~--~---------~--~----~------------~-------~--~----~
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@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---