Home/ Questions/Q 7818945
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T06:44:37+00:00

I am trying to use the Quicksand jQuery plugin to decorate the response of

  • 0

I am trying to use the Quicksand jQuery plugin to decorate the response of an AJAX call in Rails:

Link:

<% 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");
};

Controller:

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

View:

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

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>

I think the problem is that the data returned by the AJAX request (see below) is not in the format that Quicksand expects it to be in but I’m not sure how to extrapolate the relevant information from the response. The response from my AJAX request is something like:

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

So, the problem is that it’s using the above code as the destination code for the Quicksand call when it should be using the replacement HTML:

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

The AJAX request works perfectly fine, but I need to integrate Quicksand into here.

I need:

  • a better way to do this or;
  • a way to extrapolate the argument for replaceWith() in the aforementioned code to use as the destination code for Quicksand.

If I’ve omitted any information you think you need to help, please ask.

This is the first question I’ve asked on Stack Overflow so I feel obligated to apologise for any misusage.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If anyone runs into a similar issue, the following worked for me in Chrome, Firefox, IE9, IE8 and IE7.

    Link:

    <% 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");
};

    Route:

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

    Controller:

    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

    View: 

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

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