Combining jQuery function call and if statement?

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"

Did a new javascript version come out that supports -> or am I missing something? :) — Paolo Bergantino
– Paolo Bergantino, Commented Aug 9, 2012 at 21:55
@Matt: lol! :) I was only half serious, I have never heard of coffeescript. Interesting. — Paolo Bergantino
– Paolo Bergantino, Commented Aug 9, 2012 at 22:00
What you're trying to do doesn't make sense. (Or maybe just the way you explained it doesn't make sense.) In standard JS syntax you can say if (dri || $('...').change(function(){...})) but it doesn't make sense because .change() doesn't check for a change, it assigns an event handler that will be called if and when the field changes. Or are you saying that on change you want to retrieve both the value and the text of the selected option? — nnnnnn
– nnnnnn, Commented Aug 9, 2012 at 22:02
Can you please elaborate on what you're trying to do? Maybe describe what action the user may take and what is supposed to happen then. — Niko
– Niko, Commented Aug 9, 2012 at 22:07

Niko · Accepted Answer · 2012-08-09 22:22:55Z

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

answered Aug 9, 2012 at 22:22

Niko

26.8k9 gold badges97 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Combining jQuery function call and if statement?

Clarification and Code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Clarification and Code

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related