Ajax call in rails 3.2.3 with will_paginate gem - ruby-on-rails

Im trying to implement an Ajax call with the will_paginate gem, I found this guide http://ramblinglabs.com/blog/2011/11/rails-3-1-will_paginate-and-ajax which seemed like a simple solution, though it includes coffeescript which i am not familiar with, so if anyone has a different solution then please advise..
My code is as follows
My View
<div class="container">
<div class="row">
<div id="userRecipes">
<%= render partial: 'userrecipes' %>
</div>
</div><!--/row-->
My partial (userrecipes)
<% #recipes.each do |r| %>
<div class="span3">
<div class="thumbnail">
<%= image_tag r.avatar.url(:myrecipes) %>
</div>
<h4><%= link_to r.dish_name, r %></h4>
<hr>
<p><%= truncate r.description, :length => 90 %></p>
<p><%= link_to "Edit Recipe", edit_recipe_path(r.id) %></p>
<p><%= link_to "Delete Recipe", recipe_path(r.id), :confirm => "Are you sure?", :method => :delete %></p>
<p><%= link_to "Add to favorites", {:controller => 'favourites', :action => 'create', :recipe_id => r.id}, {:method => :post } %></p>
</div><!--/span3-->
<% end %>
<%= will_paginate #recipes %>
updated userrecipes.js.erb file
$('#userRecipes').html('<%= escape_javascript(render partial: 'userrecipes') %>');
$.setAjaxPagination();
Coffeescript
$ ->
$.setAjaxPagination = ->
$('.pagination a').click (event) ->
event.preventDefault()
loading = $ '<div id="loading" style="display: none;"><span><img src="/assets/loading.gif" alt="cargando..."/></span></div>'
$('.other_images').prepend loading
loading.fadeIn()
$.ajax type: 'GET', url: $(#).attr('href'), dataType: 'script', success: (-> loading.fadeOut -> loading.remove())
false
$.setAjaxPagination()
When i click on the next anchor tag to show the next set of results the page stays as it is and no new content appears
When using the console to see if there are any errors i can see any, the output is
GET http://localhost:3000/my_recipes?page=2&_=1355055997639
Am i missing something here? or is there an issue with my userrecipes.js.erb file because in other Ajax examples i have seen thy are using escape_javascript when rendering the partial?
Edit
Whilst inspecting the response in the console it is also showing that the new recipes to be loaded are being loaded but nothing is happening in the view
Any pointers appreciated
Thanks

Why not try a simpler approach, create a new helper (ex. app/helpers/will_paginate_helper.rb) with the following content:
module WillPaginateHelper
class WillPaginateJSLinkRenderer < WillPaginate::ActionView::LinkRenderer
def prepare(collection, options, template)
options[:params] ||= {}
options[:params]['_'] = nil
super(collection, options, template)
end
protected
def link(text, target, attributes = {})
if target.is_a? Fixnum
attributes[:rel] = rel_value(target)
target = url(target)
end
#template.link_to(target, attributes.merge(remote: true)) do
text.to_s.html_safe
end
end
end
def js_will_paginate(collection, options = {})
will_paginate(collection, options.merge(:renderer => WillPaginateHelper::WillPaginateJSLinkRenderer))
end
end
Then in your view use this tag for ajax pagination:
<%= js_will_paginate #recipes %>
Remember that the pagination links will include existing params of the url, you can exclude these as shown below. This is standard will paginate functionality:
<%= js_will_paginate #recipes, :params => { :my_excluded_param => nil } %>
Hope that solves your problem.
Explanation:
Will_paginate allows you to create your own custom renderer. The WillPaginateJSLinkRenderer is such a custom renderer and this class could be defined anywhere, it doesn't have to be defined inside the helper module. The custom renderer extends the standard renderer (LinkRenderer) and redefines only two methods.
The prepare method is overriden to explicitly remove the cache buster parameter since will_paginate creates the page urls with all parameters that were present when rendering the page and we do not want to reuse the cache buster parameter.
The link method is a copy paste from the original LinkRenderer source code but creates a link with remote: true to make it a JS resquest.
Finally the js_will_paginate method is a standard view helper method to call the normal will_paginate view helper method but adds our custom renderer to the options so that it will be used instead of the normal renderer.

Just in case someone is looking for Rails 4 solution. I liked the answer from Pierre Pretorius, but it failed for me on 4.1.1 with "method undefined" for link_to_function on the line:
#template.link_to_function(text.to_s.html_safe, ajax_call, attributes)
I just replaced the line to:
#template.link_to(text.to_s.html_safe, '#', attributes.merge(:onclick => "#{ajax_call} event.preventDefault();"))
I hope it may help someone.

You are not escaping javascripts in your js.erb, it should be the problem.
$('#userRecipes').html('<%= escape_javascript(render partial: 'userrecipes') %>');
$.setAjaxPagination();

The ajax_will_paginate is a superb method, but unfortunately it was messing up the UI of the paginate. I had employed another javascript method for more flexibility. And I call this method on pageRender.
function checkForAjaxPaginate(controller,make_ajax){
var href = "";
$(".pagination").find("ul").each(function(){
$(this).find("li").each(function(){
$(this).find("a").each(function(){
href = $(this).attr("href");
if(href.indexOf(controller+".js") != -1){
if(make_ajax){
$(this).attr("data-remote","true");
}
else{
$(this).attr("href",href.replace(".js",""));
}
}
});
});
});
}
For more flexibility, you just pass the action name in the "controller" variable and pass true to make_ajax if you want to convert it to ajax. All I am doing is to check if the href link is ".js", and if make_ajax is true, then adding an attr "data-remote=true", which in our ROR app makes it ajax. if make_ajax is not true then am just removing the ".js" so the code does not mess.
I hope this helps

Pierre Pretorius' answer is great, but I had to do a little more to make it work for me that wasn't already clear. Maybe this will be helpful to other beginners.
In addition to making that helper and using the js_will_paginate tag I did this:
After moving the content I was trying to paginate into a partial (_recipes.html.erb in the case above), I also created a show.js.erb file (in this same view alongside the partial) with text similar to this:
$('#recipes').html('<%= escape_javascript(render partial: 'recipes') %>');
Then I had to move the js_will_paginate tag to the partial as well at the bottom (so it would be updated as I paginated through or clicked next/previous). Then I had to wrap the render partial helper in the div id you're targeting in the js file, so in this example:
<div id="recipes">
<%= render partial: "recipes" %>
</div>
This may have been very clear to others, but I wasn't sure which steps from the OP had to remain and which were unnecessary. These steps worked for me. You don't need to add respond_to js in the controller as the helper takes care of that or have a coffeescript file.

Related

Using a custom tag helper for ruby on rails with a bootstrap navbar

My problem is that I can't get this helper tag to display at all.
So in application_helper.rb I want to have a <% nav_link(name, path) %> tag helper to append bootstrap's .active class dynamically.
My code is the following:
def nav_link(name, path)
content_tag(:li, :class => active_class(path)) do
link_to name, path
end
end
def active_class(path)
(current_page?(path) ? "active" : "").html_safe
end
and I would like to use it like so
<% nav_link("Users", users_path) %>
My hunch is that there's a variable somewhere that's not properly sanitized. How do I fix this? Is the html_safe call necessary?
Unless it's a typo, you should use <%= nav_link("Users", users_path) %>.
Without =, nothing will be displayed
I think that your problem is that you have written <% nav_link(name, path) %> this executes the code but doesn't print anything.
It should be <%= nav_link(name, path) %>
I highly recommend this Gem, it will do exactly what you want.
https://github.com/vigetlabs/nav_lynx
And here is a method it provides:
<%= nav_link_to 'Page', my_path, {}, { :wrapper => 'li' } %>

rails link_to with block, controller options and html post

I am trying to use link_to in rails 4 with controller and html options and a do..end block. I have seen similar posts but have not been able to use any of the answers successfully.
Working code without a do..end block:
<%= link_to 'recommend', { controller: 'recommendations', id: offer.id }, method: :post %>
When I try to use some embedded ruby to add extra information to the link, I cannot get it to work:
<%= link_to( { controller: 'recommendations', id: offer.id }, method: :post) do %>
<p>Some Html</p><%= offer.recommendations %>
<% end %>
The code compiles but in the rendered, the link that is generated is the following:
<a controller="recommendations" id="38">
<p>Some Html</p>0
</a>
Any help would be appreciated. I think that it is a small problem with the syntax but I have tried all manner of brackets, spaces etc that I could think of without luck.
UPDATE: I have tried the following code without success:
<%= link_to( { controller: 'recommendations', action: 'create', id: offer.id }, method: :post) do %>
<p>Some Html</p><%= offer.recommendations %>
<% end %>
The HTML output is:
<a action="create" controller="recommendations" id="39">
<p>Some Html</p>0
</a>
This might not be important but as a side note, the create action doesn't have a helper function for links. When I run the
rake routes
command I get the following
...
recommendations GET /recommendations(.:format) recommendations#index
POST /recommendations(.:format) recommendations#create
new_recommendation GET /recommendations/new(.:format) recommendations#new
...
In my opinion this isn't a problem but it is a reason why code such as:
link_to create_recommendation_path
won't work. Finally, the intention of the link is to act as a 'like' button. It creates a recommendation and then displays the current page again. Once again, thanks for the help in advance.
The reason link_to create_recommendation_path doesn't work is because there is no named route for create_recommendation_path, only for recommendations_path. You can see the named routes in your routes list (which you have in your post above). The left most column that comes out of routes shows the named routes. Notice that recommendations#create doesn't have an entry in the list.
You could probably get the path you want with
<%= link_to recommendations_path(:offer_id => offer.id), :method => :post do %>
html stuff
<% end %>
This should post to a path that looks like
/recommendations?offer_id=<the offer id>
(except the post data will be in the headers not on the URL)
This will work if the create method going to do something like
Recommendation.create(params)
and the only parameter you need to create a new Recommendation is an offer_id
What I don't understand is why you're trying to POST with a link? Does creating a recommendation only require an offer id?
In your link_to you're only specifying a controller, you need to also specify the action otherwise it doesn't know where to route it to. Either use:
<%= link_to({ controller: 'recommendations', action: 'show', id: offer.id }) do %>
<p>Some Html</p><%= offer.recommendations %>
<% end %>
Or
<%= link_to({ show_recommendations_path(id: offer.id) }) do %>
<p>Some Html</p><%= offer.recommendations %>
<% end %>

Kaminari index from both data-remote and html messing with links

I have an index view for a model(nested ) that never gets called from the model, but is rendered from a couple different models. One view can render the index with either JS or html. With JS is it in a #related div in the show view and a data-remote link. Another option uses the same controller action to render it only has html.
All was fine until I added Kaminari paging. In the full page view, there was no #related div so paging didn't work. I broke out the guts into a partial and added a #related div and rendered the partial. From js I just rendered the partial from JS. That worked fine in the full page view, but in the show page it would render the partial, but the links didn't work, looks like it renders the entire show page. Clinking on another tab and then going back to the Progressions tab loads the partial and all works fine. It is just on the initial load of the show page that I can't get the page links to work.
I can load another tab that does not use paging first and solve my problem, but this was kind of the main information that you go to this page for.
Any ideas?
EDIT Request for code
The controller action method. The index method in this controller also sets #progressions
def progressions
authorize! :read, Progression
#stage = Stage.find(params[:id])
#progressions = #stage.progressions_by_score.page(params[:page]).per(20)
if params[:status] && !params[:status].blank? && #progressions
#progressions = #progressions.where(status: params[:status]).page(params[:page]).per(20)
end
respond_to do |format|
format.js
format.html {render :template => "progressions/index"}
end
end
The progressions.js.erb file in the stages view
$("#related").html("<%= escape_javascript(render('progressions/index'))%>");
The relations div in the show view. This is pretty much my scaffold template where I display or link to related information. The <div id="related"> is where any date-remote links will load the data. On initial load it loads the _index partial.
<div class="relations">
<span class="navspan">
<%= link_to 'Progressions: Status ->', progressions_stage_path(#stage), :'data-remote' => true,
:onclick => '$("#progression_status").val("")' %>
<span class="huh">
<%= hidden_field_tag :stage_id, params[:id]%>
<%= select_tag :progression_status, options_for_select(Progression.statuses["all"], params[:status]),
:prompt => 'All', :class => 'f-left' %>
</span>
<%= link_to 'Assessors', assessors_stage_path(#stage), :'data-remote' => true %>
<%= link_to 'Events', events_stage_path(#stage), :'data-remote' => true %>
<%= link_to 'Select', select_stage_path(#stage) if can? :select_candidates, #stage %>
<%= link_to 'Ad Mgmt', edit_ad_stage_path(#stage) if can? :manage_ad, #stage %>
</span>
<div class="f-clear"></div>
<div id="related">
<%= render "progressions/index"%>
</div>
</div>
The index.html.haml file
#related
= render "progressions/index"
The _index.html.haml file is just an index table listing the progressions but it does contain:
= paginate #progressions, :remote => true
Shortly after posting some code, I went back in my memory and used javascript to load the related div. I've tried to stay away from javascript, but in this case I added this to the end of the page after adding :id => "status_id" to the progressions link:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#status_link").trigger("click");
})
</script>
While this fixes my problem, I still don't understand why the initial html response does not respond to the page links in the related div. I'll leave that as something else to learn. I'll put it in coffescript after I figure out how to have fire only on initial load of the show page.

Ajax can't work in Rails 3.1

Base on 'Agile Web Development with Rails, Third Edition', I created a cart with Ajax, but Ajax isn't working for me. My code is as follows:
/store/index.html.erb:
<%= form_tag({:action=>'add_to_cart', :id=>product}, :remote=>true ) do %>
<%= submit_tag "Add to Cart" %>
<% end %>
/layouts/store.html.erb:
<head>
...
<%= javascript_include_tag :defults %>
...
</head>
/controllers/store_controller.rb:
def add_to_cart
...
respond_to do |format|
format.js
end
...
end
add_to_cart.js.rjs
page.replace_html("cart",:partial => "cart", :object=>#cart)
Rails 3.1, Ruby 1.9.3.
js templates are named as name.js.erb in Rails 3.
Let me assume you are going to replace "cart" div in ajax call and you have jQuery.
create add_to_cart.js.erb with the following code.
$("#cart").replaceWith('<%=escape_javascript(render :partial => 'cart', :object=>#cart) %>');
RJS isn't a part of Rails any more. You can use jQuery instead without any additional download required: just don't use the .rjs at the end. If you know CoffeeScript, it's also available here: name your file *.coffee and you are done. Also you can name it *.coffee.erb to allow the ERb to preprocess you file but this feature is allowed by default even for simple *.coffee-files.
UPD:
page.replace_html("cart",:partial => "cart", :object=>#cart)
Should become:
$("#cart").html("<%= j render(#cart) %>")

Rails 3 UJS driver events

According to Simone Carletti blog post, Rails 3 ajax helpers have changed a lot. We are supposed to write more javascript with rails 3 than we used to with rails 2.
I tried to figure out how to show up an ajax loading gif -while an ajax query is running- in the "rails 3 way". I came up with this kind of code, which uses javascript events sent by the Rails 3 UJS driver. This example uses prototype:
<div id="wait" style="display:none">
<img src="/images/ajax-loader.gif"> Please wait...
</div>
<div>
<%= link_to 'Get', 'finished', :id => "mylink", :remote => true %>
</div>
<%= javascript_tag do %>
Event.observe('mylink', 'ajax:before', function(event) {
$('wait').show();
});
Event.observe('mylink', 'ajax:complete', function(event) {
$('wait').hide();
});
<% end %>
This works well, but I wish it was possible to write these ajax events "triggers" with the help of the prototype and scriptaculous helpers, just like when we use link_to_function for example:
<%=
link_to_function("toggle visibility") do |page|
page.toggle "wait"
end
%>
Is there a way to do that, or are we supposed to write ajax events "triggers" in javascript directly, either prototype or jquery?
Best regards,
Philippe Lang
The idea of UJS is to move the javascript code out of the views into separate js files. The way you're doing it is defeating that goal. Instead, I believe you should have a js file with a "dom:loaded" or similar handler that sets up handlers for rails callbacks and other events.
Something like (using prototype):
(function () {
$(document).on('dom:loaded', function (event) {
$$('a[data-remote=true]').each(function (link) {
link.on('ajax:complete', function (request) {
// do something
});
});
});
}());
This way all javascripts are separated from the view, which is the idea of unobtrusive javascript.
After looking at rails source code, I came up with this solution:
def javascript_event_tag(name, event, &block)
content = "Event.observe('#{name}', '#{event}', function() {"
content = content + update_page(&block)
content = content + "});"
content_tag(:script, javascript_cdata_section(content))
end
This makes it easier to react to UJS events:
<div id="wait" style="display:none">
<img src="/images/ajax-loader.gif"> Please wait...
</div>
<%= link_to 'ajax call', 'code_on_controller', :id => "mylink", :remote => true %>
<%=
javascript_event_tag('mylink', 'ajax:before') do |page|
page.show 'wait'
end
%>
<%=
javascript_event_tag('mylink', 'ajax:complete') do |page|
page.hide 'wait'
end
%>
Instead of having to write raw prototype or jquery code, you can use rails helpers.

Resources