導軌UJS（jQuery的）未連接最多數據的遠程鏈接

Question

的Rails版本：3.2.1

紅寶石版本：1.9.3p125

瀏覽器：鉻18.0.1025.162

開發操作系統：Mac OS/X Lion中

服務器操作系統：CentOS 5的

我試圖使用方法：在遠程的link_to我的電話，這樣我可以使用Ajax請求HTML內容，並填充頁面無線的部分返回的內容。

Rails似乎沒有正確連接鏈接。瀏覽器只是將該鏈接看作是一個常規鏈接標記，並且似乎沒有處理任何Rails UJS單擊事件處理程序。

我有一個數據確認鏈接，它與它正在工作，所以這表明UJS正在做至少一些必要的佈線。

我將其他單擊事件偵聽器附加到同一鏈接以隱藏/顯示將顯示AJAX調用返回的HTML的頁面部分。

道歉，如果這張貼在其他地方，但我一直在尋找幾天，並沒有找到解決方案，解決這一特定問題。我見過一些與之相關的文章，但他們都假設正在進行AJAX調用，並且一些Rails導致流或路由問題，在我看來，根本沒有任何連接。

下面是一些代碼：

我在查看鏈接：

<%= link_to image_tag("icons/24x24/attachment.png"), task_notes_path(task), :class => "section-link task-notes-link", :title => "View recent notes", :remote => true, 'data-section' => "task-notes" %> 

的回報率產生的輸出：

<a href="/tasks/7/notes" class="section-link task-notes-link" data-remote="true" data-section="task-notes" title="View recent notes"><img alt="Attachment" src="/assets/icons/24x24/attachment.png"></a> 

這裏的/任務/：TASK_ID /筆記控制器代碼：

def index 
store_return_to 

@project = nil 
@tasks = nil 

if (params.has_key?(:project_id)) 
    @project = Project::find(params[:project_id]) 

    sort = [ 
    { :field => 'status', :direction => 'asc'}, 
    { :field => 'priority', :direction => 'asc' } 
    ] 

    filter = { :status => Task::STATUS_ACTIVE.to_s } 

    @tasks = Task::filter_sort(:project => @project, :sort => sort, :filter => filter, :per_page => 0) 
else 
    @task_sort = params.has_key?(:task_sort) ? params[:task_sort] : { :field => 'priority', :direction => 'asc'} 
    @task_filter = params.has_key?(:task_filter) ? params[:task_filter] : { :status => Task::STATUS_ACTIVE.to_s } 
    @task_search = params.has_key?(:task_search) ? params[:task_search] : "" 

    @tasks = Task::filter_sort(:search => params[:task_search], :sort => @task_sort, :filter => @task_filter, :page => params[:tasks_page], :per_page => 15)  
end 

respond_to do |format| 
    format.html # index.html.erb 
    format.js 
    format.json { render json: @tasks } 
end 
end 

最後，我在index.js.erb的文件代碼：

<% if (!@project.nil?) %> 
    $('#project-<%=@project.id%>-tasks').html('<%= escape_javascript(render(@tasks)) %>'); 
<% else %> 
    $('#project-tasks').html('<%= escape_javascript(render(@tasks)) %>'); 
<% end %> 

Answer 1

好了，所以我想它了。

檢查這個HTML爲相關：遠程鏈接：

<div class="list-item-row"> 
<div class="list-item-expander action-icon"> 
    <a href="#" title="Show/hide content pane"> 
    <%= image_tag "icons/24x24/plus.png", :class => "expander-image closed" %> 
    <%= image_tag "icons/24x24/minus.png", :class => "expander-image opened" %> 
    </a> 
</div><div class="action-icon"> 
    <a href="#" data-section="task-description" class="section-link" title="Show details"><%= image_tag "icons/24x24/page.png" %></a> 
</div><div class="action-icon"> 
    <%= link_to image_tag("icons/24x24/attachment.png"), task_notes_path(task), :class => "section-link task-notes-link", :title => "View recent notes", :remote => true, 'data-section' => "task-notes" %> 
</div><div class="action-icon"> 
    <%=task_image_tag(task, 24)%> 
</div><div class="action-icon"> 
    <div class="task-priority task-priority-<%=task.priority_str.downcase%>" title="<%=task.priority_str%> Priority"></div> 
</div><div class="action-icon"> 
    <% unless (task.assigned_developer.nil?) %><%= link_to image_tag(task.assigned_developer.avatar.icon.url), developer_path(task.assigned_developer), :title => "Assigned to: " + task.assigned_developer.full_name %><%end%> 
</div><div style="width:280px;"> 
    <%=link_to truncate(task.name, :length => 40, :omission => "..."), task_path(task), :title => task.name, :class => "item-show-link" %> 
</div><div style="width:300px;font-size:10px;color:#777;"> 
    <%=truncate(task.description, :length => 50, :omission => "...")%> 
</div><div style="width:90px;float:right;text-align:center;"> 
    <%=task.status_str%> 
</div></div> 

的：遠程鏈接在id爲「列表項，擴展」一個DIV。此行有一個onclick事件，可以擴展當前項目的詳細信息。這裏的JS代碼管理的互動：

elem.find(".list-item .list-item-row").click(function(evt) { 
    evt.stopPropagation(); 
    $.tf.listItem.showHideItem($(this)); 
}); 

顯然，evt.stopPropation（）是不允許的：在事件鏈中遠程鏈接的點擊事件冒泡高到足以通過UJS處理。我通過過濾掉與遠程鏈接相關的srcElements來解決了這個問題。代碼如下：

elem.find(".list-item .list-item-row").click(function(evt) { 
    if ($(evt.srcElement).not('a').not('img').size() > 0) { 
     evt.stopPropagation(); 
     $.tf.listItem.showHideItem($(this)); 
    } 
}); 

通過過濾srcElements，Img/A點擊被允許冒泡。

Answer 2

你有你rails.js納入的application.js/application.coffee JavaScript的資產打包？如果不行的話。否則，您將不得不自己在JavaScript /咖啡腳本中編寫事件處理程序。

此外，這段代碼看起來有點髒。你的index.js.erb代碼應該至少包含在$（document）.ready（function（）{/ HERE /}）中;

您在筆記控制器中執行索引操作，顯示，搜索和過濾。更多的則我希望:)

關於Ajax /遠程的東西在軌3.2 http://guides.rubyonrails.org/ajax_on_rails.html