Re: Someone having tabs with Seaside html+js cached on localStorage?

jQuery has .one() which calls the function only once.   You could use that to
load your tab content on the first click

https://api.jquery.com/one/








Mariano Martinez Peck wrote
> On Fri, Mar 10, 2017 at 12:14 PM, Johan Brichau <

> johan@

> > wrote:
> 
>> Hi Mariano,
>>
>> Why are you not using css visibility?
>> 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.
>>
>>
> Thanks Johan,
> 
> 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?
> 
> Thanks in advance,
> 
> 
>> Johan
>>
>> On 10 Mar 2017, at 15:38, Mariano Martinez Peck <

> marianopeck@

> >
>> wrote:
>>
>> Hi guys,
>>
>> 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.
>>
>> 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.
>>
>> 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:
>>
>> $(''.workspaceTabContents'').empty().html(localStorage[''tabContents'' +
>> clickedTabId ]);
>>
>> 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.
>>
>> 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, :
>>
>> localStorage[''tabContents'' + previousActiveTabId ] =
>> $(''.workspaceTabContents'').html();
>>
>> it is the already modified HTML. Yet it has the JS...so it would
>> duplicate
>> my selects...
>>
>> And this is just to begin with....
>>
>> 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.
>>
>>
>> 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.
>>
>> Thanks in advance,
>>
>> --
>> Mariano
>> http://marianopeck.wordpress.com
>> _______________________________________________
>> seaside mailing list
>> 

> [email protected]

>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>>
>> _______________________________________________
>> seaside mailing list
>> 

> [email protected]

>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
> 
> 
> -- 
> Mariano
> http://marianopeck.wordpress.com
> 
> _______________________________________________
> seaside mailing list

> [email protected]

> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside





--
View this message in context: http://forum.world.st/Someone-having-tabs-with-Seaside-html-js-cached-on-localStorage-tp4938136p4938157.html
Sent from the Seaside General mailing list archive at Nabble.com.
_______________________________________________
seaside mailing list
[email protected]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside