1

I would like to capture participant names in a web form. On page load the quantity field is set to 1 by default and one name entry field renders. When a user changes the number in the name entry field, I would like the new number to be passed to the controller action to render n.times name entry fields, where n corresponds to the number in the quantity field.

Coffeescript

ready = ->
  $('#quantity-select').change ->
    qty = document.getElementById('quantity-select').value
    $.ajax
      complete: (request) ->
      data: { quantity: qty }
      console.log(qty)
    return
  return  
$(document).ready(ready)

Controller

def show
  @item = Item.find(params[:id])
  @order = Order.new
  @order_item = @order.order_items.build
  if params[:quantity].present?
    @n = params[:quantity]
    puts "received #{@n}"
  else
    @n = 1
    puts "not received"
  end  
  @n.to_i.times {@order_item.participants.build}
end

By using puts in the controller action I can confirm that the controller receives the value from the quantity field. The problem is that when the value of @n changes the site does not refresh and no additional name entry fields appear. How do I get the site to reload the with the name entry field?

mr. jman
  • 121
  • 3
  • 15
  • Is that the real indentation in your CoffeeScript? – mu is too short Oct 19 '16 at 19:57
  • The indentation matches my code. `console.log(qty)` prints the correct quantity value to the console. – mr. jman Oct 19 '16 at 19:59
  • I don't think you need to make a server call to generate the `n` forms for you. You could simply have a hidden form that is copied (a template in other words) and then appended to the page `n` times. I posted an answer about this solution back in 2013: http://stackoverflow.com/questions/16919711/multiple-non-nested-model-creation-on-same-page/16920211#16920211 – MrYoshiji Oct 19 '16 at 20:36
  • So you really mean to say `$.ajax({complete: ..., data: ...}, console.log(qty))`? You don't want to do anything in the `complete` handler? You really want to try to pass `console.log`'s return value as a second argument to `$.ajax`? – mu is too short Oct 19 '16 at 20:41
  • The `console.log` is just a line to test the code. This line will be removed in production. I would like to pass the quantity via `data: { quantity: qty }` to the controller. In the controller I would like to reset `@n` to the latest quantity. When `@n` is reset I would like to generate `@n.to_i.times` build fields for participants. Ideally through an asynchronous load of that portion of the form. – mr. jman Oct 19 '16 at 20:46
  • @MrYoshiji I was passing the value to the controller, because in the future I would like to run some validations to enforce quantity limits that vary by item. So lets say some items may only have one participants, others 5 and others have no limit. My thought was that it would be better to carry out this type of validation through the controller action. – mr. jman Oct 19 '16 at 20:57

0 Answers0