[Tab] Cached content is added back on each open (losing changes) #2534

Closed
andreyvk opened this Issue Jul 7, 2015 · 19 comments

Projects

None yet

4 participants

@andreyvk
andreyvk commented Jul 7, 2015

Hi,

I've just upgraded to Semantic 2.0.0. Great job on this one! Thanks @jlukic

I have dynamically opened tabs in my app, contents of which are AJAXed by semantic and normally include HTML and <script> tags. On the first load of any tab everything seems to execute well and work well too, however if tab is clicked on again or focused back on, all the dynamically generated elements are lost (i.e. as if html content is re-inserted but javascript never fires).

Here's a fiddle

Question: It might be a correct behavior in some cases, but how can I make tabs evaluate the content trully once, so that when user goes back to a tab, everything remains as it was? For that matter evaluateScripts: true wouldn't work for me either.

PS: the Tab/Settings documentation lists a parseScripts parameter. Shouldn't it be evaluateScripts instead?

@jlukic jlukic added this to the 2.0.2 milestone Jul 7, 2015
@jlukic jlukic added the Docs Issue label Jul 7, 2015
@jlukic
Member
jlukic commented Jul 7, 2015

Docs list the wrong name for the setting, it should be evaluateScripts

@jlukic jlukic modified the milestone: 2.1, 2.0.2 Jul 7, 2015
@jlukic
Member
jlukic commented Jul 7, 2015

Basically response is cached before parseScripts runs. Which means when tab is revisited it will not run scripts again and will not use the result of first script evaluation. This is a bug with once. Setting cache: false will probably fix this for now.

The actual fix will have to be more involved. I've marked this for a later release.

@jlukic jlukic changed the title from [Tab] evaluateScripts: 'once' introduces undesired behavior to [Tab] Cached content is added back on each open (losing changes) Aug 11, 2015
@jlukic jlukic modified the milestone: 2.2, 2.1 Aug 12, 2015
@jlukic jlukic added a commit that referenced this issue May 15, 2016
@jlukic jlukic #2534 - Add cacheType setting, response or html. Response caches orig…
…inal response so that execution occurs in same way each load. HTML caches final html content after callbacks
6b5c383
@jlukic jlukic added a commit that referenced this issue May 15, 2016
@jlukic jlukic RLSnotes #2534 1b87763
@jlukic jlukic added a commit that referenced this issue May 15, 2016
@jlukic jlukic #2534 preserve original behavior 7901e04
@jlukic
Member
jlukic commented May 15, 2016

I've added a new setting cacheType which can have two settings response or html (defaults to html).

Response will cache the original response so that it can be played back identically on future callbacks (current behavior), html will cache the html resulting from script evaluation and callbacks.

You will have to now call with cacheType: 'html' to see the chances in 2.2 This is to preserve functionality for users who were relying on tab functioning as it has before.

@jlukic jlukic added a commit that referenced this issue May 15, 2016
@jlukic jlukic #2534 - rlsnotes wrong a0c8542
@jlukic jlukic added the Docs Issue label May 15, 2016
@jlukic
Member
jlukic commented May 15, 2016

@andreyvk I'm really sorry how long it took me to address this.

Fiddle example from 2.2
http://jsfiddle.net/arpb4o24/

@jlukic jlukic closed this May 15, 2016
@andreyvk
andreyvk commented May 16, 2016 edited

@jlukic Thanks. I've tested on a fiddle, but i think we still have the same issue. Here's fiddle: http://jsfiddle.net/andreyvk/zjqxxmoj/

Maybe I cant get configuration right? The idea is very simple:

  1. When tab is focused on, content loads and JS executes, initializing the DOM (if content is already on the page, then JS just ran for the first time)
  2. Upon a second focus/click on the same tab, content must not reload nad JS must not run again (i.e. tab is cached and scripts are evaluated once. No replay needed). Just leave the tab be, cause it was already initialized before.
@jlukic jlukic reopened this Jun 13, 2016
@jlukic jlukic modified the milestone: 2.2, 2.2.1 Jun 26, 2016
@jlukic jlukic modified the milestone: 2.2.3, 2.2.4 Aug 22, 2016
@usef911
usef911 commented Aug 30, 2016

