<html><head><meta http-equiv="Content-Type" content="text/html charset=us-ascii"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class="">Hi Mariano,<div class=""><br class=""></div><div class="">Why are you not using css visibility? </div><div class="">This is what we do: render all tabs and use some easy JS scripts to show() and hide() the html that needs to be shown.</div><div class=""><br class=""></div><div class="">Johan</div><div class=""><br class=""><div><blockquote type="cite" class=""><div class="">On 10 Mar 2017, at 15:38, Mariano Martinez Peck <<a href="mailto:marianopeck@gmail.com" class="">marianopeck@gmail.com</a>> wrote:</div><br class="Apple-interchange-newline"><div class=""><div dir="ltr" class="">Hi guys,<div class=""><br class=""></div><div class="">I have an application which is tabbed based...that is, there is a main menu and each menu item opens a new tab in a "workspace". The user can then go to different tabs. Right now, every single click on a tab, does an ajax request and re-renders the "tab contents area". I hate this approach because even if the tab/component hasn't changed anything, every single tab click is a request + re-rendering. Sometimes the tabs are quite some heavy components which takes some time to render. So the application feels slow even when simply moving around tabs. </div><div class=""><br class=""></div><div class="">To workaround that I was thinking to cache in localStorage each tabs html and then on each click of the tab, do a html() of the "tab contents area" to the html cached for that tab.</div><div class=""><br class=""></div><div class="">That seemed like a good idea but after start trying to implement it, and I found quite some problems already. The main problem is that <scripts> embedded in the html of the tab. That JS is re-executed when I do:</div><div class=""><br class=""></div><div class="">$(''.workspaceTabContents'').empty().html(localStorage[''tabContents'' + clickedTabId ]); <br clear="all" class=""><div class=""><br class=""></div><div class="">And that is bad because each time I click on a tab, the JS is executed again and I have side effects. I could workaround this by stripping the <scripts> out. But then i have other problems.</div><div class=""><br class=""></div><div class="">For example, I use bootstrap-select for my selects. When you do $(''.selectpicker'').selectpicker(); that alters the original HTML. So when you click on another tab and you must saved latest HTML of the currently selected tab, :</div><div class=""><span class="gmail-Apple-tab-span" style="white-space:pre"><br class=""></span></div><div class=""><span class="gmail-Apple-tab-span" style="white-space:pre">localStorage[''tabContents'' + previousActiveTabId ] = $(''.workspaceTabContents'').html(); </span></div><div class=""><br class=""></div><div class="">it is the already modified HTML. Yet it has the JS...so it would duplicate my selects... </div><div class=""><br class=""></div><div class="">And this is just to begin with....</div><div class=""><br class=""></div><div class="">Another idea I had is to NOT cache on localStorage on client side but on server side. So that is, if a user clicks on a tab and does the ajax request, I do not re-render the component in Seaside (avoid all cost of #renderContentOn: etc) but instead answered a cached HTML+JS. Of course, here I still pay request, network, etc, but at least I avoid HTML generation. </div><div class=""><br class=""></div><div class=""><div class=""><br class="gmail-Apple-interchange-newline">So I wonder...has anyone ever did something like this? Note that at the moment I cannot afford going with a client-side UI like angular or whatever. </div><div class=""><br class=""></div></div><div class="">Thanks in advance, </div><div class=""><br class=""></div>-- <br class=""><div class="gmail_signature">Mariano<br class=""><a href="http://marianopeck.wordpress.com/" target="_blank" class="">http://marianopeck.wordpress.com</a><br class=""></div>
</div></div>
_______________________________________________<br class="">seaside mailing list<br class=""><a href="mailto:seaside@lists.squeakfoundation.org" class="">seaside@lists.squeakfoundation.org</a><br class="">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside<br class=""></div></blockquote></div><br class=""></div></body></html>