Ajax (pjax) pagination breaks after other ajax request - ruby-on-rails

I am using pjax for main navigation and pagination (kaminari). Within the page I make ajax calls to change the state to some of the items on the page. The ajax call updates a partial which contains the pagination. The problem is that after an ajax request, the pjaxified pagination breaks. Instead of showing the links to the next/previous pages, all the links in the pagination is now the same as the last ajax call.
Here's the template being called after the ajax request, toggle_state.js.erb:
$("#link-list").html("<%= escape_javascript(render 'links') %>")
Here's the partial 'links', being rendered after the ajax call:
<%= render #links %>
<%= paginate #links %>

Forcing some of the parameters set by the ajax request to nil made it work:
<%= paginate #links, :params => {:controller => 'links', :action => 'index', :id => nil, :toggle_to => nil} %>
It kind of makes sense when you think about it, but I also think there must be a more elegant way to do it.

Related

RoR Class vs Instance variables, and relaying a value to partial

I have a controller "mainpage", with a correspondingly named view. The controller creates a #myLocalSuites variable, and the view includes the following line:
<li class="active"><%= link_to "Perforce", :action => 'renderp4', :remote => true, :localSuites => #myLocalSuites %></a></li>
Routing is defined such that clicking this link_to calls renderp4.js.erb to render a partial within the mainpage view:
$('#MainPage').replaceWith('<%= escape_javascript render "perforce_sync/perforceSync" %>')
where _perforceSync partial includes:
<%= select_tag "perforceSuites", options_for_select(*MYOPTIONSVARIABLE*), {:class => 'form-control', :size => "20", :multiple => true} %>
Where *MYOPTIONSVARIABLE* needs to be myLocalSuites as cascaded down from the mainpage view/controller.
Having tried everything I can think of, and failed - can someone please show how to modify the above snippets to use the required variable in the PerforceSync partial? Everything I've tried seems to produce something along the lines of:
ActionView::Template::Error (undefined method `map' for nil:NilClass):
An example of what I've tried. I don't think I'm a million miles off, but...
<li class="active"><%= link_to "Perforce", :action => 'renderp4', :remote => true, :localSuites => #myLocalSuites %></a></li>
$('#MainPage').replaceWith('<%= escape_javascript render "perforce_sync/perforceSync", :suitesLocally => params[:localSuites]%>')
<%= select_tag "perforceSuites", options_for_select(params[:suitesLocally]), {:class => 'form-control', :size => "20", :multiple => true} %>
Thanks! :)
In response to your comment, there are two things you can do here. One way is to simply render some dynamic JS on page load, and then use javascript to show that data at a later point.
If this data however is to depend on user actions after the page has loaded, you must make another request to the server using AJAX.
The first way might look like this:
<script>
var my_data = "<%= #some_data %>";
//#some_data could be set by the controller action for example
$('button').click(function() {
$('div.content_container').text(my_data);
});
</script>
The second way would look like this:
<script>
$('button').click(function() {
$.ajax({
url: '/some_resource/id.json',
data: {param1: 'some_user_data'}
}).done(function(data) {
$('div.content_container').text(data);
});
});
</script>
The data option for the ajax call allows you to pass parameters back to the server, so you can send some data provided by the client. Documentation for jquery ajax is here if you want to see other options.
The .done callback gets fired when the client receives a response from the server, and the function parameter is the data returned.

Update page with AJAX on link click

I'm making a Debt management app and I have #opened_debts and #all_debts (opened and returned debts) in my controller.
By default I load only #opened_debts on page. But also I have a link for showing all debts on a page.
Show all debts
I want page to reload debts_div with #all_debts after clicking this link.
If I make a <script> tag with click event in the bottom of a page to load it with
$('#debts_div).replaceWith('<%= j render #all_debts %>');
Rails in fact renders all debts and make them invisible for user until he click the link. But it makes page loading slower with all this huge script.
Can I load this list without rendering it on a page until user clicks link?
Thanks in advance!
use rails_ujs
<%= link_to "Show all depts", model_path(), :remote => true %>
then your request will be sent as ajax. create a view for js with
_index.html
<div>some code</div>
inside index.html.erb to make DRY
<%= render :partial => 'index.html' %>
index.js.erb to make DRY
$('#debts_div).replaceWith('<%= j( render :partial => 'index', :format => :html ) %>');
that should work

rails form_tag does not submit

I have the following form for posting data using Ajax.
<%= form_tag(check_answer_path, :id =>'myForm', :method => 'post', :remote => true) do %>
some form fields here...
<%= submit_tag('Next', :class => 'btn btn-primary') %></td>
But the form does not submit when I click on the Next button. To my surprise when I remove the :id and :remote attributes the form submits with no problem(but the page reloads which i do not want).
GOAL: I want to submit the form using ajaxForm() to handle the call back i.e $("#myForm").ajaxForm(). So I need the :remote attribute and I also need to identify my form(using the :id attribute).
Why is my form not submitting when I include :id and :remote attributes?
Am using rails 3.2.8 and jquery-rails.
Thanks in advance.
Adding remote to the form tag means that it's going to send the request using JS.
So it's actually submitting the form but it's not submitting it in the expected way.
In your controller add the following:
respond_to do |format|
format.js
format.html
end
and you will be able to respond to that request place a file.js.erb in your views and place the needed js code to complete the request.
Hope that helps.

Ruby on Rails 3: AJAX call not refreshing div with link_to

I am new to Ruby on Rails and i am working through a few example applications in the O'Reilly Head First Rails book. In one of the examples there is a page made up of three partials. The middle partial is a list of items. There is a link right below this section that, when clicked, should refresh the div containing that partial. The book is running examples based off of Rails 2.3 i believe and i am using Rails 3.1. This is the example that the book is giving me:
routes.rb:
map.connect '/flights/:flight_id/seats', :action=>'flight_seats', :controller=>'seats'
seats_controller.rb:
def flight_seats
#flight = Flight.find(params[:flight_id])
render :partial => "flights/seat_list", :locals => {:seats => #flight.seats}
end
show.html.erb:
<div id="seats">
<%= render :partial=>"seat_list". :locals=>{:seats=>#flight.seats} %>
</div>
<$= link_to_remote("Refresh Seats", :url=>"/flights/#{#flight.id}/seats", method=>"get", :update=>"seats") %>
This example is also using prototype.js since that's what Rails 2.3 came with built in. Rails 3 has jQuery as the default JavaScript library. (not sure if that makes a big difference)
Here is what i have so far. This is getting the contents of the partial correctly, it's just not updating the "seats" div after the AJAX call gets the partial. My code:
routes.rb:
match 'flights/:flight_id/seats' => 'seats#flights_seats'
seats_controller.rb:
def flights_seats
#flight = Flight.find(params[:flight_id])
render :partial => "flights/seat_list", :locals => { :seats => #flight.seats }
end
show.html.erb:
<div id="seats">
<%= render :partial => 'seat_list', :locals => { :seats => #flight.seats } %>
</div>
<%= link_to "Refresh Seats", "/flights/#{#flight.id}/seats", :remote => true %>
Any idea why my <div id="seats"> won't refresh with the updated partial? I'm betting there is but i'll ask anyway, is something wrong with my code?
The :remote => true option is a bit weird if you aren't returning JSON data. You can wrap your HTML in a JSON object, though, which is what I typically do. Or if you want something closer to your existing code something like this should work for you:
<%= link_to "Refresh Seats", "/flights/#{#flight.id}/seats", :class => "refresh-seats" %>
In your javascript somewhere:
$(document).delegate(".refresh-seats", "click", function(e){
e.preventDefault();
$("#seats").load(this.href);
});

Replace will_paginate links after ajax call

I'm working on a Ruby on Rails aplicattion, my problem is that I have all the comments of a post paginated and showed perfectly, but when an user saves a new comment via ajax, and I replace all the content with the partial with the new content(including the will_paginate #comments), the urls of the links change to the url of the action that saves the comments and i don't know how to do to make them link correctly.
I tried with <%= will_paginate #comments, :params => {:controller => 'posts', :action => 'show_outside_comments' %>
But I get the same results.
Thank you very much for your help!
Have you looked into the ajax methods described here?
http://railscasts.com/episodes/174-pagination-with-ajax
you can execute javascript code to update the links,
something like:
<div class="paging_links" >
<%= will_paginate #comments, :params => {:controller => 'posts', :action => 'show_outside_comments' %>
</div>
<script type="text/javascript">
jQuery('.paging_links a').click(function(event){
href = jQuery(this).attr('href');
event.preventDefault();
// update href here
})
</script>
$('.pagination a').attr('href', function() {
$(this).prop('href').replace('/comments', location.pathname);
});
Assuming you want to replace `/comments' with the current pathname.

Resources