How do I use the Quicksand jQuery plugin with a Rails AJAX request?
Question
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.
1 answers
solution1
0 ACCPTED 2012-04-19 08:23:41
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.