Nested div rendering question

I have noticed the following; if I have a div as a container, and  
some number divs inside of it, I can use SUUpdater to update the  
outer div with the associated render method and all the nested divs  
also render properly.

If I use html evaluator to update the outer div, none of the internal  
divs get rendered. Is this the expected behavior?

Thanks,

Brian

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

> I have noticed the following; if I have a div as a container, and
> some number divs inside of it, I can use SUUpdater to update the
> outer div with the associated render method and all the nested divs
> also render properly.

As far as I know the SUUpdater always affects the contents of the selected DIV.

> If I use html evaluator to update the outer div, none of the internal
> divs get rendered. Is this the expected behavior?

Can you provide two examples? I don't exactly follow.

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Ok, here is an off the cuff screencast the demonstrates the problem  
so we have easier context to talk about it: http://www.techgame.net/ 
~brian/evaluatorscreencast.mov (16mb quicktime movie).


The code I use in the tree component for the tree item anchors:

ALShoreWebTreeNode>>renderContentOn:

renderContentOn: html
        html anchor
                onClick: (html updater
                        id: 'buttonLinkArea';
                        callback: [:r | self onSelected. self renderButtonLinkEditorOn: r];
                        onSuccess: (html evaluator
                                callback: [:s |
                                        s element id: 'treeContentArea'; render: [:r | self tree parent  
parent renderTreeComponentOn: r].
                                        s element id: 'moveButtonArea'; render: [:r | self tree parent  
parent renderMoveButtonsOn: r].
                                        s element id: 'clipboardButtonsArea'; render: [:r | self tree  
parent parent renderClipboardButtonsOn: r]]));
                with: [wrappedObject renderSummaryOn: html]


Please note the callback that sets the #selectedNode in the callback,  
then renders the editor on the right hand side with  
#renderButtonLinkEditor: . Every time an item in the tree is clicked,  
the editor is updated and works great.

Here is the first part of ALWDDContentEditor>>renderActionButtonsOn:


renderActionButtonsOn: html
       
        html button class: 'editorControlSquareButton';
                onClick: (html evaluator
                        callback: [:v | self buttonNewCategory] value: 'New Category';
                        callback: self updateElementsBlock;
                        return: false);
                disabled: self canButtonNewCategory not;
                with: 'New Category'.

... and the #updateElementsBlock

updateElementsBlock
        ^ [:s |
                s element id: 'treeContentArea'; render: [:r | self  
renderTreeComponentOn: r].
                s element id: 'moveButtonArea'; render: [:r | self  
renderMoveButtonsOn: r].
                s element id: 'buttonLinkArea'; render: [:r | self  
renderButtonLinkEditorOn: r].
                s element id: 'clipboardButtonsArea'; render: [:r | self  
renderClipboardButtonsOn: r]]



  - the difference being how the #renderButtonLinkEditorOn: is being  
invokes, either in the #callback: of the SUUpdater, or in a #render:  
of SUScript.

I hope this is a little clearer now!

Thank you for taking a look at this,

- Brian


On Oct 3, 2007, at 6:59 PM, Lukas Renggli wrote:

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Two quick suggestions, one, like Lukas said, fire up firebug.  More
specifically, after ensuring there aren't any errors of any kind, under the
Net tab select XHR and look at the individual xml http responses coming
across and make sure they're both actually rendering the same JavaScript.
You assume they are, but are they really?  I rigged up a quick sample and
see the following...

