Rails jQuery pageless problem - javascript

Here's the deal,
I'm trying to solve why pageless (infinite scroll) isn't rendering. Using this jQuery Plugin
I have my index page of products with pagination by will_paginate:
def index
#products = Product.find(:all, :order => "position DESC").paginate(:per_page => 3, :page => params[:page])
if request.xhr?
render :partial => 'shared/products', :object => #products
end
end
My index page is calling the products partial
<%= render "shared/products", :object => #products %>
Which in turn is passing the collection onto a singular product partial
<%= render 'shared/product', :collection => #products %>
And calling pageless on it if javascript is enabled (otherwise will_paginate steps in.
<%= pageless(#products.total_pages, products_path) %>
-----------
def pageless(total_pages, url=nil, container=nil)
opts = {
:totalPages => total_pages,
:url => url,
:loaderMsg => 'Loading more results'
}
container && opts[:container] ||= container
javascript_tag("$('#results').pageless(#{opts.to_json});")
end
And finally here is the code for the singular product partial
<% #products.each do |product| %>
<li id="product_<%= product.id %>">
<%= link_to product_image(product), product %>
</li>
<% end %>
Now when I load the page, there are no js errors, I can see the pages getting loaded in my server logs and yet nothing is rendering. Everything seems to work perfectly and yet it doesn't render. Any help would be appreciated.
-Scott

The products weren't being appended to the html. Turned out to be a class/id issue in the html. For anyone trying to debug something similar, see Jonathan Tran's comment on the question.

i changed few things to make it work for rails3:
index.html.erb
<%= render :partial => 'blah/fooPartial' , :locals => { :foo => #foo} %>
<%= will_paginate(#foo) %>
<%= pageless(#foo.total_pages, #path ) %>
My FooController:
def index
#foo = Foo.paginate(:page => params[:page], :per_page => 10).
order("created_at DESC")
respond_to do |format|
format.js
format.html # index.html.erb
end
end
My index.js.erb
$('.row').last().after("<%= escape_javascript( render :partial => 'blah/fooPartial' , :locals => { :foo => #foo}).html_safe %>");
Also Changed the ajax datatype at the very end from 'html' to 'script' in jquery.pageless.js as suggested by ahuang
Hope this helps!!!cheers!!!

Related

Rails: What is wrong with this logic of trying to render a parial on click?

I'm trying to get the activities when the user clicks on a button called display
Controller:
def display
#activities = Activity.all
#activities = Activity.order("created_at desc")
#we will need to find the Post id Through Users relation to the Comments
#And this is because Activity Track, tracks Users actions, it breaks down from there.
#posts = Post.all
#user_comments = UserComment.all
respond_to do |format|
format.js { #activities = Activity.order("created_at desc") }
end
View:
<%= link_to "Display", activities_path, :remote => true %>
<div id="notify" class="section-link">
</div>
display.js.erb
$('#notify').append("<%= escape_javascript(render :partial => 'layouts/activity') %>");
_activity.html.erb
<% #activities.each do |activity| %>
<%= ActivityPresenter.new(activity, self).render_activity %>
<% end %>
Try this in display.js.erb:
$('#notify').append('<%= escape_javascript(render :partial => 'layouts/activity', :collection => #activities) %>');
Then, try this in _activity.html.erb:
<%= ActivityPresenter.new(activity, self).render_activity %>
To ensure that whenever the user clicks on "Display' the display action is invoked, you will need to adjust your routes.rb file, which is located in the config directory. You could do something like this in routes.rb:
get '/activities/display', 'activities#display', as: :activity_display
Once you make that change in routes.rb, you can edit your link_to like this:
<%= link_to "Display", activity_display_path, :remote => true %>

Rails controller and javascript

So I have a form that adds codes to an appointment in rails. There are 2 types of codes, regular codes that get added straight to the apt and wildcard codes that return a list of codes that contain the query (ex. 800* returns anything with 800 in it).
What I need to do is have any regular codes get added to the appointment and return the appointment page if no wildcard codes are selected. If wildcard codes are selected, I need to render a partial that toggleslides out with the search results. If both wildcard and regular codes are selected I need the toggleslide but also have the regular codes updated on the codes table on the page.
The problem I'm having is when just regular codes are selected, the toggleslide is still being called and populated with the appointment page in it.
I have the form that does this set to remote and in a js file I have the ajax response do the toggleslide and populate it with the response. Is there a way to override the ajax response in the controller and just redirect to the appointment page if no wildcard codes are selected?
Or is there a better way to do all this? I tried using a js template but keep getting a 406 error. Or I fix the 406 error by removing any respond_to calls but the toggleslide doesn't get called.
In my js file in my assets.
$(document).ready(function() {
$("#custom_codes_form_1").on("ajax:success", function(e, data, status, xhr) {
$('#my_lists_modal_1').hide();
$('#search_code_results').html(data);
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('#search_code_results').show('blind', {direction: "left"});
});
return false;
});
In my controller. #all_codes is the list of codes returned on a search query.
This is in the add_code_list_codes method:
if !#all_codes.nil?
render :partial => "/encounter/code_search_results", :content_type => 'text/html', :locals => {:codes => #codes, :apt => #apt, :all_codes => #all_codes, :diagnoses_search => true, :type => #type}
else
respond_to do |format|
format.html {redirect_to encounter_show_path(:id => #apt.id)}
end
end
Here's the form.
<%= form_tag({:controller => :encounter, :action => :add_code_list_codes, :id => #apt.id}, :class => 'form-horizontal', :id => "custom_codes_form_#{cl.id}", :remote => true ) do %>
<% CodeType.by_name.all.each do |ct| %>
<h4 class="small_bottom_margin"><%= ct.display_name %></h4>
<div class="control-group">
<% cl.code_list_items.all_by_code_type(ct.id).each do |cc| %>
<%= label_tag :codes, :class => 'checkbox' do %>
<% if cc.code %>
<%= check_box_tag 'codes[]', cc.id %> <strong><%= cc.code.code %></strong> - <%= cc.name_override ? cc.name_override : cc.code.name %>
<% else %>
<%= check_box_tag 'codes[]', cc.id %> <strong><%= cc.search_criteria %></strong> - Wildcard
<% end %>
<% end %>
<% end %>
</div>
<% end %>
<%= submit_tag("Add Selected Charges", :class => 'btn', 'data-disable-with' => "Adding Charges") %>
<% end %>

Ajax/Rails Nested Comments

I have an application where book_comments belongs_to books.
My routes file :
resources :books do
resources :book_comments
end
I have a book_comment form on show.html.erb for books.
def show
#book = Book.find(params[:id])
#new_book_comment = #book.book_comments.build
end
I'm using ajax to post the book_comments to the book show page via a partial: _book_comment_form.html.erb :
<%= form_for([#book, #new_book_comment], remote: :true) do |f| %>
<div class="field" style="margin-top:60px;">
<%= f.text_area :comment, rows: 3 %>
<%= f.submit "Add Comment" %>
</div>
<% end %>
When #new_book_comment is called it refers to a book_comments_controller create action:
def create
#book = Book.find(params[:book_id])
#book_comment = current_user.book_comments.build(params[:book_comment]) do |f|
f.book_id = #book.id
end
if #book_comment.save
respond_to do |format|
format.html { redirect_to #book }
format.js { render :layout => false }
end
end
end
The book_comment is saved but my problem comes in when trying to render via ajax in the _book_comments partial:
<div id="comments">
<% #book_comments.each do |book_comment| %>
<%= render 'comment', :book_comment => comment %>
</div>
<% end %>
</div>
via: create.js.erb in the book_comments folder
$("div#comments").append("<%= escape_javascript(render('books/comment'))%>")
To sum, I'm having trouble making the create.js.erb in book_comments render to the book show page. Why wouldn't create.js.erb in the book_comments folder know to look at the objects in the and infer the new book comment should go inside the div?
My error message:
undefined method `comment' for nil:NilClass
don't understnd why. Seeing that I'm passing the instance variable to the comment partial.
Your partial's doing it wrong. You're passing a not referenced value (comment) to a not used variable (book_comment).
Instead of:
<% #book_comments.each do |book_comment| %>
<%= render 'comment', :book_comment => comment %> ....
you should do:
<% #book_comments.each do |book_comment| %>
<%= render 'comment', :comment => book_comment %>

Unable to render more than one line using Rails and Prototype

I'm having a really odd problem (which usually means I'm doing something wrong) with rails 3.0.5 and prototype. I'm using link_to to update a div:
*views/results/index.html.erb
<%= link_to "#{school[:name]}", {:controller => "results", :action => "update", :school => school}, :remote => true%>
This calls the controller function update:
*controllers/results_controller.rb
def update
#selection = params[:school]
respond_to do |format|
format.html {redirect_to :action => 'index'}
format.js
end
end
Which renders update.js.erb ('selected' is a div in index.html.erb):
*views/results/update.js.erb
$("selected").update("<%= render :partial => '/results/academics', :locals => { :selection => #selection } %>")
Here's where it gets strange. If my partial academics.html.erb includes just one line of plain text, it works just fine. For example:
*views/results/academics.html.erb
<%= selection[:chances] %>
works fine. but if i have more than one line, it doesn't. For example:
*views/results/academics.html.erb
<%= selection[:chances] %>
<br>
Renders nothing. Server still responds with 200 OK, but div doesn't change.
What am I doing wrong?
escape_javascript is what you need
$("selected").update("<%= escape_javascript(render :partial => '/results/academics', :locals => { :selection => #selection }) %>")

submit two ajax forms on single page using rails

I have to separate forms on my page that are similar in that I create a comment via ajax with each.
Not functioning quite right as they are both using the same create.js.erb file.
How would I separate them so that they only render the appropriate jQuery code?
Index:
Form #1
<% form_for(#snapshot_comment, :html => { :class => "snapshot_comment", :id => "snapshot_comment" } do |f| %>
Some stuff
<% end %>
<ol id="snapshot_comments_collection">
Append stuff here...
</ol>
Form #2
<% form_for(#photo_comment, :html => { :class => "section-photo-comments", :id => "section-photo-comments" } do |f| %>
Some stuff
<% end %>
<ol id="comments-collection">
Append stuff here...
</ol>
Controller:
# POST /comments
# POST /comments.json
def create
#comment = current_user.comments.build(params[:comment])
#comment.commentable.authorize(params[:auth_key])
unauthorized! unless can? :create, #comment
if #comment.save
respond_to do |format|
format.html { redirect_to(request.headers["Referer"]) }
format.js
format.json {
render :json => #comment, :status => :created, :location => #comment
}
end
else
redirect_to(request.headers["Referer"])
end
end
Create.js.erb:
$j("<%= escape_javascript(render(:partial => #comment)) %>").prependTo("#snapshot_comments_collection");
$j('#snapshot_comment')[0].reset();
$j("<%= escape_javascript(render(:partial => #comment)) %>").prependTo("#comments-collection");
$j('#section-photo-comments')[0].reset();
You should be able to just use $() but I fail to see any use of :remote => true for your forms? Do paste the log of your rails (dev) server.

Categories

Resources