<div dir="ltr"><br><div class="gmail_extra"><br><br><div class="gmail_quote">On Mon, Jun 23, 2014 at 3:34 PM, Johan Brichau <span dir="ltr">&lt;<a href="mailto:johan@inceptive.be" target="_blank" class="vt-p">johan@inceptive.be</a>&gt;</span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">Mariano,<br>
<br>
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.<br>
<br></blockquote><div><br></div><div>Thank you very much Johan. I didn&#39;t answer before to your original answer because I didn&#39;t know even where to start ;)</div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">

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&#39;m pretty sure the size of the response is relatively large too. This means a considerable delay in rendering and transfer time.<br>
</blockquote><div><br></div><div>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. </div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">

<br>
In the example, I have a simple component that generates the following table.<br>
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:<br>
<br>
renderContentOn: html<br>
        html table<br>
                script: (self scriptForClickHandlerOn: html);<br>
                with:[<br>
                        1 to: 100 do:[:row | html tableRow:[<br>
                                1 to: 100 do:[:col |<br>
                                        html tableData:[<br>
                                                html anchor<br>
                                                        class: &#39;clickme&#39;;<br>
                                                        url: &#39;#&#39;;<br>
                                                        passenger: row@col;<br>
                                                        with: (row@col) printString]]]]]<br>
