2

Railsバージョン:3.2.1

Rubyバージョン:1.9.3p125

ブラウザ:Chrome 18.0.1025.162

開発OS:Mac OS / X Lion

サーバーOS:CentOS 5

link_to呼び出しで:remoteを使用して、AJAXを使用してHTMLコンテンツを要求し、ページのセクションに返されたコンテンツを入力できるようにしようとしています。

Railsがリンクを正しく配線していないようです。ブラウザはリンクを通常のリンクタグとして認識し、RailsUJSクリックイベントハンドラーを処理していないように見えます。

動作しているデータ確認に関連付けられたリンクがあるので、これは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" %>

RoRによって生成された出力:

<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 /:task_id/notesコントローラーコードは次のとおりです。

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

2 に答える 2

2

さて、私はそれを理解しました。

関連する:remoteリンクについてこの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>

:remoteリンクは、IDが「list-item-expander」のDIV内にあります。この行には、その下の現在のアイテムの詳細を展開するonclickイベントがありました。インタラクションを管理したJSコードは次のとおりです。

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

どうやらevt.stopPropation()は、:remoteリンクのクリックイベントがUJSによって処理されるイベントチェーン内で十分に高くバブルアップすることを許可していませんでした。:remoteリンクに関連する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クリックがバブルアップすることが許可されます。

于 2012-04-18T04:31:47.147 に答える
0

rails.jsapplication.js / application.coffee javascriptアセットパッケージャーに含まれていますか?そうでない場合。それ以外の場合は、独自にjavascript/coffeeスクリプトでイベントハンドラーを作成する必要があります。

また、このコードは少し汚いようです。index.js.erbコードは、少なくとも$(document).ready(function(){/ HERE /});にラップされている必要があります。

ノートコントローラでのインデックスアクションは、表示、検索、フィルタリングを行っています。それ以上に私は期待します:)

Rails3.2のajax/リモートのものについて http://guides.rubyonrails.org/ajax_on_rails.html

于 2012-04-16T23:20:37.763 に答える