Ruby on rails not loading Javascript

Question

I had this working, but must have made a minor change somewhere that's stopped it working.

I have a call to Javascript when clicking on a button, but when I click the button nothing loads. I've gone over all parts of the code multiple times but cannot see where the failure is happening and there's no feedback in the logs so I have nothing to go on.

As I said it was working previously, but then stopped.

This is my button:

            <%= button_tag t(".change"), class: "btn let-admin-change",
              data: { title: t(".confirm_switch"),
                      cancel: t(".cancel"),
                      cta: t(".confirm_cta"),
                      plot: plot.id } %>

And my javascript file:

(function (document, $) {
  'use strict'

  $(document).on('click', '.let-admin-change', function (event) {
    var dataIn = $(this).data()

    var $changeContainer = $('.change-admin-letting-form')

    $('body').append($changeContainer)
    var $form = $('.edit_plot')

    $changeContainer.dialog({
      show: 'show',
      modal: true,
      width: 700,
      title: dataIn.title,
      buttons: [
        {
          text: dataIn.cancel,
          class: 'btn',
          click: function () {
            $(this).dialog('destroy')
          }
        },
        {
          text: dataIn.cta,
          class: 'btn-send btn',
          id: 'btn_submit',
          click: function () {

            $.ajax({
              url: '/plots/' + dataIn.plot,
              data: $form.serialize(),
              type: 'PUT'
            })

            $(this).dialog('destroy')
            $changeContainer.hide()
          }
        }]
    }).prev().find('.ui-dialog-titlebar-close').hide() // Hide the standard close button
  })

})(document, window.jQuery)

And the form it's calling:

<div class="change-admin-letting-form">
  <%= simple_form_for plot, url: phase_lettings_path(@phase), remote: true do |f| %>
    <div>
      <%= f.hidden_field :letter_type, value: :homeowner %>
      <%= f.hidden_field :letable_type, value: :planet_rent %>
    </div>
    <div>
      <h3><%= t(".are_you_sure", plot: plot) %></h3>
      <p><%= t(".confirm_admin_swap").html_safe %></p>
    </div>
  <% end %>
</div>

Can anyone see where this is going wrong to stop the javascript from loading?

EDIT

If I add

 <%= render "change_admin_letting_form", plot: plot %>

underneath the button then the form loads (but it loads multiple forms - one form for each instance of the button / each plot on the page), so I assume the issue is that the plot information is not being passed to the form? I'm not sure how to pass this information across.

Answer 1

I've managed to get this working by doing the following to get the correct information to the form:

I've changed the class of the form to take a variable:

<div class="hidden <%= plot_id %>">

And send the variable to the form by rendering the form from inside the block that loads each plot:

<% plots.each do |plot| %>
  // some omitted code
  <%= button_tag t(".change"), class: "btn let-admin-change",
     data: { title: t(".confirm_switch"),
     cancel: t(".cancel"),
     cta: t(".confirm_cta"),
     plot: plot.id } %>
  <%= render "change_letter_type_form", plot_id: "change_letting_plot_#{plot.id}", plot: plot %>
<% end %>

And changed the part of the javascript that loads the form to search for the new plot-based class:

var $changeContainer = $('.change_letting_plot_' + dataIn.plot)

So now only the one form relevant to the selected plot loads, and the form works as required.

I have next to zero experience with javascript, so this probably isn't the 'proper' way to get this to work, but it works so I'll take it as it is.