views:

53

answers:

2

Hi Everyone,

I am trying to get dynamic select menu's working in my Rails application.

I have a model called kase, a model called person and a model called company.

When a user creates a new kase, they are presented with a select field to choose a Person and a select field to choose a Company.

I am trying to make it dynamic, so if they choose company a in the first select field then only employees of company a will be listed in the Person field.

The model associations are as follows:

class Kase < ActiveRecord::Base

  belongs_to :company # foreign key: company_id
  belongs_to :person # foreign key in join table
  belongs_to :surveyor,
             :class_name => "Company",
             :foreign_key => "appointedsurveyor_id"
  belongs_to :surveyorperson,
             :class_name => "Person",
             :foreign_key => "surveyorperson_id"

-------------------------------------------------  

class Company < ActiveRecord::Base
  has_many :kases
  has_many :people
  def to_s; companyname; end

-------------------------------------------------

class Person < ActiveRecord::Base
  has_many :kases # foreign key in join table
  belongs_to :company

UPDATED JAVASCRIPT

var people = new Array();
<% for person in @people -%>
  people.push(new Array(<%= person.company_id %>, '<%=h person.personname %>', <%= person.id %>));
<% end -%>

function personSelected() {
  alert('hello world');
  appointedsurveyor_id = $('kase_appointedsurveyor_id').getValue();
  options = $('kase_surveyorperson_id').options;
  options.length = 1;
  people.each(function(person) {
    if (person[0] == appointedsurveyor_id) {
      options[options.length] = new Option(person[0], person[1]);
      alert('hello world')
    }
  });
  if (options.length == 1) {
    $('kase_surveyorperson_id').hide();
  } else {
    $('kase_surveyorperson_id').show();
  }
}

document.observe('dom:loaded', function() {
  $('kase_appointedsurveyor_id').observe('change', personSelected);
});
+1  A: 
var people = new Array();
<% for person in @people -%>
  people.push(new Array(<%= person.id %>, '<%=h person.login %>'));
<% end -%>

function personSelected() {
  alert('hello world');
  appointedsurveyor_id = $('company_appointedsurveyor_id').getValue();
  options = $('person_appointedsurveyorperson_id').options;
  options.length = 1;
  people.each(function(person) {
    if (person[0] == appointedsurveyor_id) {
      options[options.length] = new Option(person[0], person[1]);
    }
  });
  if (options.length == 1) {
    $('person_field').hide();
  } else {
    $('person_field').show();
  }
}

document.observe('dom:loaded', function() {
  //companySelected(); << remove this
  $('person_field').observe('change', personSelected);
});
mark
If I change it to person I get the following: NoMethodError in Javascripts#dynamic_peopleShowing app/views/javascripts/dynamic_people.js.erb where line #3 raised:undefined method `appointedsurveyor_id' for #<Person:0x105020980>
dannymcc
Looks like your problem stems from this. Can you explain the relationship between person, kase and company? Each person has many kases and each kase has a company?
mark
Hi, each kase belongs to a person and each person has many kases.
dannymcc
Hi Danny. Person doesn't have the field appointedsurveyor_id but it does have id which in turn is used in the join. This surely is what you need to compare. Check out my edit.
mark
Hi Mark, I have updated the questions (EDIT 2).
dannymcc
Sad trombone really made me laugh. :) Couple of things, you'll need to hide the person field in the html or in a stylesheet - there's no js event to hide it, only to display it. On person_field change you're calling a function companySelected when surely it should be personSelected?
mark
Haha - I aim to please! Ok, I display:none'd the person field, altered the personSelected. Still nothing, although obviously the person field is now hidden.Although the javascript file is definitely loading, is there a way of seeing if it's 'finding' the field I'm trying to work with?
dannymcc
You could stick an alert('hello world') in the personSelected function see if it's getting fired.
mark
$('person_field').observe('change', personSelected, alert('hello world')); - has no effect on the form page. Does that mean the two aren't linked correctly somewhere?
dannymcc
I meant to put the alert in the function rather than the function call: function personSelected() { alert.... Also you should really install firefox and firebug which would likely tell you what was wrong/ :)
mark
See also two edits to my answer.
mark
Hmm. Firebug is confusing me! The input ID is called "kase_appointedsurveyor_id" but I'm not sure whether to use that or the li id?
dannymcc
Use the input, the li doesn't have a change event. The reason it's called that is rails is adding it. No problem though, just change your event listener (observer).
mark
Ok, so now it's as follows: }); if (options.length == 1) { $('kase_surveyorperson_id').hide(); } else { $('kase_surveyorperson_id').show(); }}document.observe('dom:loaded', function() { companySelected(); $('kase_appointedsurveyor_id').observe('change', personSelected));});
dannymcc
You're still calling the companySelected function which doesn't exist. Remove that as you're hiding the field in html. See my edited answer. What else happens, are you seeing the alert?
mark
No such luck :(, updated my question with the updated javascript.
dannymcc
You still have the alert in the event listener. Move it into the function as my answer. :)
mark
Sorry Mark, I really am pre-beginner with Javascript could you explain a little further. I don't know my function's from my elbow. EDIT: I have updated my Javascript with here I *think* it should be...
dannymcc
Hey don't worry, I'm not much ahead of you. You have a closing bracket that needs removed: $('kase_appointedsurveyor_id').observe('change', personSelected)remove>>)<<remove; Also if you look at my answer I've added the alert in the personSelected function.
mark
Great thanks, I have updated the javascript. Interestingly/annoyingly - the Hello world doesn't appear anywhere.
dannymcc
With the firebug panel open do any errors come up?
mark
No, none - which is strange! - Scratch that, when I choose the company name the hello world shows, and an error that appointedsurveyor_id = $('company_appointedsurveyor_id').getValue(); is null.
dannymcc
Full Error: `$("company_appointedsurveyor_id") is null``Line 7`
dannymcc
Should be kase_appointedsurveyor_id shouldn't it?
mark
Yeah, I have updated the javascript above. There are now no error, but the Hello world displays twice and then nothing changes.
dannymcc
haha - it's working. I left my original alert in place by accident.
dannymcc
Awesome! Have a good weekend. :D
mark
D'oh - just realised it's outputting the company_id number for the people not their name :S
dannymcc
If you inspect the javascript which is being generated you should see where/whether the name is in the array. person[0]/person[1]/person[2]
mark
Just checked, it definitely is: ` people.push(new Array(1, 'Person A', 1));` - is it possible to show the name rather than the company_id associated with the person? Every combination I try doesnt work.
dannymcc
I don't know which order you should be putting these in but:options[options.length] = new Option(person[1], person[0]); Should be ok? You'll also need to check the value if this does work, if it's wrong then it should be Option(person[1], person[2]).
mark
That fixed it - if you ever want to get married give me a shout because I L-O-V-E you!
dannymcc
Dear Friend , I'm very happy to meet you, my name is Glory and i am single . I know that God have his own way of bringing people together.I was moved to write to you and also seek your advice of which i know that it helps me to overcome my present situation,I'm presently single and searching for a trusted and God fearing person. My dearest,In your free time, may it please you to write me back so that i can explain more about myself,my details,my pictures and my purpose of writing to you. [email protected] May God bless you as i wait impatiently to read from you. Yours Glory. :D
mark
A: 

Try observe_field. http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper.html#M002183

Jagira
There is not point in writing so much code when you have a feature available. DRY!!!
Jagira