rails ajax pagination with partials - ruby-on-rails

I am using the will paginate gem for pagination. Things wok fine for me.I am trying to ajaxify it and I followed the http://railscasts.com/episodes/240-search-sort-paginate-with-ajax tutorial. But Ajax request is not being fired for me.
I have a index view. The view renders a partial called "_browser_form" which in turn renders a partial called "_listing". So I wanted to paginate the table in the _listing.
Please let me know if there is any error in my approach.
My controller:
def index
#ics = Ic.search(params[:root_name],params[:suite_name],params[:case_name],params[:name],'f').paginate(:per_page =>5, :page => params[:all_ics])
respond_to do |format|
format.html # index.html.erb
format.xml { render :xml => #ics }
end
end
My _browser_form.html.haml which is rendered from index.html.haml
- form_tag "/ics/mass_action", :method => :post, :multipart => true do
<div id="update_ics_table">
= render "listing", :show_check_boxes => show_check_boxes, :root_name=>params[:root_name],:suite_name=>params[:suite_name],:case_name=>params[:case_name],:name=>params[:name],:ic_filter=>1
</div>
=will_paginate #ics,:param_name=>:all_ics
My index.js.erb file:
$('#update_ics_table').html("<%= escape_javascript(render :partial => 'listing' ,:object => #ics) %>")
My .js file:
$(function () {
$('#update_ics_table .pagination a').live('click',
function () {
$.getScript(this.href);
return false;
}
);
});
Thanks,
Ramya.

Remove what you're doing in the Javascript and do this in the controller:
format.js {
render :update do |page|
page.replace 'listing', :partial => 'listing'
end
}
Similar: Best way to get will_paginate working with Ajax

It might have something to do with the fact that you're using HAML views and an js.erb file, but I don't use HAML so I can't be certain. Have a look at nex3's answer at this SO: How to send back js.haml in rails
If that is not the case, I think you need to change your respond_to controller action block to this:
respond_to do |format|
format.html # index.html.erb
format.xml { render :xml => #ics }
format.js #<------ This will execute index.js.erb
end

Related

Why is application.html.erb being called on a js response?

In my Rails app I have a Ajax call to update a property:
def add_properties
#conversation = Conversation.update(params[:conversationId], :points=> => params[:conversation][:points])
respond_to do |format|
format.js { render :partial => "add_properties" }
end
end
And my _add_properties.js.erb is simple:
$('#ajaxFeedback').html('Property updated').show().fadeOut(4000);
What I am finding is that the call to the partial is choking due to some JQuery UI declarations in my application.html.erb. When I remove the declarations, all works well. How can I simply render the partial without calling the application.html.erb?
Any help would be appreciated!
Have you tried?
format.js { render :layout => false, :partial => "add_properties" }
Why not just rename that to add_properties.js.erb
call
respond_to do |format|
format.js
end

multiple partial in jquery ajax rails 3.2

How to update multiple partial through ajax in rails 3.2
Here i did my ajax request
$.ajax({
url: "/home/create_entry",
type: "POST",
data: params,
cache: false,
success: function(data) {
$('#'+did).html(data);
// $("#results").html('<%#=j render(:partial => 'explorer', :locals => {:entries => #entries, :entry_count=> #entry_count}) %>');
}
});
In controller written
def create_entry
if request.xhr?
#entry = Entry.new
#entry.title = params[:title]
respond_to do |format|
if #entry.save
flash[:notice] = "Entry created successfully"
#entry = Entry.last
#entries = Entry.where(:user_id => current_user.id).order(sort_column + ' ' + sort_direction)
#entry_count = #entries.count
format.js
end
end
end
And in create_entry.js.erb
<%= render :partial => 'edit_entry_form', :locals => {:entry => #entry}%>
<%= render :partial => 'explorer', :locals => {:entries => #entries}%>
Now i can able to get both data, How can i update both partial after success of ajax request ?
Thanks in advance.
You should look at using jQuery to dynamically insert the contents of these two partials into the areas of the page you want to update. Something like:
$("#divforedit_entry_form").html("<%= escape_javascript(render 'edit_entry_form' :locals => {:entry => #entry})%>");
$("#divforexplorer").html("<%= escape_javascript(render 'explorer' :locals => {:entries => #entries})%>");
First off we need to correct your AJAX call as we don't need to have the server response added onto the page only evaluated (which in Rails happens by default).
Javascript
$.ajax({
url: "/home/create_entry",
type: "POST",
data: params,
cache: false
});
Now we update the controller to perform the logic and get any required data to correctly render the partials.
Controller
def create_entry
if request.xhr?
# Create entry
respond_to do |format|
if #entry.save
# Collect any data needed for view
format.js
end
end
end
end
Now in the view we use jQuery and the Rails javascript helper to replace/insert the partials into the HTML document.
View (create_entry.js.erb)
$("#edit_entry_form").replaceWith("<%= j(render('edit_entry_form', :entry => #entry)) %>");
$("#explorer").replaceWith("<%= j(render('explorer', :entries => #entries)) %>");
The above presumes that the HTML IDs #edit_entry_form and #explorer exist.

ruby on rails render partial inside a json array

I am trying to render a partial for the ajax request but i can't find how to do it using Ruby on Rails...
here what my array variable
#return = { :error => false, :response => "Added", :partial => ... }
render :json => ActiveSupport::JSON.encode( #return )
where ... is where the partial(html) should be...
the method name is add_item, its controller is items and i have created an add_item.html.erb file inside the items folder which has the HTML i want to pass to the array and use jQuery to add it to the DOM
i guess this could be done using
render :partial => "partial", :object => #object
but how can i add this into the array above?
Solution:
#return = { :error => false, :response => "Added", :partial => render_to_string(:partial => "partial/path", :object => #object) }
The way I do what I think you're trying to do is to fire an ajax message at add_item, and then in add_item have:
def add_item
respond_to do |format|
format.js
end
end
and make an add_item.js.erb with the jQuery contents:
$('#div-for-code').html('<%= escape_javascript(render :partial => "mypartial") %>');
not sure that it's the best way but it's worked for me.

my .js.erb file is not being called

In my rails application I am trying to access pagination via an ajax call. I am triggering a script via index.js.erb file. The control doesn't go to that file. Please help
My controller:
def index
ics_per_page=params[:ics_per_page]||5
ics_per_page=ics_per_page.to_i
#ics = Ic.search(params[:root_name],params[:suite_name],params[:case_name],params[:name],'f').paginate(:per_page =>ics_per_page, :page => params[:all_ics])
respond_to do |format|
format.js
format.html # index.html.erb
format.xml { render :xml => #ics }
end
end
My index.js.erb file:
console.log("inside index.js.erb");
$('#listing').html('<%= escape_javascript(render("listing")) %>');
Thanks,
Ramya.
Could you check again. I think the file index.js.erb is rendered but the content is not executed because of a wrong content type. set the content type to specify that it is javascript.
format.js { render :content_type => 'text/javascript' }

Is there an AJAX function that can just GET a rails partial?

My controller is shared by links from a search result page that needs a layout, and from the profile page itself that does not need a layout. What I would like to accomplish is a single controller method show that is both capable of drawing the partial by AJAX from the profile page, and draw the partial and layout from the search results.
The most important restriction I have is that I can not set the dataType: to script . It has to be html . So I can't use that spiffy AJAX script call that renders the JS without the controller's format.html getting involved.
tabs_controller.js
def show
#organization = Organization.find(params[:organization_id])
#tab = #organization.tabs.find(params[:id])
respond_to do |format|
format.html { render :partial => 'tab', :layout => 'myHQpage' }
format.js
end
end
javascript
$.get($(this).attr('href'), null, null, "html");
show.html.haml
= render :partial => 'tab'
What AJAX function can I use here that just draws the partial, and not the entire layout?
I'm not sure to really understand but this may help you.
Yo can add a :layout => false to the format.js block.
def show
#organization = Organization.find(params[:organization_id])
#tab = #organization.tabs.find(params[:id])
respond_to do |format|
format.html { render :partial => 'tab', :layout => 'myHQpage' }
format.js { render :partial => 'tab', :layout => false }
end
end
Keep the 'script' dataType setting and just add a wrappertag around your search results. Then use the jQuery replaceWith function to replace the content of that tag:
_tag.html.erb:
<div id="search">
...
</div>
show.js.erb:
$('#search').replaceWith('<%= escape_javascript(render "tab") %>');

Resources