<br>
<br>
The click handler script is a jQuery ajax callback that retrieves the passenger from the anchor (see <a href="http://api.jquery.com/on/" target="_blank" class="vt-p">http://api.jquery.com/on/</a> on the meaning of this inside the &#39;do:&#39; part) and executes your dialog opening script.<br>

<br>
scriptForClickHandlerOn: html<br>
        | val |<br>
        ^ html jQuery this<br>
                on: &#39;click&#39;<br>
                selector: &#39;.clickme&#39;<br>
                do: ((html jQuery ajax<br>
                                callback: [:pass | val := pass ]<br>
                                passengers: (html jQuery this);<br>
                                script: [ :s | s &lt;&lt; (self scriptToOpenDialog: val on: s ) ]) asFunction: #(event))<br>
<br>
The end result is that:<br>
- there is only one click handler script generated<br>
- only those dialogs get generated that you need<br>
<br>
These are the basics. We have numerous cases where we had to implement everything using delegated events. The nice part is that the &#39;single click handler&#39; 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.<br>

<br>
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).<br></blockquote><div><br></div><div>Thanks. Yes, the basics are clear. I tried your example and it didn&#39;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:</div>
<div><br></div><div>JQExampleGrid class &gt;&gt; initialize</div><div> (WAAdmin register: self asApplicationAt: &#39;popups&#39;)</div><div><span class="" style="white-space:pre">        </span>addLibrary: JQDevelopmentLibrary;</div>
<div><span class="" style="white-space:pre">        </span>addLibrary: JQUiDevelopmentLibrary;<span class="" style="white-space:pre">        </span></div><div><span class="" style="white-space:pre">        </span>addLibrary: DpJQEggplantTheme;</div>
<div><span class="" style="white-space:pre">        </span>yourself</div><div><span class="" style="white-space:pre">        </span></div><div>Then I did a small change and I added the value as an argument:</div><div><br></div><div>script: [ :s | s &lt;&lt; (self scriptToOpenDialogOn: s value: val ) ]) asFunction: #(event))</div>
<div><span class="" style="white-space:pre">                                </span></div><div><span class="" style="white-space:pre">So then I implemented:</span></div><div><span class="" style="white-space:pre"><br></span></div><div><span class=""><span style="white-space:pre">scriptToOpenDialogOn: html value: value
        
        ^ (html jQuery new dialog
                        title: &#39;Dialog!&#39;;
                        html: (WAFormDialog new
                                        addMessage: (&#39;Row: &#39;, value x asString, &#39; Column: &#39;, value y asString);
                                        yourself);
                        autoOpen: true;
                        draggable: true;
                        resizable: false;
                        position: &#39;top&#39;;
                        closeOnEscape: true;
                        maxWidth: 900;
                        width: 900;
                        addButton: &#39;Close&#39; do: html jQuery new dialog close) </span><br></span></div><div><span class="" style="white-space:pre"><br></span></div><div><br></div><div>Note here that:</div><div><br></div><div>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.</div>
<div>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. </div><div><br></div><div>So I still need to figure out why it only opens at the second click and how to render a custom component in #html:</div>
<div><br></div><div>Thanks Johan for any other further help.</div><div><br></div><div>Best, </div><div><br></div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">

<br>
Hope this helps!<br>
<span class=""><font color="#888888">Johan<br>
<br>
</font></span><br><br>
<br>
On 23 Jun 2014, at 15:52, Mariano Martinez Peck &lt;<a href="mailto:marianopeck@gmail.com" class="vt-p">marianopeck@gmail.com</a>&gt; wrote:<br>
<br>
&gt;<br>
&gt;<br>
&gt;<br>
&gt; On Fri, Jun 20, 2014 at 4:04 PM, Paul DeBruicker &lt;<a href="mailto:pdebruic@gmail.com" class="vt-p">pdebruic@gmail.com</a>&gt; wrote:<br>
&gt; Johan is right, but another path is instead have the link in the cell create<br>
&gt; then open the dialog, rather than creating all of the dialogs.<br>
&gt;<br>
&gt; Hi Paul, good idea. I am trying to make this to work but I wasn&#39;t fully success.<br>
&gt; The first problem is that with this code:<br>
&gt;<br>
&gt; html anchor<br>
&gt;       onClick: (html jQuery new dialog<br>
&gt;                                       html: dialog;<br>
&gt;                                       title: anItem class label;<br>
&gt;                                       autoOpen: false;<br>
&gt;                                       draggable: true;<br>
&gt;                                       resizable: false;<br>
&gt;                                       position: &#39;top&#39;;<br>
&gt;                                       closeOnEscape: true;<br>
&gt;                                       maxWidth: 900;<br>
&gt;                                       width: 900;<br>
&gt;                                       addButton: &#39;Close&#39; do: html jQuery new dialog close);<br>
&gt; with: linkText.<br>
&gt;<br>
&gt; 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?<br>
&gt;<br>
&gt; The second problem but I think this is I workarounded is that opening the dialog did not work if I added a &quot;open&quot; at the end:<br>
&gt;<br>
&gt; html anchor<br>
&gt;       onClick: (html jQuery new dialog<br>
&gt;                                       html: dialog;<br>
&gt;                                       title: anItem class label;<br>
&gt;                                       autoOpen: false;<br>
&gt;                                       draggable: true;<br>
&gt;                                       resizable: false;<br>
&gt;                                       position: &#39;top&#39;;<br>
&gt;                                       closeOnEscape: true;<br>
&gt;                                       maxWidth: 900;<br>
&gt;                                       width: 900;<br>
&gt;                                       addButton: &#39;Close&#39; do: html jQuery new dialog close) open;<br>
&gt;<br>
&gt;  with that..there was no way to open the popup...I would trigger nothing. And the js that would generate was this:<br>
&gt;<br>
&gt; onclick=&#39;$(this).dialog(&quot;open&quot;,{&quot;autoOpen&quot;:false,&quot;open&quot;:function(){$(this).load(&quot;/reps&quot;,[&quot;_s=0KoItSGAUSDCI9-O&quot;,&quot;_k=Fs2RujK7zl29NheB&quot;,&quot;accessMenu=Clients&quot;,&quot;activityMenu=Accounts&quot;,&quot;102&quot;].join(&quot;&amp;&quot;))},&quot;title&quot;:&quot;XXX&quot;,&quot;draggable&quot;:true,&quot;resizable&quot;:false,&quot;position&quot;:&quot;top&quot;,&quot;closeOnEscape&quot;:true,&quot;maxWidth&quot;:900,&quot;width&quot;:900,&quot;buttons&quot;:{&quot;Close&quot;:function(){$(this).dialog(&quot;close&quot;)}}})&#39;<br>

&gt;<br>
&gt; So the workaround I found was to set the &quot;autoOpen: true&quot; to the dialog and have no explicit #open.<br>
&gt;<br>
&gt; Thanks in advance,<br>
&gt;<br>
&gt;<br>
&gt;<br>
&gt;  Or just have<br>
&gt; one dialog right before the closing body tag and have the link in the cell<br>
&gt; load the dialogs contents via ajax and then open it.<br>
&gt;<br>
&gt;<br>
&gt;<br>
&gt;<br>
&gt;<br>
&gt;<br>
&gt;<br>
&gt; Mariano Martinez Peck wrote<br>
&gt; &gt; Hi guys,<br>
&gt; &gt;<br>
&gt; &gt; I have just started to use JQDialog...because it is already integrated and<br>
&gt; &gt; very easy to use. In my case, I have tables where for some columns, the<br>
&gt; &gt; contents shows a link to open a popup. With a table of around 250 items<br>
&gt; &gt; and<br>
&gt; &gt; 3 or 4 columns with popups..that is ... 1000 JQDialog instances at render<br>
&gt; &gt; time, it gets very slow! The table passes from 1s to render to 3s! :(<br>
&gt; &gt;<br>
&gt; &gt; I have benchmarked everything. From the server side, the response is fast.<br>
&gt; &gt; I have even tried by specifying no html (so the popup does simply<br>
&gt; &gt; nothing....and same results). The way I create the dialogs and the button<br>
&gt; &gt; for them is:<br>
&gt; &gt;<br>
&gt; &gt; div := html div<br>
&gt; &gt;       script: (html jQuery new dialog<br>
&gt; &gt; html: dialog;<br>
&gt; &gt;          title: anItem class label;<br>
&gt; &gt;          autoOpen: false;<br>
&gt; &gt; draggable: true;<br>
&gt; &gt; resizable: false;<br>
&gt; &gt; position: &#39;top&#39;;<br>
&gt; &gt; closeOnEscape: true;<br>
&gt; &gt; maxWidth: 900;<br>
&gt; &gt; width: 900;<br>
&gt; &gt;          addButton: &#39;Close&#39; do: html jQuery new dialog close).<br>
&gt; &gt; id := div ensureId.<br>
&gt; &gt;  html anchor<br>
&gt; &gt; onClick: (html jQuery id: id) dialog open;<br>
&gt; &gt; with: (description toString: anItem).  ]<br>
&gt; &gt;<br>
&gt; &gt; Is there a way to improve this? For example, there is no way to make the<br>
&gt; &gt; js<br>
&gt; &gt; dialog object creation lazy (upon button click)? I read that making the<br>
&gt; &gt; dialog not draggable and not resizable increases speed..but I tested and<br>
&gt; &gt; it<br>
&gt; &gt; was not that much.<br>
&gt; &gt;<br>
&gt; &gt;&gt;From js profiling it looks like what it takes time is the dialog creation.<br>
&gt; &gt;<br>
&gt; &gt; Thanks in advance,<br>
&gt; &gt;<br>
&gt; &gt;<br>
&gt; &gt; --<br>
&gt; &gt; Mariano<br>
&gt; &gt; <a href="http://marianopeck.wordpress.com" target="_blank" class="vt-p">http://marianopeck.wordpress.com</a><br>
&gt; &gt;<br>
&gt; &gt; _______________________________________________<br>
&gt; &gt; seaside mailing list<br>
&gt;<br>
&gt; &gt; seaside@.squeakfoundation<br>
&gt;<br>
&gt; &gt; <a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank" class="vt-p">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br>
&gt;<br>
&gt;<br>
&gt;<br>
&gt;<br>
&gt;<br>
&gt; --<br>
&gt; View this message in context: <a href="http://forum.world.st/With-several-JQDialog-it-gets-very-slow-tp4763985p4764003.html" target="_blank" class="vt-p">http://forum.world.st/With-several-JQDialog-it-gets-very-slow-tp4763985p4764003.html</a><br>

&gt; Sent from the Seaside General mailing list archive at Nabble.com.<br>
&gt; _______________________________________________<br>
&gt; seaside mailing list<br>
&gt; <a href="mailto:seaside@lists.squeakfoundation.org" class="vt-p">seaside@lists.squeakfoundation.org</a><br>
&gt; <a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank" class="vt-p">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br>
&gt;<br>
&gt;<br>
&gt;<br>
&gt; --<br>
&gt; Mariano<br>
&gt; <a href="http://marianopeck.wordpress.com" target="_blank" class="vt-p">http://marianopeck.wordpress.com</a><br>
&gt; _______________________________________________<br>
&gt; seaside mailing list<br>
&gt; <a href="mailto:seaside@lists.squeakfoundation.org" class="vt-p">seaside@lists.squeakfoundation.org</a><br>
&gt; <a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank" class="vt-p">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br>
<br>
<br>_______________________________________________<br>
seaside mailing list<br>
<a href="mailto:seaside@lists.squeakfoundation.org" class="vt-p">seaside@lists.squeakfoundation.org</a><br>
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank" class="vt-p">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br>
<br></blockquote></div><br><br clear="all"><div><br></div>-- <br>Mariano<br><a href="http://marianopeck.wordpress.com" target="_blank" class="vt-p">http://marianopeck.wordpress.com</a><br>
</div></div>