[Seaside] With several JQDialog ... it gets very slow!
Johan Brichau
johan at inceptive.be
Sat Jun 28 08:21:11 UTC 2014
Hi Mariano,
Aha, indeed, the dialog is supposed to be invoked on the DOM element that should be the dialog.
A quick look at the JQDialogFunctionalTest also reveals that.
As I said, I never used it, so I was not aware how it is supposed to be used.
Glad that you found it.
I woke up this morning thinking I still needed to investigate your problem.
What a good night sleep can do!! ;-))))
cheers
Johan
On 28 Jun 2014, at 03:32, Mariano Martinez Peck <marianopeck at gmail.com> wrote:
> 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
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
More information about the seaside
mailing list