title: Rails.ajax data not being passed to controller
body: <p>Using Rails 5.2.4, coffee-rails 4.2, jquery-rails 4.4.0, jquery-ui-rails 6.0.1</p>
  <p>I have some divs that users can drag around and resize, this functions beautifully. The catch is after they are done moving the object, I want to save the new value of where it is on the page based on percentages. I've got the math and everything worked out. The problem is submitting the data via a Rails.ajax call from my coffee script. Everything seems to send fine except the data that I define. Here's what I have in place:</p>
  <pre><code>&lt;div class=&quot;selector ui-draggable ui-draggable-handle ui-resizable&quot; style=&quot;position: absolute; width: 200px; height: 25px; top: 0; left: 0;&quot; id=&quot;67745394-df31-4231-85b6-db0cff13c4ea&quot; data-url=&quot;/documents/0a910275-5432-4c4e-a22d-dc1b4f70b958/versions/11095c90-087d-4723-ad9d-602f97b9954f/pages/82c4602b-0b7a-4238-a59f-f96bd5acb5df/form_fields/67745394-df31-4231-85b6-db0cff13c4ea&quot;&gt;
     &lt;div class=&quot;ui-resizable-handle ui-resizable-n&quot; style=&quot;z-index: 90;&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;ui-resizable-handle ui-resizable-e&quot; style=&quot;z-index: 90;&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;ui-resizable-handle ui-resizable-s&quot; style=&quot;z-index: 90;&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;ui-resizable-handle ui-resizable-w&quot; style=&quot;z-index: 90;&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;ui-resizable-handle ui-resizable-ne&quot; style=&quot;z-index: 90;&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;ui-resizable-handle ui-resizable-nw&quot; style=&quot;z-index: 90;&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se&quot; style=&quot;z-index: 90;&quot;&gt;&lt;/div&gt;
     &lt;div class=&quot;ui-resizable-handle ui-resizable-sw&quot; style=&quot;z-index: 90;&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is the coffeescript that I am using to handle moving/resizing the divs, and then the function being called after the top events for each of those.</p>
  <pre><code>document.addEventListener 'turbolinks:load', -&gt;
    $('.selector').draggable()
    $('.selector').resizable handles: 'n, e, s, w, ne, nw, se, sw'
  
    $('.selector').on 'resizestop', (event, ui) -&gt;
      sizing($(this))
      return
    $('.selector').on 'dragstop', (event, ui) -&gt;
      sizing($(this))
      return
    return
  
  sizing = (div) -&gt;
    oh = $('#form-layer').height()
    ow = $('#form-layer').width()
    height = (div.height() / oh * 100)
    width = (div.width() / ow * 100)
    left = (div.position().left / ow * 100)
    top = (div.position().top / oh * 100)
    Rails.ajax
      type: 'PATCH'
      dataType: 'script'
      accept: 'script'
      url: div.data('url')
      data:
        x: left
        y: top
        w: width
        h: height
  </code></pre>
  <p>The issue is that I'm not getting any of the data objects passed through into the controllers params, which come through as this:</p>
  <pre><code>{&quot;controller&quot;=&gt;&quot;form_fields&quot;, &quot;action&quot;=&gt;&quot;update&quot;, &quot;document_id&quot;=&gt;&quot;0a910275-5432-4c4e-a22d-dc1b4f70b958&quot;, &quot;version_id&quot;=&gt;&quot;11095c90-087d-4723-ad9d-602f97b9954f&quot;, &quot;page_id&quot;=&gt;&quot;82c4602b-0b7a-4238-a59f-f96bd5acb5df&quot;, &quot;id&quot;=&gt;&quot;67745394-df31-4231-85b6-db0cff13c4ea&quot;}
  </code></pre>
  <p>I assume it has something to do with the formatting of the data block, but I've tried several different attempts but can't seem to find the right way to get any data. If I pass through the following I get some result, but nothing useful, anything I put after the hello is not passed.</p>
  <pre><code>...
      data:
        'hello'
  </code></pre>
  <p>I get</p>
  <pre><code>{&quot;hello&quot;=&gt;nil, controller&quot;=&gt;&quot;form_fields&quot;,...
  </code></pre>