<div dir="ltr">Hi guys,<div><br></div><div>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><br></div><div>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><br></div><div>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><br></div><div>$(''.workspaceTabContents'').empty().html(localStorage[''tabContents'' + clickedTabId ]);  <br clear="all"><div><br></div><div>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><br></div><div>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><span class="gmail-Apple-tab-span" style="white-space:pre"><br></span></div><div><span class="gmail-Apple-tab-span" style="white-space:pre">localStorage[''tabContents'' + previousActiveTabId ] = $(''.workspaceTabContents'').html();               </span></div><div><br></div><div>it is the already modified HTML. Yet it has the JS...so it would duplicate my selects... </div><div><br></div><div>And this is just to begin with....</div><div><br></div><div>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><br></div><div><div><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><br></div></div><div>Thanks in advance, </div><div><br></div>-- <br><div class="gmail_signature">Mariano<br><a href="http://marianopeck.wordpress.com" target="_blank">http://marianopeck.wordpress.com</a><br></div>
</div></div>