4下拉菜单，根据选择更新每个菜单，然后再搜索

Question

I am creating a cinema application in Ruby on Rails and am currently working on the bookings.

What I am trying to do is implement a search so that a user can search for a free seat, select that seat, and then book that seat for a film's showing.

To do this, I want to implement 4 drop down menus: films, showings, screens and seats. But the difficulty is that what I want is the drop down menus to be dynamic and update themselves based on the previous selection, so when a user selects a film, the showing drop down only shows showings for that film, when the showing is selected the screen drop down only shows the screen that showing is in, and then the screen drop down menu is used so that the seats drop down only shows seats that are in that screen.

I have so far enabled the user to search for a screen and then when they click search the seats available are shown on the seats/index.html.erb.

This was done using the partial _booking_lookup.html.erb:

<%= form_tag my_path, :method=>'post', :multipart => true do %>

<%= select_tag ('screen_id'), 
    options_from_collection_for_select(@screens, :id, :screens_info, 0 ),
    :prompt => "Screen" %> 


<%= submit_tag 'Search' %>
<% end %>

Which is displayed on the layouts/application.html.erb:

<%= render(:partial => '/booking_lookup', :locals=> {:film => @films = Film.all, :showings => @showings = Showing.all, :screens => @screens = Screen.all, :seats => @seats = Seat.all, :my_path => '/seats/display_seats_by_screen' }) %>

And links to the display_seats_by_screen in the seats_controller:

    def display_seats_by_screen
    @seats = Seat.screen_search(params[:screen_id])
    if @seats.empty?
        # assign a warning message to the flash hash to be displayed in
        # the div "feedback-top"
        flash.now[:alert] = "There are no films of that genre."
        # return all products, in alphabetical order
        @seats = Seat.all
    end
    render :action => "index"
end

Which uses the screen_search in the seat.rb model:

def self.screen_search(search_string)
    self.where("screen_id = ?", search_string)
end

So essentially for the above before the user selects the screen they should have selected a showing and before that a film so that only screens for that showing are shown so they can select an appropriate seat.

The models associations: film:

has_many :showings
belongs_to :certificate
belongs_to :category

showing:

belongs_to :film
has_many :bookings
belongs_to :screen

screen:

has_many :seats

seat:

belongs_to :screen
has_many :bookings

Can anyone help?

Answer 1

Here's an example jsfiddle :

It works on the first one, It's not dynamic though. html:

<p>films</p>
<div data-film1='["showing1_value","showing2_value"]' data-film2='["showing3_value","showing4_value"]'> 
    <select name="user[films]" id="films" class="select"><option value=""></option>
        <option value="film1">transformers</option>
        <option value="film2">the hangover</option>
    </select>
</div>   
<p>showing</p>    
<div data-showing1='["screen1_value","screen2_value"]' data-showing2='["screen3_value","screen4_value"]'> 
    <select name="user[showing]" id="showing" class="select">
        <option value=""></option>
        <option value="showing1_value">showing1</option>
        <option value="showing2_value">showing2</option> 
        <option value="showing3_value">showing3</option> 
        <option value="showing4_value">showing4</option> 
</select>
</div>

js:

 $('#films').change(function(){

     if ($("#films").val() == "film1"){
         //you can get this films shows:
         alert (   $("#films").parent().data("film1")   );
         //now you need to ajust the showing dropdown according: something like this:
         $("#showing").html('<option value=""></option>');

         $.each( $("#films").parent().data("film1"), function( index, show ){
            $("#showing").append('<option value="' + show + '">' + show + '</option>');
         });
     }    
});

Since the js only apply to this current page, I wouldn't put it in application.js (where it would be includes on every page), I would put it on the relevant page- since it only apply that page.

On the server side you would need to set the data attributes of course.

What I did was put each film's showings, as data attributes , and then when the user, selected that film, I used that film's attributes- which contains that film's relevant showings, to create the next dropdown, as seen here

Now for the rails part:

In this page controller action, You will have something like this:

#now it doesn't matter how you do it, you can choose your own way
#but eventually you need like seen here, only that it includes all the films,
#and for each film all his showings.

@films = Film.all

@film_data_attributes_string = ""

@films.each do |film|
  film_str = "data-#{film.title}="                   #this should give: data-tranformers=
  part_two_1 = "'[\""                                  #this should give '[\"


  film_showings_array = film.showings                          #this will give the film's showins. since film has_many :showings, 
  showings_array_names = film_showings_array.map(&:name)       #this will give an array of the showing's titles
  part_two_2 = showings_array_names.join('","')                #this should give a string:    showing3_value","showing4_value




  part_two_3 = "\"]'"                                  #this should give "]'

  @film_data_attributes_string << film_str + part_two_1 + part_two_2 + part_two_3 + " "

  #all together:          data-tranformers='["showing1_value","showing2_value"]' 
  #notice there is a space in the end
end

this will give you (more or less) the data attributes of the films . It's not tested, but that's the main idea. assuming both your films and showings have an attributes called "name". (of course it would be better to move all that functionality to the film model and not use that in controller)

Then in the view, you will use @film_data_attributes_string of course, maybe you will need to use html escape or something, not sure.

Or you can use this answer

and use this instead:

@data_hash = {}
@films.each do |film|
  @data_hash["data-#{film.title}"] = film.showings.map(&:name).to_json
end

You will need to do something similar for the java script.