With Caching enabled, event_name is not triggered as content_for is missing on page reload

[fuggfuggfugg]

Hi,
I am using async_cache to load the sidebar, with an event_name setup to do post processing.

<ul id="sidebarRefresh" class="nav nav-tabs nav-stacked">
	<%= render_async_cache left_menu_show_path , event_name: "sidebar-loaded", replace_container: false do %>
		<li>
			<a href="javascript:void(0);">
				<i class="fa fa-spinner fa-pulse"  aria-hidden="true"></i>
				<span class="menu-label" style="font-style: italic;">Loading...</span>
			</a>
		</li>
	<% end %>
</ul>
<%= content_for :render_async %>

This works the first time the page is loaded. Once I reload the same or visit another page, only the HTML is rendered without the vanilla javascript area.

Upon investigation, the code seems to only printing out the cached HTML.

Is there a way to fix this? If I move the post-processing code out of the event listener to $( document ).ready(function() { then it works for reloads but won't work the first time when the cache is null.

Any advice is appreciated.

[fuggfuggfugg]

Also mention in passing any other options like
container_id: "sidebarRefresh" , html_element_name: 'ul', container_class: 'nav nav-tabs nav-stacked'
is also ignored

[nikolalsvk]

Hey, thanks for opening an issue.

This is an interesting problem. I am interested, are you using render_async with jQuery or with Vanilla JS? Here's how you can configure different options, just in case

[nikolalsvk]

But I think regardless of what you use, you are right:

Upon investigation, the code seems to only printing out the cached HTML.

I'd like to understand your use case, why do you need the JS portion of the gem if you're caching it? Are you expected to do some JS logic on every render?

[fuggfuggfugg]

I no longer have my code as I reverted my changes. But here was my use case. I was using render_async on my sidebar menu which has a list of menu items where a user can add/remove more menu items. The reason I use render_async so if the menus are toggled, I can refresh the sidebar without having to reload the page.

The sidebar however has javascript onHover that changes the width of the sidebar (Icons -> Icons with Text). CSS onhover can be used but I find a better implementation with JS and using HoverIntent

[nikolalsvk]

Got it, thanks for sharing what you did. I'm glad you managed to make it work 🙌

But the issue you raised here is still valid - whether we should enable performing of cached JS response in render_async 🤔 If anyone has an idea on how to do it, please share below