0

Rails での AJAX 呼び出しの応答を装飾するために、Quicksand jQuery プラグインを使用しようとしています。

リンク：

<% Project.services.each_with_index do |service, index| %>
  <%= link_to_function(service, "regatherProjects('#{service}', #{index})", :id => "service_link_#{index}") %>
  <%= " / " if !index.eql?(Project.services.length - 1) %>
<% end %>

JS:

function regatherProjects(service_name, service_id) {
  $.get("/index_project_update", { service: service_name }, function(data) {
    $('#home_projects').quicksand($(data), {
      adjustHeight: 'dynamic'
    });
  });
  $('#home_services').find('a').removeClass("on");
  $('#service_link_' + service_id).addClass("on");
};

コントローラ：

def index_project_update
  if params[:service] && !params[:service].blank?
    @projects = Project.highlighted.where(:service => params[:service])
  else
    @projects = Project.highlighted
  end
end

意見：

$("#home_projects").replaceWith("<%= j(render('projects')) %>")

プロジェクト:

<div id="home_projects">
  <% if @projects.empty? %>
    <p>No projects. <%= link_to_function("View All", "regatherProjects('')") %>.</p>
  <% else %>
   <ul class="all_projects">
     <% @projects.each_with_index do |project, index| %>
       <li data-id="<%= project.customer.name.underscore.downcase %>_<%= project.name.underscore.downcase %>">
       <%= link_to(image_tag(project.project_images.first.image.home), project) %>
       </li>
     <% end %>
   </ul>
  <% end %>
</div>

問題は、AJAX リクエスト (以下を参照) によって返されるデータが、Quicksand が期待する形式ではないことだと思いますが、応答から関連情報を推定する方法がわかりません。私の AJAX リクエストからの応答は次のようなものです。

$("#home_projects").replaceWith("<some><html><that><i><need>")

したがって、問題は、置換 HTML を使用する必要がある場合に、Quicksand 呼び出しの宛先コードとして上記のコードを使用していることです。

<some><html><that><i><need>

AJAX リクエストは問題なく機能しますが、Quicksand をここに統合する必要があります。

私は欲しい：

  • これを行うためのより良い方法または;
  • 前述のコードの replaceWith() の引数を外挿して、Quicksand の宛先コードとして使用する方法。

助けが必要だと思われる情報が省略されている場合は、お問い合わせください。

これは私が Stack Overflow で尋ねた最初の質問なので、誤用について謝罪する義務があると感じています。

4

1 に答える 1

0

誰かが同様の問題に遭遇した場合、Chrome、Firefox、IE9、IE8、および IE7 で次のことがうまくいきました。

リンク：

<% Project.services.each_with_index do |service, index| %>
  <%= link_to_function(service, "regatherProjects('#{service}', #{index})", :id => "service_link_#{index}") %>
  <%= " / " if !index.eql?(Project.services.length - 1) %>
<% end %>

JS:

function regatherProjects(service_name, service_id) {
  $.get("/index_project_update.html", { service: service_name }, function(data) {
    $('.all_projects').quicksand($(data).find('li'), {
      adjustHeight: 'dynamic'
    });
  });
  $('#home_services').find('a').removeClass("on");
  $('#service_link_' + service_id).addClass("on");
};

ルート：

match '/index_project_update' => 'application#index_project_update', :defaults => { :format => 'html' }

コントローラ：

def index_project_update
  if params[:service] && !params[:service].blank?
    @projects = Project.highlighted.where(:service => params[:service])
  else
    @projects = Project.highlighted
  end
  render :layout => false
end

意見：

<%= render('application/index/projects') %>

プロジェクト:

<div id="home_projects">
  <% if @projects.empty? %>
    <ul class="all_projects">
      <li data-id="project">No projects. <%= link_to_function("View All", "regatherProjects('')") %>.</li>
    </ul>
  <% else %>
    <ul class="all_projects">
      <% @projects.each_with_index do |project, index| %>
         <li data-id="project_<%= project.id %>">
           <%= link_to(image_tag(project.project_images.first.image.home, :alt => (project.customer.name + " - " + project.name), :title => (project.customer.name + " - " + project.name)), project) %>
         </li>
      <% end %>
    </ul>
  <% end %>
</div>
于 2012-04-19T08:23:41.580 に答える