renderContentOn: html
        (html div) id: #test1; with: [self renderRandomOn: html].
        (html div) id: #test2; with: [self renderRandomOn: html].
        (html button)
                onClick: ((html evaluator)
                                        callback: [:v | ] value: 'Dude';
                                        callback: [:s |
                                                        (s element) id:
#test1; render: [:r | self renderRandomOn: r].
                                                        (s element) id:
#test2; render: [:r | self renderRandomOn: r]];
                                        return: false);
                with: 'test'

renderRandomOn: html
        (html div) style: 'border:1px solid red;';
                with: [html text: 1000 atRandom asString.
                        self renderRandomAgainOn: html]

renderRandomAgainOn: html
        (html div) style: 'border:1px solid blue;'; with: 1000 atRandom
asString

Looks to me like what you're doing in your renderActionButtonsOn and I'm
rendering two nested divs, but it works for me and the inner divs are
updated fine.  Looking at the actual response for the xml http request in
firebug I see this JavaScript rendered when I click the button...

$('test1').update('<div style="border:1px solid red;">715<div
style="border:1px solid blue;">666</div></div>');
$('test2').update('<div style="border:1px solid red;">151<div
style="border:1px solid blue;">244</div></div>')

Which is what I'd expect, both inner divs are updated.  BTW, nice looking
app, especially if you've gotten so far without Firebug.  Could be something
possibly screwy in your image or a bug.  I'd try to simplify the problem
down to a fileout you can directly share, it's really hard trying to figure
this stuff out without all of the code in a runnable form.

Ramon Leon
http://onsmalltalk.com 

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Sorry but I do not understood the need of using an evaluator to do an
updater job. Why one could want to do that?

Sebastian Sastre


_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Sebastian Sastre wrote:
> Sorry but I do not understood the need of using an evaluator to do an
> updater job. Why one could want to do that?
>
> Sebastian Sastre
>
>  
It allows you to update more than one item/section/div of your page in
one round trip to the server. Where updater is specifically aiming to
update a single div with the given id.

Keith
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

I see your point. LOL, I wasn't seing the problem because I didn't noticed
that I'm already making use of that single round trip with an updater *and*
do that with an arbitrary number of elements but that is more about the way
I'm using/designing the components to be able to use updaters like that. Is
good to know that :P

Best regards,

Sebastian

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

First of all, thank you very much for the detailed reply and taking  
time to look at this.

I fired up Firebug and find no errors, so now I'm starting to compare  
the Javascript...


Thanks for the compliment on the site. If I can't figure this out,  
I'll do a mock up... which will probably work :)

- Brian


> Ramon Leon
> http://onsmalltalk.com
>
> _______________________________________________
> Seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

>
> First of all, thank you very much for the detailed reply and
> taking time to look at this.

No problem, let us know how it works out.

Ramon Leon
http://onsmalltalk.com 

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Alright, I have used firebug to look at the differences between these  
two methods of updating, the one that works:

        html anchor
                onClick: (html updater
                        id: 'buttonLinkArea';
                        callback: [:r | self onSelected. self renderButtonLinkEditorOn: r];
                        onSuccess: (html evaluator
                                callback: [:s |
                                        s element id: 'treeContentArea'; render: [:r | self tree parent  
parent renderTreeComponentOn: r].
                                        s element id: 'moveButtonArea'; render: [:r | self tree parent  
parent renderMoveButtonsOn: r].
                                        s element id: 'clipboardButtonsArea'; render: [:r | self tree  
parent parent renderClipboardButtonsOn: r].
                                        s element id: 'actionButtonArea'; render: [:r | self tree parent  
parent renderActionButtonsOn: r]];
                                        return: false));
                with: [wrappedObject renderSummaryOn: html]


and the one that doesn't:

        html button class: 'editorControlSquareButton';
                onClick: (html evaluator
                        callback: [:s | self buttonNewCategory.
                                s element id: 'buttonLinkArea'; render: [:r | self  
renderButtonLinkEditorOn: r].
                                s element id: 'treeContentArea'; render: [:r | self  
renderTreeComponentOn: r].
                                s element id: 'moveButtonArea'; render: [:r | self  
renderMoveButtonsOn: r].
                                s element id: 'clipboardButtonsArea'; render: [:r | self  
renderClipboardButtonsOn: r]
                                ];
                        return: false);
                disabled: self canButtonNewCategory not;
                with: 'New Category'.




This is the response in Firebug for the one that DOES NOT work: All  
the div elements are there, but
the form elements are hidden and don't have their normal javascript  
attached to them.
------------------------------------------------------------------------
----------------------------------------------------------------


$('buttonLinkArea').update('<p class="iconEditorHeading"><label>LINK  
TO CATEGORY</label></p>
<div id="buttonLinkInfoArea">
     <div id="buttonInfoPanel">
         <form accept-charset="utf-8" id="infoForm" method="post"  
action="http://localhost:9091/seaside/webadmin">
             <input name="_s" value="UZYGKZfoMRDScqFR" type="hidden"  
class="hidden"/>
             <input name="_k" value="IOIkrsKx" type="hidden"  
class="hidden"/>
         </form>
     </div>
     <div id="buttonImagePanel">
         <form accept-charset="utf-8" id="eid14345" method="post"  
action="http://localhost:9091/seaside/webadmin">
             <input name="_s" value="UZYGKZfoMRDScqFR" type="hidden"  
class="hidden"/>
             <input name="_k" value="IOIkrsKx" type="hidden"  
class="hidden"/>
         </form>
     </div>
     <div id="buttonAudioPanel">
         <form accept-charset="utf-8" id="eid14346" method="post"  
action="http://localhost:9091/seaside/webadmin">
             <input name="_s" value="UZYGKZfoMRDScqFR" type="hidden"  
class="hidden"/>
             <input name="_k" value="IOIkrsKx" type="hidden"  
class="hidden"/>
         </form>
     </div>
</div>')

.... This is the one the DOES Work
------------------------------------------------------------------------
----------------------------------------------------------------

<p class="iconEditorHeading"><label>LINK TO CATEGORY</label></p>
<div id="buttonLinkInfoArea">
     <div id="buttonInfoPanel">
         <form accept-charset="utf-8" id="infoForm" method="post"  
action="http://localhost:9091/seaside/webadmin">
             <label class="buttonInfoFieldLabel">Title:</label>
             <input class="buttonInfoField text" name="270"  
onblur="ShoreProgressOverlay.current = new ShoreProgressOverlay();  
ShoreProgressOverlay.current.open();new Ajax.Updater(this,'http://
localhost:9091/seaside/webadmin',{'onSuccess':function(){new  
Ajax.Updater('treeContentArea','http://localhost:9091/seaside/ 
webadmin',{'evalScripts':true,'parameters':
['_s=UZYGKZfoMRDScqFR','_k=IOIkrsKx','272'].join
('&amp;')})},'evalScripts':true,'parameters':['271',$
('infoForm').serialize()].join('&amp;')})" value="A Category"  
type="text"/>
             <label class="buttonInfoFieldLabel">Notes:</label>
             <textarea class="buttonInfoField" rows="6"  
style="height: 110px;>width: 205px;" name="273"  
onblur="ShoreProgressOverlay.current =  new ShoreProgressOverlay();  
ShoreProgressOverlay.current.open();new Ajax.Updater(this,'http://
localhost:9091/seaside/webadmin',{'evalScripts':true,'parameters':
['274',$('infoForm').serialize()].join('&amp;')})"></textarea>
             <input name="_s" value="UZYGKZfoMRDScqFR" type="hidden"  
