Nested async templates - JS not firing/loading

[chadwtaylor]

The parent async templates are working great (and love the gem, btw)!

Started to have the need for nested async templates and followed the instructions to the T, including the <%= content_for :render_async %> inside the parent async template. JS inspection confirms that the nested asyncs are generated but it's not firing the URL.

Can't help but wonder if it's because the JS is dynamically added by the parent and then not firing because it has been added after page load?

Any insights are greatly appreciated.

[nikolalsvk]

Hey @chadwtaylor, thanks for submitting the issue!

Can't help but wonder if it's because the JS is dynamically added by the parent and then not firing because it has been added after page load?

I think it is, I'll try to reproduce this myself and come up with a fix for it :)

[nikolalsvk]

Now that I'm looking into it, seems like the problem is in the Vanilla JS part. script tag that is returned from parent render_async response doesn't get evaluated in the HTML, thus is not being called.

It's related to this issue #30

As a quick fix, you can turn on the jQuery in your config if you're using it in your project.

I'll try to make this work for Vanilla JS hopefully.

[bundai223]

Hi.
Same problem here.

I tryed some versions.

No Probrem:
render_async: v1.2.0
render_async: v1.3.0

Has Probrem:
render_async: v1.4.0
render_async: v2.0.0

[filipewl]

Hey! Just had a similar problem when I changed from 1.2.0 to 2.0.0 since I was using the jQuery version and in 2.0.0 it became disabled by default. I managed to fix it by just configuring the gem to use jQuery.

It's related to #30 indeed. I had a <script> inside the partial and it just didn't run when added to the DOM, which seems to be the default browser behavior for security reasons. It works with jQuery because it evaluates the inner script tags. There doesn't need to be a simple solution for the vanilla JS part though. :\

[nikolalsvk]

Thanks for commeting @filipewl! You explained the situation really well for loading script tags to the DOM.

To sum up again, if you want to have your nested <script> tags load with render_async, you need to turn on jQuery for now. Or help me fix #30 😄

[kian1213]

Hi, I've been searching for a while on how to solve my issue.
I'm using the 2.1.2
My App is using JQuery and I already enabled it

RenderAsync.configure do |config|
  config.jquery = true # This will render jQuery code, and skip Vanilla JS code
  config.turbolinks = true # Enable this option if you are using Turbolinks 5+
end

This is my scenario:
The page will load let say 200 rows of data,
I want to load it per batch (5 rows per batch)
there will be a checking per row, this is where i use the render_async

index.html.erb

<div id="data-result">
  <% @datas do |data| %>
    <%= render :partial => 'data_partial', locals: {data: data} %>
  <% end %>
<div>

# When clicked, it should repond to js format
<%= link_to same_path(page: (@page + 1)), remote: true do %>
  Get More Data 
<% end %>

index.js.erb

<% @datas do |data| %>
  $("#search-results").append("<%= j render :partial => 'data_partial', locals: {data: data} %>")
<% end %>

_data_partial.html.erb

<div >
  <%= render_async check_data_path(data: data) do %>
    checking...
  <% end %>
</div>

The initial load is ok (for the first batch). But when I click the Get More Data button, partial was appended but the it was stuck in the placeholder. It does not go back to the controller path to check and eventually update the row.

I referred to #75 conversation, I though it was my same case. But it seems not.

Any help will be much appreciated. Thanks!

[nikolalsvk]

Hey @kian1213, thanks for submitting the comment to this issue. Also, thank you for detailed explanation on what are you trying to do, and why you think it's failing.

A potential solution would be when using nested render_async calls. It's described what is needed when you nest render_async's.

Let me know how it goes :)

[ye-lin-aung]

Hi. I was testing the gem today. I follow the code as in nested render async calls but seems like its not working. I tried enabling jquery and also still not working. I was using rails 6 with 2.1.5 render_async
posts/index.html.erb

<p id="notice"><%= notice %></p>

<h1>Posts</h1>

<%= render_async list_posts_path %>

<br>

<%= link_to 'New Post', new_post_path %>

posts/_list.html.erb

<table>
    <thead>
	<tr>
	    <th>Title</th>
	    <th>Description</th>
	    <th colspan="3"></th>
	</tr>
    </thead>

    <tbody>

	<% @posts.each do |post| %>
	    <%= post.title %>

	    <%= render_async post_path(post) %>
	<% end %>
    </tbody>
</table>


<%= content_for :render_async %>

posts/show.html.erb

<p id="notice"><%= notice %></p>

<p>
    <strong>Title:</strong>
    <%= @post.title %>
</p>

<p>
    <strong>Description:</strong>
    <%= @post.description %>
</p>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

I noticed that the nested script got inserted but not executed

[nikolalsvk]

Hey, @ye-lin-aung, thanks for commenting!

I just tried doing a similar thing with a Rails 6 base app I created quickly, can you give it a go and see if it works for you? Here's the app code https://github.com/nikolalsvk/rails-6-base-app

[ye-lin-aung]

@nikolalsvk It works now. Both the example and my app works now. RenderAsync.configuration.turbolinks = true is causing the issue. its hooking turbolinks:load callback but in nested form turbolinks:load callback seems to executed before the nested page was loaded. You can see enabling RenderAsync.configuration.turbolinks = true will not execute nested pages '_renderAsyncFunction' callbacks

[nikolalsvk]

Thanks, again, @ye-lin-aung! I fixed the issue you mention with Turbolinks and nested partials here #114

I will be releasing new version soon and will let you know to try it out if it works.

EDIT: Just released 2.1.6, please, let me know if it works there 🙇

[ye-lin-aung]

Thanks @nikolalsvk . I just tested version 2.1.6 in my project and your project. it works!.