1

In my Rails 4 app I'm trying to change three text fields on an edit form when a select dropdown option has changed. Using CoffeeScript 1.7.1/Rails 4.0.2/Ruby 2.1.0.

My Coffeescript file:

$(document).ready ->

    new_item = (items_array, item) ->
        for si of items_array
            if items_array[si][3] is item
                new_studio_item = items_array[si]
                return new_studio_item

    $('#pk_item_studio_item_id').change ->
        old_item = $('#pk_item_starting_item').val()
        studio_item = $('#pk_item_studio_item_id').val()
        unless old_item == studio_item
            studio_items = $('#pk_item_studio_items').val()
            [name, description, price, id] = new_item studio_items, studio_item
            document.getElementById("pk_item_custom_name").value = name
            document.getElementById("pk_item_custom_description").value = description
            document.getElementById("pk_item_lab_price").value = price
            return

Nothing is being assigned from the 'new_item' function on this line:

[name, description, price, id] = new_item studio_items, studio_item

Yet in coffee's REPL, this line does return values for name, description, price and id. I've tried Firefox, Chrome and Safari, and get the same results: the text field values remain unchanged.

Hopefully there's something obviously wrong with my code. Any ideas what I need to change? I'll gladly provide more code details if necessary (view/controller/etc.), just didn't want to turn this into a TLDR unnecessarily.

Update: This code returns my array to the form in a test field:

    ready = ->

        $('#pk_item_studio_item_id').change ->
            old_item = $('#pk_item_starting_item').val()
            studio_item = $('#pk_item_studio_item_id').val()
            unless old_item == studio_item
                studio_items = $('#pk_item_studio_items').val()
                document.getElementById("test_input").value = studio_items
                return

    $(document).ready(ready)
    $(document).on('page:load', ready)

This is the array returned:

[["Custom Name for Item 0", "Custom description of item 0", "1.1", 1], ["Custom Name for Item 1", "Custom description of item 1", "1.1", 2], ... (etc., etc.) ..., ["Custom Name for Item 39", "Custom description of item 39", "1.1", 40]]

But when the new_item function (see my first code block above) is coded to return items_array by changing the last line to return items_array, I get ,,,,,,,,,,,,,,, (etc.) returned instead of the same array as above. So I'm doing something wrong in either the way I'm sending the array to the function, or how the function is handling the array.

digijim
  • 676
  • 2
  • 9
  • 20
  • Sorry if you read the comment I've erased. Just forget it. On the other hand, shouldn't `change` function be out of `$(document).ready`? – Ruby Racer Jul 02 '14 at 21:59
  • Tried that just now, (removed `$(document).ready` line), no luck. Still getting same (lack of) results. – digijim Jul 02 '14 at 22:07
  • BTW, when I test to make sure the change event can in fact change a text field, it works. If I set one of the text fields to some arbitrary text, the text field changes when I select a new value from the dropdown. So I know the event is firing, and running the code. It's just not returning the result of `new_item` to the array I'm trying to assign it to. Perhaps it's not running the `new_item` function at all. – digijim Jul 02 '14 at 22:13

2 Answers2

0

Replace $(document).ready -> by jQuery ->, it's the correct coffeescript syntax

Benjamin Bouchet
  • 12,971
  • 2
  • 41
  • 73
  • I'm using [jquery.turbolinks](http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links/18834209#18834209), which should be making `$(document).ready ->` work as expected, as far as I understand. – digijim Jul 03 '14 at 14:16
0

I was going about this the wrong way. Several wrong ways, actually.

I was loading the array of studio_items into a hidden field on the form, which rendered it as a string, not an array. The strange behavior I was seeing stemmed from treating the string like an array. Big duh for me, there! Also, I realized that collecting the studio_items into a hash instead of an array made the process of getting the right studio_item a no-brainer.

And, as you may have noticed in the update to my question, thanks to this post, I'm now listening for the page:load event in addition to page:ready, since turbolinks will circumvent the load event.

Here's the final version of my coffeescript:

getStudioItems = (callback) ->
    studio = $('#pk_item_studio_id').val()
    url = "/pk_items/collect_studio_items?studio=#{studio}"
    $.getJSON url, callback
    return

ready = ->

    $('#pk_item_studio_item_id').change ->
        old_studio_item_id = $('#pk_item_starting_item').val()
        selected_studio_item_id = $('#pk_item_studio_item_id').val()
        unless old_studio_item_id == selected_studio_item_id
            getStudioItems (studio_items) ->
                new_item = studio_items[selected_studio_item_id]
                document.getElementById("pk_item_custom_name").value = new_item[0]
                document.getElementById("pk_item_custom_description").value = new_item[1]
                document.getElementById("pk_item_lab_price").value = new_item[2]
                document.getElementById("test_input").value = new_item
                return

$(document).ready(ready)
$(document).on('page:load', ready)

The hash being loaded via $.getJSON looks like this (with each key being the :id of the studio_item, and the value being an array of the name, description, and price needed to populate the form):

{1=>["Custom Name for Item 0", "Custom description of item 0", #<BigDecimal:103b383b0,'0.11E1',18(18)>], 2=>["Custom Name for Item 1", "Custom description of item 1", #<BigDecimal:103b33f40,'0.11E1',18(18)>], (etc.)...

This made it easy to extract the needed array of studio_item data via it's key:

new_item = studio_items[selected_studio_item_id]
Community
  • 1
  • 1
digijim
  • 676
  • 2
  • 9
  • 20