nikolalsvk / render_async

render_async lets you include pages asynchronously with AJAX
https://rubygems.org/gems/render_async/
MIT License
1.08k stars 75 forks source link

2.1.5 breaks manual trigger of click event #108

Closed vanboom closed 4 years ago

vanboom commented 4 years ago

With 2.1.4 we could do this on the toggle selector element:

  $(document).ready(function(){
    $("#async-trigger").trigger('click');
  });

With 2.1.5 this does not work. Running the ...trigger('click') in the console works, but the timing of this during the page load sequence is no longer working in 2.1.5.

I have not determined why yet, and will comment if I can determine what is happening in more detail.

vanboom commented 4 years ago

This works...

  $(window).bind('load', function(){
    $("#async-trigger").trigger('click');
  });

See _request.jquery.js.erb;116 _setUpToggle is now being delayed until after document loaded which I guess happens after the $(document).ready() phase?

nikolalsvk commented 4 years ago

Hey, @vanboom! Thanks for submitting an issue about this. I'm sorry your functionality got broken with the new 2.1.5 version.

This behavior was intended to happen, I'll update the release info after this. 2.1.5 version brought a change where toggle event listeners would add after the page has loaded. This fixed a bug where event handlers would try to attach to elements that were not yet loaded.

Hope this explained a bit more why this happened.

As for the solution to your problem, I suggest the following. Since you're using jQuery, turn on jQuery logic for render_async. You mentioned that this part of the code was working before

  $(document).ready(function() {
    $("#async-trigger").trigger('click');
  });

And it should work with jQuery turned on.

# This will render jQuery code, and skip Vanilla JS code
RenderAsync.configuration.jquery = true

Can you try this out and let me know how it goes? 🙏

vanboom commented 4 years ago

Unfortunately I am already using jQuery - in my case my call to trigger('click') is happening before the call to _setupToggle();

I suspect that this is due to the placement of my content_for :render_async block which is near the end of the html body. For some reason, I am not able to reproduce the issue as described in #90, perhaps that is caused by a similar placement issue of the content_for and the view-rendered javascript.

nikolalsvk commented 4 years ago

Right, can you post some code on how you call trigger('click') in your code? Have you tried wrapping it inside

$(document).ready(function() {
  $("#id-of-your-button").trigger('click');
});

Also, are you using Turbolinks by any chance?

nikolalsvk commented 4 years ago

If this still doesn't work due to the position of the triggering JS code and the render_async JS code, we'd have to add a new event. The new event would trigger when all the event listeners are attached in the _setupToggle() function.

Please check the previous comment, and respond if it's working for you so we can figure out the next steps :)

nikolalsvk commented 4 years ago

Can you try this out in the new 2.1.6 version. Maybe it will work with what you originally posted here https://github.com/renderedtext/render_async/issues/108#issue-591304726

If it's still a problem, we can reopen this issue and deal with it.

vanboom commented 4 years ago

Ok, thanks, sorry in a crunch and have not been able to do more testing yet. Thanks again.

vanboom commented 4 years ago

@nikolalsvk, EDIT - 2.1.6 still exhibits this issue, sorry. The render_async javascript is being delayed beyond where I am attempting to trigger the polling. My view code looks like this...

  = render_async job_path(@job_id), interval: 1250, toggle:{selector: '#render_async_control', event: 'toggle_polling'}

:javascript
  $(document).ready(function(){
    $("#render_async_control").trigger("toggle_polling");
  });

Unfortunately I am not able to reproduce or understand the bug described in #90 that prompted this change. I suspect that the bug reported in #90 was caused by the content_for(:render_async) block being placed before the view code in the layout.

This work around works to effectively delay the click trigger...

$(window).bind('load', function() {
  $("#id-of-your-button").trigger('click');
});

CAUTION: $(window).bind('load'...) event is not called if the view is rendered in a modal or popup so this solution will not work everywhere.

nikolalsvk commented 4 years ago

Hey, @vanboom, I'm wondering, is it necessary to trigger render_async using JavaScript in your project?

You could just start polling immediately, without having to toggle polling. Is this an option for you?

vanboom commented 4 years ago

@nikolalsvk, good idea, however as I understand, to allow the user to start/stop polling the toggle feature has to be used, which will not start polling immediately by default?

nikolalsvk commented 4 years ago

@vanboom exactly, I was thinking of adding an option to start polling immediately with the toggle feature. For example, render_async will start polling on the page load, but the user can still turn polling on/off after that if he wants. Would this be something you are interested in?

vanboom commented 4 years ago

Yes, that would be great. In a lot of my use cases, I want to start polling immediately but allow the user to toggle the polling on/off, or disable the polling based on a result like "job complete", similar to #106.


From: Nikola Đuza notifications@github.com Sent: Wednesday, May 20, 2020 4:31 PM To: renderedtext/render_async render_async@noreply.github.com Cc: Don dvboom@hotmail.com; Mention mention@noreply.github.com Subject: Re: [renderedtext/render_async] 2.1.5 breaks manual trigger of click event (#108)

@vanboomhttps://github.com/vanboom exactly, I was thinking of adding an option to start polling immediately with the toggle feature. For example, render_async will start polling on the page load, but the user can still turn polling on/off after that if he wants. Would this be something you are interested in?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/renderedtext/render_async/issues/108#issuecomment-631738039, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAB5OOVMLZXCKR73UU6W4PLRSRD3TANCNFSM4LX2APUA.

nikolalsvk commented 4 years ago

Awesome, @vanboom, can you please create another issue as a feature request that will start polling on load? 🙇