class="hidden"/>
             <input name="_k" value="IOIkrsKx" type="hidden"  
class="hidden"/>
         </form>
     </div>
     <div id="buttonImagePanel">
         <form accept-charset="utf-8" id="eid14348" method="post"  
action="http://localhost:9091/seaside/webadmin">
             <label class="buttonImageFieldLabel">Image:</label>
             <img alt="" class="buttonImage"  
onclick="ShoreModalDialog.current =  new ShoreModalDialog
(&quot;Please Select Picture for Icon&quot;, 968, 350);  
ShoreModalDialog.current.open();;ShoreProgressOverlay.current =  new  
ShoreProgressOverlay (); ShoreProgressOverlay.current.open();new  
Ajax.Updater('shoreModalDialog','http://localhost:9091/seaside/ 
webadmin',{'evalScripts':true,'parameters':
['_s=UZYGKZfoMRDScqFR','_k=IOIkrsKx','275'].join('&amp;' )})"/>
             <button onclick="ShoreModalDialog.current =  new  
ShoreModalDialog(&quot;Please select a file&quot;, 968, 350);  
ShoreModalDialog.current.open();;ShoreProgressOverlay.current = new  
ShoreProgressOverlay(); ShoreProgressOverlay.current.open();new  
Ajax.Updater('shoreModalDialog','http://localhost:9091/seaside/ 
webadmin',{'evalScripts':true,'parameters':
['_s=UZYGKZfoMRDScqFR','_k=IOIkrsKx','276'].join('&amp;')})"  
type="button" class="button">Select New Image</button>
             <input name="_s" value="UZYGKZfoMRDScqFR" type="hidden"  
