Hi Mariano,<div id="yMail_cursorElementTracker_1489160997122"><br></div><div id="yMail_cursorElementTracker_1489160999736">I had similar requirements for caching tabs on a client and I found out that the simplest solution was to use jQuery add-on which was free and had all things I needed. The only problem I had to solve was actually refreshing cached content on demand in case of need. There is a number of such add-ons, if you are interested I can provide you wirh a link to the one I decided to use.</div><div id="yMail_cursorElementTracker_1489161354871"><br></div><div id="yMail_cursorElementTracker_1489161356273">Regards,</div><div id="yMail_cursorElementTracker_1489161361182">Sasa Prokic<br><br><div id="ymail_android_signature"><a href="https://overview.mail.yahoo.com/mobile/?.src=Android">Sent from Yahoo Mail on Android</a></div> <br> <blockquote style="margin: 0 0 20px 0;"> <header style="font-family:Roboto, sans-serif; color:#6D00F6;"> <div>On Fri, Mar 10, 2017 at 10:34 AM, seaside-request@lists.squeakfoundation.org</div><div><seaside-request@lists.squeakfoundation.org> wrote:</div> </header> <div style="padding: 10px 0 0 20px; margin: 10px 0 0 0; border-left: 1px solid #6D00F6;"> <div dir="ltr">Send seaside mailing list submissions to<br></div><div dir="ltr">    <a ymailto="mailto:seaside@lists.squeakfoundation.org" href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a><br></div><div dir="ltr"><br></div><div dir="ltr">To subscribe or unsubscribe via the World Wide Web, visit<br></div><div dir="ltr">    <a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br></div><div dir="ltr">or, via email, send a message with subject or body 'help' to<br></div><div dir="ltr">    <a ymailto="mailto:seaside-request@lists.squeakfoundation.org" href="mailto:seaside-request@lists.squeakfoundation.org">seaside-request@lists.squeakfoundation.org</a><br></div><div dir="ltr"><br></div><div dir="ltr">You can reach the person managing the list at<br></div><div dir="ltr">    <a ymailto="mailto:seaside-owner@lists.squeakfoundation.org" href="mailto:seaside-owner@lists.squeakfoundation.org">seaside-owner@lists.squeakfoundation.org</a><br></div><div dir="ltr"><br></div><div dir="ltr">When replying, please edit your Subject line so it is more specific<br></div><div dir="ltr">than "Re: Contents of seaside digest..."<br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">Today's Topics:<br></div><div dir="ltr"><br></div><div dir="ltr">   1. Someone having tabs with Seaside html+js cached on<br></div><div dir="ltr">      localStorage? (Mariano Martinez Peck)<br></div><div dir="ltr">   2. Re: Someone having tabs with Seaside html+js cached on<br></div><div dir="ltr">      localStorage? (Johan Brichau)<br></div><div dir="ltr">   3. Re: Someone having tabs with Seaside html+js cached on<br></div><div dir="ltr">      localStorage? (Esteban A. Maringolo)<br></div><div dir="ltr">   4. Re: Someone having tabs with Seaside html+js cached on<br></div><div dir="ltr">      localStorage? (Mariano Martinez Peck)<br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">----------------------------------------------------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">Message: 1<br></div><div dir="ltr">Date: Fri, 10 Mar 2017 11:38:06 -0300<br></div><div dir="ltr">From: Mariano Martinez Peck <<a ymailto="mailto:marianopeck@gmail.com" href="mailto:marianopeck@gmail.com">marianopeck@gmail.com</a>><br></div><div dir="ltr">To: Seaside - general discussion <<a ymailto="mailto:seaside@lists.squeakfoundation.org" href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a>><br></div><div dir="ltr">Subject: [Seaside] Someone having tabs with Seaside html+js cached on<br></div><div dir="ltr">    localStorage?<br></div><div dir="ltr">Message-ID:<br></div><div dir="ltr">    <CAA+-=mV1+rj7LVg3G9EKL7i9NCetYaQj9yf+<a ymailto="mailto:Xo4Uy-DfLyRhkQ@mail.gmail.com" href="mailto:Xo4Uy-DfLyRhkQ@mail.gmail.com">Xo4Uy-DfLyRhkQ@mail.gmail.com</a>><br></div><div dir="ltr">Content-Type: text/plain; charset="utf-8"<br></div><div dir="ltr"><br></div><div dir="ltr">Hi guys,<br></div><div dir="ltr"><br></div><div dir="ltr">I have an application which is tabbed based...that is, there is a main menu<br></div><div dir="ltr">and each menu item opens a new tab in a "workspace". The user can then go<br></div><div dir="ltr">to different tabs. Right now, every single click on a tab, does an ajax<br></div><div dir="ltr">request and re-renders the "tab contents area". I hate this approach<br></div><div dir="ltr">because even if the tab/component hasn't changed anything, every single tab<br></div><div dir="ltr">click is a request + re-rendering. Sometimes the tabs are quite some heavy<br></div><div dir="ltr">components which takes some time to render. So the application feels slow<br></div><div dir="ltr">even when simply moving around tabs.<br></div><div dir="ltr"><br></div><div dir="ltr">To workaround that I was thinking to cache in localStorage each tabs html<br></div><div dir="ltr">and then on each click of the tab, do a html() of the "tab contents area"<br></div><div dir="ltr">to the html cached for that tab.<br></div><div dir="ltr"><br></div><div dir="ltr">That seemed like a good idea but after start trying to implement it, and I<br></div><div dir="ltr">found quite some problems already. The main problem is that <scripts><br></div><div dir="ltr">embedded in the html of the tab. That JS is re-executed when I do:<br></div><div dir="ltr"><br></div><div dir="ltr">$(''.workspaceTabContents'').empty().html(localStorage[''tabContents'' +<br></div><div dir="ltr">clickedTabId ]);<br></div><div dir="ltr"><br></div><div dir="ltr">And that is bad because each time I click on a tab, the JS is executed<br></div><div dir="ltr">again and I have side effects. I could workaround this by stripping the<br></div><div dir="ltr"><scripts> out. But then i have other problems.<br></div><div dir="ltr"><br></div><div dir="ltr">For example, I use bootstrap-select for my selects. When you do<br></div><div dir="ltr">$(''.selectpicker'').selectpicker();   that alters the original HTML. So<br></div><div dir="ltr">when you click on another tab and you must saved latest HTML of the<br></div><div dir="ltr">currently selected tab, :<br></div><div dir="ltr"><br></div><div dir="ltr">localStorage[''tabContents'' + previousActiveTabId ] =<br></div><div dir="ltr">$(''.workspaceTabContents'').html();<br></div><div dir="ltr"><br></div><div dir="ltr">it is the already modified HTML. Yet it has the JS...so it would duplicate<br></div><div dir="ltr">my selects...<br></div><div dir="ltr"><br></div><div dir="ltr">And this is just to begin with....<br></div><div dir="ltr"><br></div><div dir="ltr">Another idea I had is to NOT cache on localStorage on client side but on<br></div><div dir="ltr">server side. So that is, if a user clicks on a tab and does the ajax<br></div><div dir="ltr">request, I do not re-render the component in Seaside (avoid all cost of<br></div><div dir="ltr">#renderContentOn: etc) but instead  answered a cached HTML+JS.  Of course,<br></div><div dir="ltr">here I still pay request, network, etc, but at least I avoid HTML<br></div><div dir="ltr">generation.<br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">So I wonder...has anyone ever did something like this? Note that at the<br></div><div dir="ltr">moment I cannot afford going with a client-side UI like angular or<br></div><div dir="ltr">whatever.<br></div><div dir="ltr"><br></div><div dir="ltr">Thanks in advance,<br></div><div dir="ltr"><br></div><div dir="ltr">-- <br></div><div dir="ltr">Mariano<br></div><div dir="ltr"><a href="http://marianopeck.wordpress.com" target="_blank">http://marianopeck.wordpress.com</a><br></div><div dir="ltr">-------------- next part --------------<br></div><div dir="ltr">An HTML attachment was scrubbed...<br></div><div dir="ltr">URL: <<a href="http://lists.squeakfoundation.org/pipermail/seaside/attachments/20170310/360009f8/attachment-0001.html" target="_blank">http://lists.squeakfoundation.org/pipermail/seaside/attachments/20170310/360009f8/attachment-0001.html</a>><br></div><div dir="ltr"><br></div><div dir="ltr">------------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">Message: 2<br></div><div dir="ltr">Date: Fri, 10 Mar 2017 16:14:36 +0100<br></div><div dir="ltr">From: Johan Brichau <<a ymailto="mailto:johan@inceptive.be" href="mailto:johan@inceptive.be">johan@inceptive.be</a>><br></div><div dir="ltr">To: Seaside - general discussion <<a ymailto="mailto:seaside@lists.squeakfoundation.org" href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a>><br></div><div dir="ltr">Subject: Re: [Seaside] Someone having tabs with Seaside html+js cached<br></div><div dir="ltr">    on localStorage?<br></div><div dir="ltr">Message-ID: <<a ymailto="mailto:001CB1A3-26E9-4DAF-919B-C61963B3CB2A@inceptive.be" href="mailto:001CB1A3-26E9-4DAF-919B-C61963B3CB2A@inceptive.be">001CB1A3-26E9-4DAF-919B-C61963B3CB2A@inceptive.be</a>><br></div><div dir="ltr">Content-Type: text/plain; charset="utf-8"<br></div><div dir="ltr"><br></div><div dir="ltr">Hi Mariano,<br></div><div dir="ltr"><br></div><div dir="ltr">Why are you not using css visibility? <br></div><div dir="ltr">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.<br></div><div dir="ltr"><br></div><div dir="ltr">Johan<br></div><div dir="ltr"><br></div><div dir="ltr">> On 10 Mar 2017, at 15:38, Mariano Martinez Peck <<a ymailto="mailto:marianopeck@gmail.com" href="mailto:marianopeck@gmail.com">marianopeck@gmail.com</a>> wrote:<br></div><div dir="ltr">> <br></div><div dir="ltr">> Hi guys,<br></div><div dir="ltr">> <br></div><div dir="ltr">> 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. <br></div><div dir="ltr">> <br></div><div dir="ltr">> 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.<br></div><div dir="ltr">> <br></div><div dir="ltr">> 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:<br></div><div dir="ltr">> <br></div><div dir="ltr">> $(''.workspaceTabContents'').empty().html(localStorage[''tabContents'' + clickedTabId ]);  <br></div><div dir="ltr">> <br></div><div dir="ltr">> 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.<br></div><div dir="ltr">> <br></div><div dir="ltr">> 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, :<br></div><div dir="ltr">> <br></div><div dir="ltr">> localStorage[''tabContents'' + previousActiveTabId ] = $(''.workspaceTabContents'').html();        <br></div><div dir="ltr">> <br></div><div dir="ltr">> it is the already modified HTML. Yet it has the JS...so it would duplicate my selects... <br></div><div dir="ltr">> <br></div><div dir="ltr">> And this is just to begin with....<br></div><div dir="ltr">> <br></div><div dir="ltr">> 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. <br></div><div dir="ltr">> <br></div><div dir="ltr">> <br></div><div dir="ltr">> 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. <br></div><div dir="ltr">> <br></div><div dir="ltr">> Thanks in advance, <br></div><div dir="ltr">> <br></div><div dir="ltr">> -- <br></div><div dir="ltr">> Mariano<br></div><div dir="ltr">> <a href="http://marianopeck.wordpress.com " target="_blank">http://marianopeck.wordpress.com </a><<a href="http://marianopeck.wordpress.com/" target="_blank">http://marianopeck.wordpress.com/</a>><br></div><div dir="ltr">> _______________________________________________<br></div><div dir="ltr">> seaside mailing list<br></div><div dir="ltr">> <a ymailto="mailto:seaside@lists.squeakfoundation.org" href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a><br></div><div dir="ltr">> <a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br></div><div dir="ltr"><br></div><div dir="ltr">-------------- next part --------------<br></div><div dir="ltr">An HTML attachment was scrubbed...<br></div><div dir="ltr">URL: <<a href="http://lists.squeakfoundation.org/pipermail/seaside/attachments/20170310/daf182a0/attachment-0001.html" target="_blank">http://lists.squeakfoundation.org/pipermail/seaside/attachments/20170310/daf182a0/attachment-0001.html</a>><br></div><div dir="ltr"><br></div><div dir="ltr">------------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">Message: 3<br></div><div dir="ltr">Date: Fri, 10 Mar 2017 12:26:44 -0300<br></div><div dir="ltr">From: "Esteban A. Maringolo" <<a ymailto="mailto:emaringolo@gmail.com" href="mailto:emaringolo@gmail.com">emaringolo@gmail.com</a>><br></div><div dir="ltr">To: Seaside - general discussion <<a ymailto="mailto:seaside@lists.squeakfoundation.org" href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a>><br></div><div dir="ltr">Subject: Re: [Seaside] Someone having tabs with Seaside html+js cached<br></div><div dir="ltr">    on    localStorage?<br></div><div dir="ltr">Message-ID:<br></div><div dir="ltr">    <CAJMgPC+T3W02ZNy+JVpzR6eg9ewSit7+aq8SJ-SH-+<a ymailto="mailto:-tFnGvNw@mail.gmail.com" href="mailto:-tFnGvNw@mail.gmail.com">-tFnGvNw@mail.gmail.com</a>><br></div><div dir="ltr">Content-Type: text/plain; charset=UTF-8<br></div><div dir="ltr"><br></div><div dir="ltr">I guess he's not using visibilty to avoid loading the contents of all<br></div><div dir="ltr">tabs at once.<br></div><div dir="ltr"><br></div><div dir="ltr">But once loaded I'd do what Johan suggests, only using show/hide of<br></div><div dir="ltr">each tab content (which is loaded on demand).<br></div><div dir="ltr"><br></div><div dir="ltr">A more, maybe overkill solution, would be to save on client side when<br></div><div dir="ltr">was the last time you switched to that particular tab (if you have a<br></div><div dir="ltr">way to identify it), so when the user moves between tabs you don't<br></div><div dir="ltr">force an update unless there was certain time since the last update (1<br></div><div dir="ltr">m, 5m, whatever) or, of course, it was the first time you opened the<br></div><div dir="ltr">tab. This way if the click occurs before the update threshold, then<br></div><div dir="ltr">you simply perform a show() on the clicked tab and hide all the<br></div><div dir="ltr">others, if not then you AJAX load its updated contents.<br></div><div dir="ltr"><br></div><div dir="ltr">This would have the drawback of having a bigger DOM in the memory of<br></div><div dir="ltr">the client, since each tab, once opened, will remain in the DOM until<br></div><div dir="ltr">closed. But even with a big DOM tree, browsers are optimized for such<br></div><div dir="ltr">scenarios.<br></div><div dir="ltr"><br></div><div dir="ltr">Regards,<br></div><div dir="ltr"><br></div><div dir="ltr">Esteban A. Maringolo<br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">2017-03-10 12:14 GMT-03:00 Johan Brichau <<a ymailto="mailto:johan@inceptive.be" href="mailto:johan@inceptive.be">johan@inceptive.be</a>>:<br></div><div dir="ltr">> Hi Mariano,<br></div><div dir="ltr">><br></div><div dir="ltr">> Why are you not using css visibility?<br></div><div dir="ltr">> This is what we do: render all tabs and use some easy JS scripts to show()<br></div><div dir="ltr">> and hide() the html that needs to be shown.<br></div><div dir="ltr">><br></div><div dir="ltr">> Johan<br></div><div dir="ltr">><br></div><div dir="ltr">> On 10 Mar 2017, at 15:38, Mariano Martinez Peck <<a ymailto="mailto:marianopeck@gmail.com" href="mailto:marianopeck@gmail.com">marianopeck@gmail.com</a>><br></div><div dir="ltr">> wrote:<br></div><div dir="ltr">><br></div><div dir="ltr">> Hi guys,<br></div><div dir="ltr">><br></div><div dir="ltr">> I have an application which is tabbed based...that is, there is a main menu<br></div><div dir="ltr">> and each menu item opens a new tab in a "workspace". The user can then go to<br></div><div dir="ltr">> different tabs. Right now, every single click on a tab, does an ajax request<br></div><div dir="ltr">> and re-renders the "tab contents area". I hate this approach because even if<br></div><div dir="ltr">> the tab/component hasn't changed anything, every single tab click is a<br></div><div dir="ltr">> request + re-rendering. Sometimes the tabs are quite some heavy components<br></div><div dir="ltr">> which takes some time to render. So the application feels slow even when<br></div><div dir="ltr">> simply moving around tabs.<br></div><div dir="ltr">><br></div><div dir="ltr">> To workaround that I was thinking to cache in localStorage each tabs html<br></div><div dir="ltr">> and then on each click of the tab, do a html() of the "tab contents area" to<br></div><div dir="ltr">> the html cached for that tab.<br></div><div dir="ltr">><br></div><div dir="ltr">> That seemed like a good idea but after start trying to implement it, and I<br></div><div dir="ltr">> found quite some problems already. The main problem is that <scripts><br></div><div dir="ltr">> embedded in the html of the tab. That JS is re-executed when I do:<br></div><div dir="ltr">><br></div><div dir="ltr">> $(''.workspaceTabContents'').empty().html(localStorage[''tabContents'' +<br></div><div dir="ltr">> clickedTabId ]);<br></div><div dir="ltr">><br></div><div dir="ltr">> And that is bad because each time I click on a tab, the JS is executed again<br></div><div dir="ltr">> and I have side effects. I could workaround this by stripping the <scripts><br></div><div dir="ltr">> out. But then i have other problems.<br></div><div dir="ltr">><br></div><div dir="ltr">> For example, I use bootstrap-select for my selects. When you do<br></div><div dir="ltr">> $(''.selectpicker'').selectpicker();   that alters the original HTML. So<br></div><div dir="ltr">> when you click on another tab and you must saved latest HTML of the<br></div><div dir="ltr">> currently selected tab, :<br></div><div dir="ltr">><br></div><div dir="ltr">> localStorage[''tabContents'' + previousActiveTabId ] =<br></div><div dir="ltr">> $(''.workspaceTabContents'').html();<br></div><div dir="ltr">><br></div><div dir="ltr">> it is the already modified HTML. Yet it has the JS...so it would duplicate<br></div><div dir="ltr">> my selects...<br></div><div dir="ltr">><br></div><div dir="ltr">> And this is just to begin with....<br></div><div dir="ltr">><br></div><div dir="ltr">> Another idea I had is to NOT cache on localStorage on client side but on<br></div><div dir="ltr">> server side. So that is, if a user clicks on a tab and does the ajax<br></div><div dir="ltr">> request, I do not re-render the component in Seaside (avoid all cost of<br></div><div dir="ltr">> #renderContentOn: etc) but instead  answered a cached HTML+JS.  Of course,<br></div><div dir="ltr">> here I still pay request, network, etc, but at least I avoid HTML<br></div><div dir="ltr">> generation.<br></div><div dir="ltr">><br></div><div dir="ltr">><br></div><div dir="ltr">> So I wonder...has anyone ever did something like this? Note that at the<br></div><div dir="ltr">> moment I cannot afford going with a client-side UI like angular or whatever.<br></div><div dir="ltr">><br></div><div dir="ltr">> Thanks in advance,<br></div><div dir="ltr">><br></div><div dir="ltr">> --<br></div><div dir="ltr">> Mariano<br></div><div dir="ltr">> <a href="http://marianopeck.wordpress.com" target="_blank">http://marianopeck.wordpress.com</a><br></div><div dir="ltr">> _______________________________________________<br></div><div dir="ltr">> seaside mailing list<br></div><div dir="ltr">> <a ymailto="mailto:seaside@lists.squeakfoundation.org" href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a><br></div><div dir="ltr">> <a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br></div><div dir="ltr">><br></div><div dir="ltr">><br></div><div dir="ltr">><br></div><div dir="ltr">> _______________________________________________<br></div><div dir="ltr">> seaside mailing list<br></div><div dir="ltr">> <a ymailto="mailto:seaside@lists.squeakfoundation.org" href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a><br></div><div dir="ltr">> <a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br></div><div dir="ltr">><br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">------------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">Message: 4<br></div><div dir="ltr">Date: Fri, 10 Mar 2017 12:34:28 -0300<br></div><div dir="ltr">From: Mariano Martinez Peck <<a ymailto="mailto:marianopeck@gmail.com" href="mailto:marianopeck@gmail.com">marianopeck@gmail.com</a>><br></div><div dir="ltr">To: Seaside - general discussion <<a ymailto="mailto:seaside@lists.squeakfoundation.org" href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a>><br></div><div dir="ltr">Subject: Re: [Seaside] Someone having tabs with Seaside html+js cached<br></div><div dir="ltr">    on    localStorage?<br></div><div dir="ltr">Message-ID:<br></div><div dir="ltr">    <CAA+-=mX=K9Rv-kgLsHMxZGuZYU5+<a ymailto="mailto:_XzHC4exNK6moa34va-AZg@mail.gmail.com" href="mailto:_XzHC4exNK6moa34va-AZg@mail.gmail.com">_XzHC4exNK6moa34va-AZg@mail.gmail.com</a>><br></div><div dir="ltr">Content-Type: text/plain; charset="utf-8"<br></div><div dir="ltr"><br></div><div dir="ltr">On Fri, Mar 10, 2017 at 12:14 PM, Johan Brichau <<a ymailto="mailto:johan@inceptive.be" href="mailto:johan@inceptive.be">johan@inceptive.be</a>> wrote:<br></div><div dir="ltr"><br></div><div dir="ltr">> Hi Mariano,<br></div><div dir="ltr">><br></div><div dir="ltr">> Why are you not using css visibility?<br></div><div dir="ltr">> This is what we do: render all tabs and use some easy JS scripts to show()<br></div><div dir="ltr">> and hide() the html that needs to be shown.<br></div><div dir="ltr">><br></div><div dir="ltr">><br></div><div dir="ltr">Thanks Johan,<br></div><div dir="ltr"><br></div><div dir="ltr">I haven't thought about that one. Seems like a good idea. Let me ask...when<br></div><div dir="ltr">you need to open a new tab (say a main menu button was clicked), how do you<br></div><div dir="ltr">avoid having to re-render all the "workspace" (all tabs) ?  Do you only<br></div><div dir="ltr">render the new one and do an append() or something?<br></div><div dir="ltr"><br></div><div dir="ltr">Thanks in advance,<br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">> Johan<br></div><div dir="ltr">><br></div><div dir="ltr">> On 10 Mar 2017, at 15:38, Mariano Martinez Peck <<a ymailto="mailto:marianopeck@gmail.com" href="mailto:marianopeck@gmail.com">marianopeck@gmail.com</a>><br></div><div dir="ltr">> wrote:<br></div><div dir="ltr">><br></div><div dir="ltr">> Hi guys,<br></div><div dir="ltr">><br></div><div dir="ltr">> I have an application which is tabbed based...that is, there is a main<br></div><div dir="ltr">> menu and each menu item opens a new tab in a "workspace". The user can then<br></div><div dir="ltr">> go to different tabs. Right now, every single click on a tab, does an ajax<br></div><div dir="ltr">> request and re-renders the "tab contents area". I hate this approach<br></div><div dir="ltr">> because even if the tab/component hasn't changed anything, every single tab<br></div><div dir="ltr">> click is a request + re-rendering. Sometimes the tabs are quite some heavy<br></div><div dir="ltr">> components which takes some time to render. So the application feels slow<br></div><div dir="ltr">> even when simply moving around tabs.<br></div><div dir="ltr">><br></div><div dir="ltr">> To workaround that I was thinking to cache in localStorage each tabs html<br></div><div dir="ltr">> and then on each click of the tab, do a html() of the "tab contents area"<br></div><div dir="ltr">> to the html cached for that tab.<br></div><div dir="ltr">><br></div><div dir="ltr">> That seemed like a good idea but after start trying to implement it, and I<br></div><div dir="ltr">> found quite some problems already. The main problem is that <scripts><br></div><div dir="ltr">> embedded in the html of the tab. That JS is re-executed when I do:<br></div><div dir="ltr">><br></div><div dir="ltr">> $(''.workspaceTabContents'').empty().html(localStorage[''tabContents'' +<br></div><div dir="ltr">> clickedTabId ]);<br></div><div dir="ltr">><br></div><div dir="ltr">> And that is bad because each time I click on a tab, the JS is executed<br></div><div dir="ltr">> again and I have side effects. I could workaround this by stripping the<br></div><div dir="ltr">> <scripts> out. But then i have other problems.<br></div><div dir="ltr">><br></div><div dir="ltr">> For example, I use bootstrap-select for my selects. When you do<br></div><div dir="ltr">> $(''.selectpicker'').selectpicker();   that alters the original HTML. So<br></div><div dir="ltr">> when you click on another tab and you must saved latest HTML of the<br></div><div dir="ltr">> currently selected tab, :<br></div><div dir="ltr">><br></div><div dir="ltr">> localStorage[''tabContents'' + previousActiveTabId ] =<br></div><div dir="ltr">> $(''.workspaceTabContents'').html();<br></div><div dir="ltr">><br></div><div dir="ltr">> it is the already modified HTML. Yet it has the JS...so it would duplicate<br></div><div dir="ltr">> my selects...<br></div><div dir="ltr">><br></div><div dir="ltr">> And this is just to begin with....<br></div><div dir="ltr">><br></div><div dir="ltr">> Another idea I had is to NOT cache on localStorage on client side but on<br></div><div dir="ltr">> server side. So that is, if a user clicks on a tab and does the ajax<br></div><div dir="ltr">> request, I do not re-render the component in Seaside (avoid all cost of<br></div><div dir="ltr">> #renderContentOn: etc) but instead  answered a cached HTML+JS.  Of course,<br></div><div dir="ltr">> here I still pay request, network, etc, but at least I avoid HTML<br></div><div dir="ltr">> generation.<br></div><div dir="ltr">><br></div><div dir="ltr">><br></div><div dir="ltr">> So I wonder...has anyone ever did something like this? Note that at the<br></div><div dir="ltr">> moment I cannot afford going with a client-side UI like angular or<br></div><div dir="ltr">> whatever.<br></div><div dir="ltr">><br></div><div dir="ltr">> Thanks in advance,<br></div><div dir="ltr">><br></div><div dir="ltr">> --<br></div><div dir="ltr">> Mariano<br></div><div dir="ltr">> <a href="http://marianopeck.wordpress.com" target="_blank">http://marianopeck.wordpress.com</a><br></div><div dir="ltr">> _______________________________________________<br></div><div dir="ltr">> seaside mailing list<br></div><div dir="ltr">> <a ymailto="mailto:seaside@lists.squeakfoundation.org" href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a><br></div><div dir="ltr">> <a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br></div><div dir="ltr">><br></div><div dir="ltr">><br></div><div dir="ltr">><br></div><div dir="ltr">> _______________________________________________<br></div><div dir="ltr">> seaside mailing list<br></div><div dir="ltr">> <a ymailto="mailto:seaside@lists.squeakfoundation.org" href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a><br></div><div dir="ltr">> <a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br></div><div dir="ltr">><br></div><div dir="ltr">><br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">-- <br></div><div dir="ltr">Mariano<br></div><div dir="ltr"><a href="http://marianopeck.wordpress.com" target="_blank">http://marianopeck.wordpress.com</a><br></div><div dir="ltr">-------------- next part --------------<br></div><div dir="ltr">An HTML attachment was scrubbed...<br></div><div dir="ltr">URL: <<a href="http://lists.squeakfoundation.org/pipermail/seaside/attachments/20170310/15823057/attachment.html" target="_blank">http://lists.squeakfoundation.org/pipermail/seaside/attachments/20170310/15823057/attachment.html</a>><br></div><div dir="ltr"><br></div><div dir="ltr">------------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">Subject: Digest Footer<br></div><div dir="ltr"><br></div><div dir="ltr">_______________________________________________<br></div><div dir="ltr">seaside mailing list<br></div><div dir="ltr"><a ymailto="mailto:seaside@lists.squeakfoundation.org" href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a><br></div><div dir="ltr"><a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br></div><div dir="ltr"><br></div><div dir="ltr"><br></div><div dir="ltr">------------------------------<br></div><div dir="ltr"><br></div><div dir="ltr">End of seaside Digest, Vol 171, Issue 4<br></div><div dir="ltr">***************************************<br></div> </div> </blockquote></div>