[Seaside] Nested div rendering question

Brian Brown rbb at techgame.net
Fri Oct 5 06:48:10 UTC 2007


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:

>>
>> 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
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside



More information about the seaside mailing list