Hi @jlukic
Thanks for all the hard work. I've been watching this issue for a long time hoping for a resolution soon. Is there anything I can do/contribute to push this higher in your priority list?

Thanks

@andreyvk

Hi @jlukic,

We would like to sponsor this fix so you could roll it out. We are getting a lot of complains regarding our product primarily because we are not being able to make some tabs load only once and then remain unchanged afterwards. Do you think you can find some time to look into this asap?

@jlukic
Member
jlukic commented Oct 23, 2016 edited

Yeah @andreyvk if this is important to you I can put a fix in this week. If you want to reach out by gchat feel free to hit me up at jacklukic@gmail.com, but I think I have a clear test case. I've just been slowed down lately by increasing personal / work obligations.

@andreyvk

@jlukic , unfortunately this is very important at the moment. I've been waiting for this fix like a kid is waiting for Christmas. It's actually becoming a huge inconvenience for our clients.

Just as a reminder on this issue:

  1. Some tabs need to be loaded once and only once (i.e. no re-loading/re-initializing on further tab selection)
  2. While that tab is loaded once, JS scripts must also be executed once, so tab state isnt lost at all.

Thanks for your email address (!), but I wont be bothering you there. I just sincerely hope you can find time to fix this one :)

@ivantcholakov

Meanwhile you can try delegation:

$('body').on('click', 'button', function() { alert(1) });
@usef911
usef911 commented Oct 24, 2016

Hi @jlukic
I second @andreyvk , adding this feature will really relieve a lot of grief for our project, it's really a very important feature we've been waiting for for a long time. Appreciate the help and hope you can squeeze this in to your schedule this week. Looking forward to the update 👍

@jlukic
Member
jlukic commented Oct 25, 2016 edited

@andreyvk

I think using cacheType: 'response' and evaluateScripts: true together should do what you're expecting (alerts appears everytime, append appears only once).

If this isnt correct, please let me know the expected response, so I can consider changes to the component.

http://jsfiddle.net/7k8nyqb2/

@andreyvk

@jlukic

If you click on the "First" tab more than once you would notice that time (in ms) is changing. Which means that JS is fired again and again every time tab is selected. This isn't the correct/desired behavior. Tab must be loaded and JS "ready" fired only once.

Thanks for this! Really )

@jlukic
Member
jlukic commented Oct 25, 2016 edited

I see what you mean, I'll add something tomorrow later this week

@jlukic jlukic added a commit that referenced this issue Oct 28, 2016
@jlukic jlukic #2534 release notes 284f517
@jlukic
Member
jlukic commented Oct 28, 2016

Hey @andreyvk thanks for your patience.

I've added a new cache type dom which caches a cloned DOM fragment, which is re-used on each tab reload.

This should have the effect you're looking for

Example:
http://jsfiddle.net/tuhq4boc/

@jlukic jlukic closed this Oct 28, 2016
@andreyvk

@jlukic

Thanks for the hard work! But im sorry to say, that the fix that you provided did not work though...

I found that all <script> tags are removed from the tab content, when tab is clicked the second time around. This kills all the objects there were created on the first place (in other words, we have <script> tags on tab content and some of them contain code that initializes internals of our tabs). I looked at the tab.js code. Seem like this piece of code on line 480 is the reason (of course you know it 😄 ):

setTimeout(function() {
    var
        $clone = $tab.children().clone(true)
                      ;
        $clone = $clone.not('script');
         . . .

Sorry for misunderstanding. I should've told you before, but I had no idea that you'd be taking this approach in tackling the issue.

May I ask why you always need to clone/re-insert html, when tab is clicked on? Technically what's needed is to only make tab content visible, because it was hidden on the first place.

@usef911
usef911 commented Nov 1, 2016

Hi @jlukic
Any updates? Appreciate the hard work very much.
Thanks

@jlukic
Member
jlukic commented Dec 29, 2016
@jlukic jlukic reopened this Dec 29, 2016
@jlukic jlukic closed this Dec 29, 2016
@jlukic jlukic modified the milestone: 2.2.8, 2.2.5 Dec 29, 2016
@andreyvk
andreyvk commented Jan 1, 2017

@jlukic that actually looks great! thanks a lot and happy NY! Btw, any idea when can we expect 2.2.8 release?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment