[Seaside] With several JQDialog ... it gets very slow!
Mariano Martinez Peck
marianopeck at gmail.com
Fri Jun 27 11:55:31 UTC 2014
Hi Johan,
Any idea so that I can try over the weekend?
Thanks a lot in advance,
On Tue, Jun 24, 2014 at 11:53 AM, Mariano Martinez Peck <
marianopeck at gmail.com> wrote:
>
>
>
> On Mon, Jun 23, 2014 at 3:34 PM, Johan Brichau <johan at inceptive.be> wrote:
>
>> Mariano,
>>
>> While I prepare a better example to include in documentation, you can
>> find a complete (but simple) class that exhibits the entire idea in
>> attachment.
>>
>>
> Thank you very much Johan. I didn't answer before to your original answer
> because I didn't know even where to start ;)
>
>
>> In a case such as yours, the page rendering is slow because for each cell
>> both a dialog opening script and a click handler script are generated. I'm
>> pretty sure the size of the response is relatively large too. This means a
>> considerable delay in rendering and transfer time.
>>
>
> Indeed. As far as I remember, it increased the response size by 30% (just
> adding popups to one column). But I will double check later.
>
>
>>
>> In the example, I have a simple component that generates the following
>> table.
>> Instead of generating a click handler on each anchor, I generate a single
>> click handler on the table that catches delegated click events from the
>> table cells:
>>
>> renderContentOn: html
>> html table
>> script: (self scriptForClickHandlerOn: html);
>> with:[
>> 1 to: 100 do:[:row | html tableRow:[
>> 1 to: 100 do:[:col |
>> html tableData:[
>> html anchor
>> class: 'clickme';
>> url: '#';
>> passenger: row at col
>> ;
>> with: (row at col)
>> printString]]]]]
>>
>>
>> The click handler script is a jQuery ajax callback that retrieves the
>> passenger from the anchor (see http://api.jquery.com/on/ on the meaning
>> of this inside the 'do:' part) and executes your dialog opening script.
>>
>> scriptForClickHandlerOn: html
>> | val |
>> ^ html jQuery this
>> on: 'click'
>> selector: '.clickme'
>> do: ((html jQuery ajax
>> callback: [:pass | val := pass ]
>> passengers: (html jQuery this);
>> script: [ :s | s << (self
>> scriptToOpenDialog: val on: s ) ]) asFunction: #(event))
>>
>> The end result is that:
>> - there is only one click handler script generated
>> - only those dialogs get generated that you need
>>
>> These are the basics. We have numerous cases where we had to implement
>> everything using delegated events. The nice part is that the 'single click
>> handler' can easily dispatch to the passenger to generate a response. In
>> that way, you can implement the same callbacks in your passengers, just
>> like when you would attach them directly to the generated anchor in the
>> table.
>>
>> Mind that storing passengers also has its overhead and I have noticed
>> that in Gemstone this is typically slower than in Pharo (something to
>> investigate next Seaside sprint actually).
>>
>
> Thanks. Yes, the basics are clear. I tried your example and it didn't work
> out of the box. The first thing I realized is that I needed to add the
> JQuery libs to the app registration. So I added a simple:
>
> JQExampleGrid class >> initialize
> (WAAdmin register: self asApplicationAt: 'popups')
> addLibrary: JQDevelopmentLibrary;
> addLibrary: JQUiDevelopmentLibrary;
> addLibrary: DpJQEggplantTheme;
> yourself
> Then I did a small change and I added the value as an argument:
>
> script: [ :s | s << (self scriptToOpenDialogOn: s value: val ) ])
> asFunction: #(event))
> So then I implemented:
>
> scriptToOpenDialogOn: html value: value ^ (html jQuery new dialog title:
> 'Dialog!'; html: (WAFormDialog new addMessage: ('Row: ', value x asString,
> ' Column: ', value y asString); yourself); autoOpen: true; draggable: true;
> resizable: false; position: 'top'; closeOnEscape: true; maxWidth: 900;
> width: 900; addButton: 'Close' do: html jQuery new dialog close)
>
>
> Note here that:
>
> 1) I removed the #open at the end and I put autoOpen to true. Otherwise,
> no popup would open. I already found this problem without these passengers
> stuff.
> 2) If I comment the #html of the popup...the popup only opens in the
> SECOND click (on a second column/row). If I want to render something using
> #html the popup will never open.
>
> So I still need to figure out why it only opens at the second click and
> how to render a custom component in #html:
>
> Thanks Johan for any other further help.
>
> Best,
>
>
>
>>
>> Hope this helps!
>> Johan
>>
>>
>>
>>
>> On 23 Jun 2014, at 15:52, Mariano Martinez Peck <marianopeck at gmail.com>
>> wrote:
>>
>> >
>> >
>> >
>> > On Fri, Jun 20, 2014 at 4:04 PM, Paul DeBruicker <pdebruic at gmail.com>
>> wrote:
>> > Johan is right, but another path is instead have the link in the cell
>> create
>> > then open the dialog, rather than creating all of the dialogs.
>> >
>> > Hi Paul, good idea. I am trying to make this to work but I wasn't fully
>> success.
>> > The first problem is that with this code:
>> >
>> > html anchor
>> > onClick: (html jQuery new dialog
>> > html: dialog;
>> > title: anItem class label;
>> > autoOpen: false;
>> > draggable: true;
>> > resizable: false;
>> > position: 'top';
>> > closeOnEscape: true;
>> > maxWidth: 900;
>> > width: 900;
>> > addButton: 'Close' do: html
>> jQuery new dialog close);
>> > with: linkText.
>> >
>> > whenever I click on the link, after that, the link disappears. That
>> is....that anchor I have just created above simply disappears as soon as I
>> click it. Any idea what could be?
>> >
>> > The second problem but I think this is I workarounded is that opening
>> the dialog did not work if I added a "open" at the end:
>> >
>> > html anchor
>> > onClick: (html jQuery new dialog
>> > html: dialog;
>> > title: anItem class label;
>> > autoOpen: false;
>> > draggable: true;
>> > resizable: false;
>> > position: 'top';
>> > closeOnEscape: true;
>> > maxWidth: 900;
>> > width: 900;
>> > addButton: 'Close' do: html
>> jQuery new dialog close) open;
>> >
>> > with that..there was no way to open the popup...I would trigger
>> nothing. And the js that would generate was this:
>> >
>> >
>> onclick='$(this).dialog("open",{"autoOpen":false,"open":function(){$(this).load("/reps",["_s=0KoItSGAUSDCI9-O","_k=Fs2RujK7zl29NheB","accessMenu=Clients","activityMenu=Accounts","102"].join("&"))},"title":"XXX","draggable":true,"resizable":false,"position":"top","closeOnEscape":true,"maxWidth":900,"width":900,"buttons":{"Close":function(){$(this).dialog("close")}}})'
>> >
>> > So the workaround I found was to set the "autoOpen: true" to the dialog
>> and have no explicit #open.
>> >
>> > Thanks in advance,
>> >
>> >
>> >
>> > Or just have
>> > one dialog right before the closing body tag and have the link in the
>> cell
>> > load the dialogs contents via ajax and then open it.
>> >
>> >
>> >
>> >
>> >
>> >
>> >
>> > Mariano Martinez Peck wrote
>> > > Hi guys,
>> > >
>> > > I have just started to use JQDialog...because it is already
>> integrated and
>> > > very easy to use. In my case, I have tables where for some columns,
>> the
>> > > contents shows a link to open a popup. With a table of around 250
>> items
>> > > and
>> > > 3 or 4 columns with popups..that is ... 1000 JQDialog instances at
>> render
>> > > time, it gets very slow! The table passes from 1s to render to 3s! :(
>> > >
>> > > I have benchmarked everything. From the server side, the response is
>> fast.
>> > > I have even tried by specifying no html (so the popup does simply
>> > > nothing....and same results). The way I create the dialogs and the
>> button
>> > > for them is:
>> > >
>> > > div := html div
>> > > script: (html jQuery new dialog
>> > > html: dialog;
>> > > title: anItem class label;
>> > > autoOpen: false;
>> > > draggable: true;
>> > > resizable: false;
>> > > position: 'top';
>> > > closeOnEscape: true;
>> > > maxWidth: 900;
>> > > width: 900;
>> > > addButton: 'Close' do: html jQuery new dialog close).
>> > > id := div ensureId.
>> > > html anchor
>> > > onClick: (html jQuery id: id) dialog open;
>> > > with: (description toString: anItem). ]
>> > >
>> > > Is there a way to improve this? For example, there is no way to make
>> the
>> > > js
>> > > dialog object creation lazy (upon button click)? I read that making
>> the
>> > > dialog not draggable and not resizable increases speed..but I tested
>> and
>> > > it
>> > > was not that much.
>> > >
>> > >>From js profiling it looks like what it takes time is the dialog
>> creation.
>> > >
>> > > Thanks in advance,
>> > >
>> > >
>> > > --
>> > > Mariano
>> > > http://marianopeck.wordpress.com
>> > >
>> > > _______________________________________________
>> > > seaside mailing list
>> >
>> > > seaside at .squeakfoundation
>> >
>> > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> >
>> >
>> >
>> >
>> >
>> > --
>> > View this message in context:
>> http://forum.world.st/With-several-JQDialog-it-gets-very-slow-tp4763985p4764003.html
>> > Sent from the Seaside General mailing list archive at Nabble.com.
>> > _______________________________________________
>> > seaside mailing list
>> > seaside at lists.squeakfoundation.org
>> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> >
>> >
>> >
>> > --
>> > Mariano
>> > http://marianopeck.wordpress.com
>> > _______________________________________________
>> > seaside mailing list
>> > seaside at lists.squeakfoundation.org
>> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>> _______________________________________________
>> seaside mailing list
>> seaside at lists.squeakfoundation.org
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>
>
> --
> Mariano
> http://marianopeck.wordpress.com
>
--
Mariano
http://marianopeck.wordpress.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20140627/c2f513da/attachment-0001.htm
More information about the seaside
mailing list