JavascriptとAjaxを使用したRails Dev環境

Question

devのバックグラウンドではわからないことがあります。

私は自分のMacでローカルに開発していたアプリケーションを持っていて、Ajaxに「remote：true」という呼び出しを行うフォームを持っています。それは動作を停止し、Ajaxコールは必要なく、ログには何もありません。

もう一度作業を開始できる唯一の方法は、_form.html.erbパーシャルを2番目の入力フィールド（オリジナルのストレートコピー＆ペーストと同じ）を追加して編集することでした。ページを更新して、それがうまくいった。私はオリジナルの編集を編集していないので、コードは元の場所に戻ります（動作していなかったとき）が、今は動作しています。

編集の原因は何ですか？私のコードを編集しなくても、それが起こる原因はどこかありますか？

ありがとうございました。

----- EDIT追加するコード-----

私のフォームは

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

（text_field_tag私はコピー＆ペーストするものである）であると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(); 
}); 

Answer 1

JavaScriptの動作を、window.onload、DOMContentLoaded、またはjQueryの準備完了イベントに応じてインストールすることができます。ターボリンクでは、これらのイベントは最初のページの読み込みに応答してのみ起動されます。後続のページが変更された後では発生しません。

「turbolinks：load」の「準備完了」イベントを変更し、すべてのイベントで同じ手順を繰り返します。

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

https://github.com/turbolinks/turbolinks

Answer 2

これは誰かを助けるでしょう。

私はトリッキーだった何

レール5を実行していますが、それが断続的に見えたということでした。

私の問題は、turbolinksと関連しています。 turbolinksを削除し、ジャバスクリプトに/

// = turbolinksを必要と

をapplication.js一貫問題を修正しているようです。