使用Javascript和Ajax的Rails Dev环境

时间:2017-06-24 16:08:42

标签: javascript jquery ruby-on-rails ajax

在开发的背景中,我肯定不明白这一点。

我有一个应用程序,我一直在我的Mac上本地开发,它有一个表单,使Ajax调用“远程:真”。它停止工作,没有Ajax调用,日志中没有任何内容。

我能让它重新开始工作的唯一方法是通过添加第二个输入字段(与原始,直接复制和粘贴相同)来编辑我的_form.html.erb部分。刷新页面,然后它工作。我没有编辑我原来的编辑,所以代码回到原来的位置(当它不工作时),但现在它正在工作。

编辑会导致什么?有没有我可以在没有编辑代码的情况下发生这种情况?

感谢。

-----编辑添加代码-----

我的表单是(text_field_tag是我复制和粘贴的内容)

  <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>

javascript是

# 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();
});

2 个答案:

答案 0 :(得分:1)

您可能习惯于安装JavaScript行为以响应window.onload,DOMContentLoaded或jQuery ready事件。使用Turbolinks,这些事件只会响应初始页面加载而不会在任何后续页面更改后触发。

更改'turbolinks:load'的“ready”事件,并对所有事件重复相同步骤。

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

阅读文档https://github.com/turbolinks/turbolinks

答案 1 :(得分:0)

也许这会帮助那些人。

我正在运行Rails 5。

有点棘手的是它似乎是断断续续的。

我的问题似乎与 turbolinks 有关。在 javascript / application.js

中删除 turbolinks
  

// =需要turbolinks

似乎已经一致地解决了这个问题。