[Seaside] With several JQDialog ... it gets very slow!
Mariano Martinez Peck
marianopeck at gmail.com
Fri Jun 27 13:03:19 UTC 2014
Hi Johan. I will take a look to what you said. However, note that the exact
same of using the JQDialog DO work if I do "one anchor and one dialog" per
cell, as I posted at the very beginning of this thread. So it seems somehow
related to the new approach you suggested. May it be related to the fact
that to #scriptToOpenDialogOn:value: the html canvas I pass around is
actually a JQScript rather than a WAHtmlCanvas? May this affect the way the
JQDialog processes the #html: (In this example a WAFormDialog). ?
Thanks!
On Fri, Jun 27, 2014 at 9:29 AM, Johan Brichau <johan at inceptive.be> wrote:
> Hey Mariano,
>
> Sorry, I forgot about your question.
>
> The issue is that I don't have experience using the JQDialog.
> Maybe you should take a look at the script that is executed and if that
> corresponds to how the jQuery Dialog is supposed to be used?
>
> I'm pretty sure that the event delegation has nothing to do with the
> second click. Does the script get executed client side?
> You can test that by concatenating a (JSStream on: 'debugger') before the
> jqdialog script. In that way, you can better trace what happens client-side.
>
>
> scriptToOpenDialogOn: html value: value
>
> ^ (JSStream on: 'debugger'),
> (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)
>
>
> But I'm afraid I'm a little buried in other work so I cannot start
> experimenting with JQDialog right now...
>
> Johan
>
> On 27 Jun 2014, at 13:55, Mariano Martinez Peck <marianopeck at gmail.com>
> wrote:
>
> > 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
> > _______________________________________________
> > 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/20140627/bdc654b5/attachment-0001.htm
More information about the seaside
mailing list