頁面加載與JavaScript上的紅寶石JavaScript問題應用程序

Question

背景：我正在創建一個可以創建維基的用戶的維基克隆。用戶還可以添加同行用戶貢獻維基的合作者。

我通過單擊鏈接到達該頁面時遇到了JavaScript問題。當我重新加載這個相同的頁面的JavaScript的作品。大多數javascript是用於自動完成搜索功能的，它可以呈現頁面底部與搜索框中輸入的字母匹配的用戶名稱。

在我的功能，我有一個鏈接到它看起來像這樣的編輯＃維基視圖顯示＃維基視圖鏈接：

#views/wikis/show.html.erb 
<%= link_to "Edit", edit_wiki_path(@wiki), class: "btn btn-success" %> 

一旦鏈接被點擊，出現編輯＃維基頁面頁面加載但javascript和ajax調用不起作用。該views/wikis/edit.html.erb頁低於，然而，大部分的AJAX的被使用的代碼的重要組成部分是局部爲在底部的合作者的形式：

：

<h1>Edit Wiki</h1> 

<div class="row"> 
    <div class="col-md-4"> 
    <p>Guidelines for Wikis</p> 
    <ul> 
     <li>Make sure the it rhymes.</li> 
     <li>Don't use the letter "A".</li> 
     <li>The incessant use of hashtags will get you banned.</li> 
    </ul> 
    </div> 
    <div class="col-md-8"> 
    <%= form_for @wiki do |f| %> 
     <div class="form-group"> 
     <%= f.label :title %> 
     <%= f.text_field :title, class: 'form-control', placeholder: "Enter post title" %> 
     </div> 
     <div class="form-group"> 
     <%= f.label :body %> 
     <%= f.text_area :body, rows: 20, class: 'form-control', placeholder: "Enter post body" %> 
     </div> 
     <%if policy(@wiki).edit_form_settings? %> 
     <div class="form-group"> 
      <%= f.label :public, class: 'checkbox' do %> 
      <%= f.check_box :public %> Public wiki 
      <% end %> 
     </div> 
     <% end %> 
     <div class="form-group"> 
     <%= f.submit "Save", class: 'btn btn-success' %> 
     </div> 
    <% end %> 
    </div> 
</div> 
<%if policy(@wiki).edit_form_settings? %> 
<%= render partial: "collaborations/new", locals: { wiki: @wiki, collaboration: @collaboration} %> 
<% end %> 

的形式從views/collaborations/_new.html.erb部分在下面列出

<%= form_for [wiki, collaboration] do |f|%> 

<div class = "col-md-8"> 

    <div class = "form-group"> 
     <%= f.label :user_name %> 
     <%= f.text_field :user_name, class: 'form-control', placeholder: "Enter name" %> 
    </div> 
    <%= f.hidden_field :user_id %> 
    <div class = "form-group"> 
     <%= f.submit class: 'btn btn-success' %> 
    </div> 
    </div> 

    <div id="user_data" class="dropdown"> 
    <ul class="list-group" style= "width:50%"> 
    <!-- <li class="list-group-item">Cras justo odio</li> 
    <li class="list-group-item">Dapibus ac facilisis in</li> 
    <li class="list-group-item">Morbi leo risus</li> 
    <li class="list-group-item">Porta ac consectetur ac</li> 
    <li class="list-group-item">Vestibulum at eros</li> --> 
    </ul> 
</div> 

</div> 

    </div> 

</div> 
<%end%> 

我在assets/javascripts/collaborations.js.erb文件的JavaScript：

$(document).ready(function() 
{ 


    $('#collaboration_user_name').on('keyup', function() { 

     text = $(this).val(); 
     // alert(text); 

     $.ajax({ url: "/collaborations?collaboration="+text, 
     beforeSend: function(xhr) { 
      xhr.overrideMimeType("text/plain; charset=x-user-defined"); 
     } 
     }).done(function(data) { 
     console.log("data:", data); 
     users = JSON.parse(data); 

     $("#user_data ul li").remove(); 
     $.each(users, function(index, value) { 
      $("#user_data ul").append("<li class='list-group-item' value ="+ users[index].id+">"+users[index].name+ ", " +users[index].email+ "</li>"); 
     }); 
     <% @user = "data" %>; 
     $("#user_data").append(JSON.parse(data).name); 
     $(' .list-group-item').click(function() { 
     //alert($(this).val()); 
      $('#collaboration_user_name').val($(this).text().split(",")[0]); 
      $('#collaboration_user_id').val($(this).val()); 
     }); 
    }); 
}); 


}); 

最後的AJAX調用控制器動作collaboration_search在controllers/collaborations_controller.rb：

class CollaborationsController < ApplicationController 
    respond_to :html, :js 
def collaboration_search 
    #name_search = params[:collaboration][:user_name].to_s 
    @users_by_name = User.where('name Like ?', "%#{params[:collaboration]}%").limit(4) 
    puts @users_by_name.to_a 
     render json: @users_by_name 
    end 
end 

我曾試圖消除turbolinks寶石但是這並沒有固定的問題。我將不勝感激任何幫助！

Answer 1

我不是100％確定爲什麼你的JS第一次不工作。可能有很多的罪魁禍首，其中Turbolinks往往是一個很好的初步猜測。但我認爲你可以得到更接近發現這是怎麼回事，試圖以下一些：

• 在你的JS文件拋出一個console.log('in here');，文件準備中的權利。加載時，應打印到Web Inspector控制檯。這將幫助您解碼文件是否正在加載（但未正確運行）或者根本沒有加載。

• 確保沒有任何JS錯誤。這些將在Web檢查員中顯示爲紅色。

• 從JS和ERB的結合方式可能會導致一個錯誤或怪異。一個.js.erb文件通常基本上是一個組合了JavaScript功能的視圖。您通常會將其保存在app/views目錄中，並告訴您的控制器如何處理它。在這種情況下，這看起來像或多或少是一個普通的JS文件 - 在這種情況下，如何包含是對其功能影響最大的問題。你是否將它包含在你的application.js文件中？在layout.html.erb視圖的<head>標記中？其他方式？

關於這個文件的ERBness，值得指出的是，你似乎根本不需要ERB。如果有的話，你對ERB的使用可能會讓事情變得糟糕。唯一的ERB-樣線我看到的是這一個：

<% @user = "data" %>; 

該行採取的Ruby/Rails變量@user和覆蓋它帶有字符串「數據」。這幾乎可以肯定你不想做的事情。 （我不確定它是否會真正影響的變量，因爲你在這裏使用。）

TL;博士 - 我重命名文件.js，確保它包含在application.js，並添加console.log到文件以確保它已被加載，因此您可以確定它是加載問題還是JavaScript問題。另外，檢查JS錯誤，並刪除<% @user = "data" %>行。希望上面的內容能讓你更接近地弄清楚發生了什麼。