<div dir="ltr"><br><div class="gmail_extra"><br><div class="gmail_quote">On Fri, Mar 10, 2017 at 12:14 PM, Johan Brichau <span dir="ltr"><<a href="mailto:johan@inceptive.be" target="_blank">johan@inceptive.be</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word">Hi Mariano,<div><br></div><div>Why are you not using css visibility? </div><div>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><br></div></div></blockquote><div><br></div><div>Thanks Johan,</div><div><br></div><div>I haven't thought about that one. Seems like a good idea. Let me ask...when you need to open a new tab (say a main menu button was clicked), how do you avoid having to re-render all the "workspace" (all tabs) ? Do you only render the new one and do an append() or something?</div><div><br></div><div>Thanks in advance,</div><div> </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word"><div></div><div>Johan</div><div><br><div><blockquote type="cite"><div><div class="h5"><div>On 10 Mar 2017, at 15:38, Mariano Martinez Peck <<a href="mailto:marianopeck@gmail.com" target="_blank">marianopeck@gmail.com</a>> wrote:</div><br class="m_6576783988989844966Apple-interchange-newline"></div></div><div><div><div class="h5"><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'').<wbr>empty().html(localStorage[''<wbr>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'').<wbr>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="m_6576783988989844966gmail-Apple-tab-span" style="white-space:pre-wrap"><br></span></div><div><span class="m_6576783988989844966gmail-Apple-tab-span" style="white-space:pre-wrap">localStorage[''tabContents'' + previousActiveTabId ] = $(''.workspaceTabContents'').<wbr>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="m_6576783988989844966gmail-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="m_6576783988989844966gmail_signature">Mariano<br><a href="http://marianopeck.wordpress.com/" target="_blank">http://marianopeck.wordpress.<wbr>com</a><br></div>
</div></div></div></div>
______________________________<wbr>_________________<br>seaside mailing list<br><a href="mailto:seaside@lists.squeakfoundation.org" target="_blank">seaside@lists.<wbr>squeakfoundation.org</a><br><a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.<wbr>org/cgi-bin/mailman/listinfo/<wbr>seaside</a><br></div></blockquote></div><br></div></div><br>______________________________<wbr>_________________<br>
seaside mailing list<br>
<a href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.<wbr>squeakfoundation.org</a><br>
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" rel="noreferrer" target="_blank">http://lists.squeakfoundation.<wbr>org/cgi-bin/mailman/listinfo/<wbr>seaside</a><br>
<br></blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="gmail_signature" data-smartmail="gmail_signature">Mariano<br><a href="http://marianopeck.wordpress.com" target="_blank">http://marianopeck.wordpress.com</a><br></div>
</div></div>