Rails & Ajax / Async loading partial

Question

I have the following working very nicely, loading a partial on click of a link. I'm having trouble however modifying this so that the partial loads on document ready or similar. I basically want to load my slow loading partials asynchronously. Can anyone point me in the right direction please? I feel like it's probably a small modification to make this happen.

#ProductsController
def show_territories  
  respond_to do | format |  
    format.js {render :layout => false}  
  end
end

#products/show.html.erb
<%= link_to 'Show Territories', show_territories_product_path(:id => @product.id),  :remote => true %>
<div id="spinner" class="spinner"><%= image_tag("ajax-loader-2.gif") %></div>
<div id="territories" class="tab-contents"></div>

#products/show_territories.js.erb
$( "#territories" ).html( "<%= escape_javascript( render( :partial => "territories") ) %>" );

#products/_territories.html.erb
<!--- partial view code goes here --->


#custom.js
$(function(){
// hide it first
$("#spinner").hide();

// when an ajax request starts, show spinner
$(document).ajaxStart(function(){
    $("#spinner").show();
});

// when an ajax request complets, hide spinner    
$(document).ajaxStop(function(){
    $("#spinner").hide();
});
});

If you have some stuff to load on lot of pages, I advice you to take a look at this very interesting post: paulirish.com/2009/… and the extension: viget.com/inspire/… — MrYoshiji
– MrYoshiji, Commented May 7, 2013 at 15:25

Raindal · Accepted Answer · 2013-05-07 15:21:37Z

3

Well you could simply trigger the partials loading manually by calling click() on them.

<%= link_to 'Show Territories', show_territories_product_path(:id => @product.id), :remote => true, :id => 'territories_link' %>

$(function(){
  // hide it first
  $("#spinner").hide();

  $('#territories_link').click();

  ...
});

answered May 7, 2013 at 15:21

Raindal

3,23717 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Raoot Over a year ago

That's awesome, works perfectly and I can see via Chrome's RailsPanel that i'm getting two processes loading async. My spinner's stopped working though, but i'll figure that out. Thanks!!

Raindal Over a year ago

ok! glad I could help : ) Just FYI, the reason why it loads asynchronously is that javascript "clicks" on the links but does not wait for the response to happen and just continues executing the rest of the code.

Raoot Over a year ago

Yeah it's cool, pretty sure it's exactly what I need. Only thing that concerns me is if my faster loading elements stall for some reason that perhaps loading this before they've finished might hinder their loading. But perhaps not if they're async?

Crystark · Accepted Answer · 2013-10-09 08:07:22Z

1

I've been trying some stuff out based on the code of rails's jquery-ujs (handleRemote method). It seems this works quite nicely and has no need of putting an actual link in the page:

    $(function() {
        var tmpElement = $(document.createElement('a'))
        tmpElement.data('remote',true)
        tmpElement.prop('href', '<%= j show_territories_product_path(id: @product.id) -%>')
        $.rails.handleRemote(tmpElement)
    })

answered Oct 9, 2013 at 8:07

Crystark

4,2867 gold badges47 silver badges63 bronze badges

1 Comment

Matthew Clark Over a year ago

Great trick! Works great, just have to be careful of Turbolinks with it!

Collectives™ on Stack Overflow

Rails & Ajax / Async loading partial

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related