[Seaside] With several JQDialog ... it gets very slow!
Mariano Martinez Peck
marianopeck at gmail.com
Sat Jun 28 01:32:04 UTC 2014
Hi Johan,
I made it work!!!! I am not sure if this is the solution. But the problem
was indeed related to 'this'. I ended up creating a div for the table, that
is:
| divID |
divID := html div ensureId.
html table script: (self scriptForClickHandlerOn: html); with:[ * | divID |
divID := html div ensureId.* 1 to: 100 do:[:row | html tableRow:[ 1 to: 100
do:[:col |
.....
And then, the popup is created this way:
(html jQuery: ('#',somewhereTheStoredID)) dialog
so that way, it translates to $(idXXX).dialog .... instead of
$(this).dialog ..
Thanks Johan, this is awesome. Now I need to integrate this into my app and
make some benchs.
Thanks again,
On Fri, Jun 27, 2014 at 10:16 AM, Mariano Martinez Peck <
marianopeck at gmail.com> wrote:
>
>
>
> On Fri, Jun 27, 2014 at 10:06 AM, Johan Brichau <johan at inceptive.be>
> wrote:
>
>> Mariano,
>>
>> hm... the value of 'this' is certainly different (client-side).
>
>
>> Could you send me a file I can filein so I can get the exact example you
>> have? That would make it easier for me look at.
>>
>>
> Sure! Please find attach it. It is a slightly different version of the
> example you provided (the changes are the ones I mentioned in a previous
> email).
>
> Thanks Johan!
>
>
>
>> Johan
>>
>> On 27 Jun 2014, at 15:03, Mariano Martinez Peck <marianopeck at gmail.com>
>> wrote:
>>
>> > 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
>> > _______________________________________________
>> > 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/6d4fd79f/attachment-0001.htm
More information about the seaside
mailing list