Topic: obtain model id from autocomplete / nested attributes

Hi,

I want to add multiple persons to a meeting using an AJAX auto-complete textfield.
Typing in the textfield searches the list of existing users, pressing a button adds
the user to a list dynamically on the client.
The model is only stored when the submit button is pressed. If the person does not exists yet, he/she is created.

I have setup a many-to-many association between meetings and persons, which I handle with nested attributes in the meeting controller. I have an autocomplete textfield that searches the persons and a corresponding button.

I can dynamically insert a nested form per person into the DOM as input to the nested attributes in the meeting controller, but for this I need the id of the person, as well as the name.

My question is how I can obtain the persons name as well as the person_id from an autocomplete textfield. Optimally I would be able to retrieve other attributes such as lastname, too.

I could probably hack something, but I had hoped that there is a standard way of doing this.
Any hints what I could look for?
many thanks
Kurt

Re: obtain model id from autocomplete / nested attributes

>I can dynamically insert a nested form per person into the DOM as input to the nested attributes in the meeting controller, but for this I need the id of the person, as well as the name.

How do you do this?  In JavaScript running in the client browser?

Whenever I have to do a related series of dom manipulations in an AJAX call, I try and use RJS

Let RJS update the page any way you want

i.e.

def he_picked_a_person
  @person = Person.find(params[:id])
  render :update do |page|
    page[:current_user_list].insert_html :bottom, '<li>' + @person.name + '</li>'
    page[:current_user_links].insert_html :bottom, "<a href='/person/edit/#{@person.id}'>" + @person.name + '</a>'
  end
end

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: obtain model id from autocomplete / nested attributes

BradHodges wrote:

>I can dynamically insert a nested form per person into the DOM as input to the nested attributes in the meeting controller, but for this I need the id of the person, as well as the name.

How do you do this?  In JavaScript running in the client browser?

I wanted to do it in JavaScript in the client browser, yes. Since it is not supposed to be permanent until the form is submitted I do not see why I should make a server call.

The difficulty is really to get the id of the person model as well as the name in the autocomplete field.
Any hints?

best regards
Kurt

Re: obtain model id from autocomplete / nested attributes

Typically when I'm doing autocomplete,  I do something like this:

<ul class="pulldown">
  <% @things.each do |t| %>
    <li><%= t.name %></li>
  <% end %>
</ul>

Then in css I style it into the pulldown I need.

If you wanted to pass in EXTRA information in your pulldown list,  you could do this:

<ul class="pulldown">
  @things.each do |t|
    <li>t.name<div>t.id</div></li>
  end
</ul>

If you style that div to be display:none,  you won't see it,  but it's there,  and you could grab it with JQuery like:

$(this).children().val()

Since you've seen to it that the li element only has one child,  the div that contains the id you want.

Last edited by BradHodges (2011-02-13 14:08:09)

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: obtain model id from autocomplete / nested attributes

BradHodges wrote:

<ul class="pulldown">
  @things.each do |t|
    <li>t.name<div>t.id</div></li>
  end
</ul>

f you style that div to be display:none,  you won't see it,  but it's there,  and you could grab it with JQuery like:
$(this).children().val()

I would typically use span tags for that, but that's neither here nor there. However, my recommendation would be to use html5 data attributes, this is exactly what they are meant for (storing arbitrary data).

<ul class="pulldown">
  @things.each do |t|
    <li data-thingId="t.id">t.name</li>
  end
</ul>

var listItemIds = $('.pulldown').children('li').data('thingId');

That will give you an array containing the ids stored in the data-attribute that you named thingId.

I would definitely use data attributes though, this is exactly what they are meant for.

- Ben

Re: obtain model id from autocomplete / nested attributes

RailsRhino wrote:
<ul class="pulldown">
  @things.each do |t|
    <li data-thingId="t.id">t.name</li>
  end
</ul>

var listItemIds = $('.pulldown').children('li').data('thingId');

That will give you an array containing the ids stored in the data-attribute that you named thingId.

I would definitely use data attributes though, this is exactly what they are meant for.

ok, thanks. I guess that your snippet would be put into the partial responsible for dynamically generating  the dropdown below my autocompleted textfield, right?
I have so far only used the autocomplete rails plugin. Am I right that I would have to implement this myself in this case?
Do you have a good hint where to look for to get started?
There are plenty of autocomplete solutions out there but maybe you have a recommendation for an architecture which fits well with your suggestions above.

Thanks!
Kurt

Re: obtain model id from autocomplete / nested attributes

You're using jQuery so we'll use jQuery autocomplete!

You have two options (that I have seen thus far with jQuery):

first is from the jQuery UI itself

Second is a jQuery plugin

I'd probably recommend the first one, jQuery UI, because it's developed by the core jQuery team, and not a third party plugin. You can be assured that'll it'll work great and be kept up.'

To do that you need to download the jQuery UI and place the files appropriately in your app. The UI lets you choose a theme, but you certainly don't have to use the theme for your site. If you're only going to use the autocomplete widget, you don't need to download the entire thing, just it's dependencies, and I'd recommend doing that (if you're only using autocomplete) cause there are a lot of big files in the UI.

Last edited by RailsRhino (2011-02-15 17:42:33)

- Ben