[Seaside] With several JQDialog ... it gets very slow!

[Johan Brichau]

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.

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.

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).

Hope this helps!
Johan

-------------- next part --------------
A non-text attachment was scrubbed...
Name: JQExampleGrid.st
Type: application/octet-stream
Size: 1681 bytes
Desc: not available
Url : http://lists.squeakfoundation.org/pipermail/seaside/attachments/20140623/3a731610/JQExampleGrid-0001.obj
-------------- next part --------------


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