Question

I’m quite new to jQuery so this may be a "Seriously, dude?" type of question but I’ve got the following situation:

dri = $('#drink_restaurant_id :selected').val()

$('#drink_restaurant_id').change ->
  restaurant = $('#drink_restaurant_id :selected').text()
  ...

I’d like to have it so that the application checks for both, a .change on the #drink_restaurant_id ID field or whether dri has a value/is valid.

I’ve tried things like:

$('#drink_restaurant_id').change -> || if dri

if dri || $('#drink_restaurant_id').change ->

(if dri) || ($('#drink_restaurant_id').change ->)

and all sort of other permutations but keep getting an error message on my site.

Whats the best way to combine both these checks so I don’t have to retype the code for both instances?

Clarification and Code

I created all this following the RailsCast on Dynamic Select Menus

The program works fine when you go to a new create page BUT if you go to edit an existing record the Restaurant field (#drink_restaurant_id) is already selected but the Size (drink_size_ids) and Ingredients (drink_ingredient_ids) fields are not filtered based upon the Restaurant field. To fix this, I’d have to select another Restaurant from the drop-down then reselect the original to have the filters kick-in for Size and Restaurant.

One work around I found by myself was to check whether the Restaurant field has a value by doing:

dri = $('#drink_restaurant_id :selected').val()

And if dri has a value, do everything the same as when someone selects a Restaurant from the drop-down and triggers the .change action.

So right now, my code looks like this. Notice the duplication of code just because I want to check two separate things.

jQuery ->
  $('.chzn-select').chosen()
  
  sizes = $('#drink_size_ids').html()
  ingredients = $('#drink_ingredient_ids').html()
  
  # Empty out size and ingredients dropdown
  $('#drink_size_ids').html(null).trigger "liszt:updated"
  $('#drink_ingredient_ids').html(null).trigger "liszt:updated"
  
  # When 'editing', will see if restaurant is already selected
  dri = $('#drink_restaurant_id :selected').val()
  
  $('#drink_restaurant_id').change ->
    restaurant = $('#drink_restaurant_id :selected').text()
    size_options = $(sizes).filter("optgroup[label='#{restaurant}']").html()    
    ingredient_options = $(ingredients).filter("optgroup[label='#{restaurant}']").html()    
    if size_options
      $('#drink_size_ids').html(size_options).trigger "liszt:updated"
    else
      $('#drink_size_ids').html($("<option>").attr('selected',true)).trigger "liszt:updated"
      
    if ingredient_options
      $('#drink_ingredient_ids').html(ingredient_options).trigger "liszt:updated"
    else
      $('#drink_ingredient_ids').html($("<option>").attr('selected',true)).trigger "liszt:updated"
      
  if dri
    restaurant = $('#drink_restaurant_id :selected').text()
    size_options = $(sizes).filter("optgroup[label='#{restaurant}']").html()    
    ingredient_options = $(ingredients).filter("optgroup[label='#{restaurant}']").html()    
    if size_options
      $('#drink_size_ids').html(size_options).trigger "liszt:updated"
    else
      $('#drink_size_ids').html($("<option>").attr('selected',true)).trigger "liszt:updated"
      
    if ingredient_options
      $('#drink_ingredient_ids').html(ingredient_options).trigger "liszt:updated"
    else
      $('#drink_ingredient_ids').html($("<option>").attr('selected',true)).trigger "liszt:updated"

Answer 1

The solution to your problem seems to be a function in a variable:

# Create a variable that contains a function
updateFields = ->
    restaurant = $('#drink_restaurant_id :selected').text()
    size_options = $(sizes).filter("optgroup[label='#{restaurant}']").html()
    ...    

# Now add this function as the event handler
$('#drink_restaurant_id').change updateFields

# And call it manually if that is indicated
updateFields() if dri