[Seaside] With several JQDialog ... it gets very slow!
Mariano Martinez Peck
marianopeck at gmail.com
Tue Jun 24 14:53:04 UTC 2014
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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20140624/4189ccfa/attachment-0001.htm
More information about the seaside
mailing list