Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested async templates - JS not firing/loading #70

Open
chadwtaylor opened this issue Oct 15, 2018 · 12 comments
Open

Nested async templates - JS not firing/loading #70

chadwtaylor opened this issue Oct 15, 2018 · 12 comments
Labels

Comments

@chadwtaylor
Copy link

chadwtaylor commented Oct 15, 2018

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
Copy link
Collaborator

nikolalsvk commented Oct 16, 2018

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
Copy link
Collaborator

nikolalsvk commented Oct 16, 2018

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
Copy link

bundai223 commented Nov 7, 2018

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
Copy link
Contributor

filipewl commented Dec 7, 2018

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 nikolalsvk added the bug label Dec 10, 2018
@nikolalsvk
Copy link
Collaborator

nikolalsvk commented Dec 10, 2018

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
Copy link

kian1213 commented Sep 4, 2019

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
Copy link
Collaborator

nikolalsvk commented Sep 4, 2019

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
Copy link

ye-lin-aung commented May 8, 2020

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
Copy link
Collaborator

nikolalsvk commented May 9, 2020

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
Copy link

ye-lin-aung commented May 9, 2020

@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
Copy link
Collaborator

nikolalsvk commented May 9, 2020

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
Copy link

ye-lin-aung commented May 9, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants