Rails Dev environment with Javascript and Ajax

Question

There's something I definitely don't understand going on in the background in dev.

I have an app which I've been developing locally on my Mac, and it has a form which makes an Ajax call "remote: true". It stopped working, no Ajax call, nothing in the logs.

The only way I could get it to start working again was to edit my _form.html.erb partial by adding a second input field (identical to the original, straight copy and paste). Refresh the page, then it worked. I've unedited my original edit, so the code is back to where it originally was (when it was not working), but now it's working.

What does the edit cause to happen? Is there someway I can cause it to happen without editing my code?

Thanks.

My form is (the text_field_tag is what I copied and pasted)

  <div id="friend-lookup">
  <h3>Search for friends</h3>
  <%= form_tag search_friends_path, remote: true, method: :get, id: 'friend-lookup-form' do %>
    <div class="form-group row no-padding text-center col-md-12">
      <div class="col-md-10">
        <%= text_field_tag :search_param, params[:search_param], 
                                    placeholder: "first name, last name or email", autofocus: true,
                                    class: 'form-control search-box input-lg' %>
      </div>
      <div class="col-md-2">
        <%= button_tag(type: :submit, class: "btn btn-lg btn-success") do %>
          <i class="fa fa-search"></i> Look up a friend
        <% end %>
      </div>
    </div> <!--- form-group -->
  <% end %>
  <%= render 'common/spinner' %>
  <% if @users %>
    <% if @users.size > 0 %>
      <div id="friend-lookup-results" class="well results-block col-md-10">
        <table class="search-results-table col-md-12">
          <tbody>
            <% @users.each do |user| %>
            <tr>
              <td><strong>Name:</strong> <%= user.full_name %></td>
              <td><strong>Email:</strong> <%= user.email %></td>
              <td><strong>Profile:</strong> <%= link_to "View Profile", user_path(user),
                                                        class: "btn btn-xs btn-success" %>
                <% if current_user.not_friends_with?(user.id) %>
                  <%= link_to "Add as my friend", add_friend_path(user: current_user, friend: user),
                                                    class: "btn btn-xs btn-success", method: :post %>
                <% else %>
                  <span class="label label-primary">
                    You are friends
                  </span>
                <% end %>
              </td>
            </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% else %>
      <p class="lead col-md-12">
        No people match this search criteria
      </p>
    <% end %>
  <% end %>
  <div id="friend-lookup-errors"></div>
</div>

And the javascript is

# assets/javascript/friends.js

var init_friend_lookup;

init_friend_lookup = function() {
  $('#friend-lookup-form').on('ajax:before', function(event, data, status){
    $('#friend-lookup-results').replaceWith(' ');
    show_spinner();
  });

  $('#friend-lookup-form').on('ajax:after', function(event, data, status){
    hide_spinner();
  });

  $('#friend-lookup-form').on('ajax:success', function(event, data,status){
    $('#friend-lookup').replaceWith(data);
    init_friend_lookup();
  });

  $('#friend-lookup-form').on('ajax:error', function(event, xhr, status, error){
    hide_spinner();
    $('#friend-lookup-results').replaceWith(' ');
    $('#friend-lookup-errors').replaceWith('Person was not found.');
  });
}

$(document).ready(function() {
  init_friend_lookup();
});

Answer 1

You may be used to installing JavaScript behavior in response to the window.onload, DOMContentLoaded, or jQuery ready events. With Turbolinks, these events will fire only in response to the initial page load—not after any subsequent page changes.

Change the "ready" event for 'turbolinks:load', and repeat the same step with you all events.

$(document).on('turbolinks:load', function () {
    init_friend_lookup();
});

Read the documentation, https://github.com/turbolinks/turbolinks

Answer 2

Maybe this will help someone out there.

I am running Rails 5.

What was tricky was that it seemed intermittent.

My problem seems to be turbolinks related. Removing turbolinks , in javascript/application.js

//= require turbolinks

seems to have fixed the problem consistently.