class="hidden"/>
             <input name="_k" value="IOIkrsKx" type="hidden"  
class="hidden"/>
         </form>
     </div>
     <div id="buttonAudioPanel">
         <form accept-charset="utf-8" id="eid14349" >method="post"  
action="http://localhost:9091/seaside/webadmin">
             <label class="buttonAudioFieldLabel">Audio:</label><br/>
             <input class ="buttonAudioField text"  
id="iconAudioFilename" name="277" value="" type="text"/>
             <a id="audioFieldHelpShow" onmouseover="new Effect.Appear
('toggle')" onmouseout="new Effect.Puff('toggle')"  
href="javascript:void (0)"></a>
             <br/>
             <div id="toggle" style="display: none;">
                 <div id="audioFieldHelpText" class="helpText"> </div>
             </div>
             <button onclick="ShoreModalDialog.current =  new  
ShoreModalDialog(&quot;Please Select an Audio File&quot;, 968, 350);  
ShoreModalDialog.current.open();;ShoreProgressOverlay.current =  new  
ShoreProgressOverlay(); ShoreProgressOverlay.current.open();new  
Ajax.Updater('shoreModalDialog','http://localhost:9091/seaside/ 
webadmin',{'evalScripts':true,'parameters':
['_s=UZYGKZfoMRDScqFR','_k=IOIkrsKx','278'].join('&amp;')})"  
type="button" class="button">Select New Audio</button>
             <div style="margin-right:  100px; display: inline;  
">&nbsp;</div><button id="recordbutton" style="color: red;"  
onclick="new Ajax.Request('http://localhost:9091/seaside/webadmin',
{'parameters':['_s=UZYGKZfoMRDScqFR','_k=IOIkrsKx','279'].join
('&amp;')})" type="button" class="button">RECORD NEW</button>
             <button id="playButton" onclick="new Ajax.Request
('http://localhost:9091/seaside/webadmin',{'parameters':
['_s=UZYGKZfoMRDScqFR','_k=IOIkrsKx','280'].join('&amp;')})"  
type="button" class="button">Play</button>
             <input name="_s" value="UZYGKZfoMRDScqFR" type="hidden"  
class="hidden"/> <input name="_k" value="IOIkrsKx" type="hidden"  
class="hidden"/>
         </form>
     </div>
</div>

On Oct 5, 2007, at 12:15 AM, Ramon Leon wrote:

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

> Alright, I have used firebug to look at the differences
> between these two methods of updating, the one that works:

> This is the response in Firebug for the one that DOES NOT
> work: All the div elements are there, but the form elements
> are hidden and don't have their normal javascript attached to them.

OK, at least you have an idea now of what's not working.  My attempts to
recreate this utterly fail, but I'm using pure Seaside, I wonder if
ShoreComponents isn't getting tricky and messing up the response here.  Try
changing the updated components to render something else and see if you can
get Seaside to misbehave by itself, I can't seem to.

This doesn't help me help you much, because I can't run your example.  You
need to create this as a test case that you can file out that someone could
file in and debug.  I'll start you off, attached is my test case, adjust it
to make it fail and send it back.

Ramon Leon
http://onsmalltalk.com 

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside