[Seaside] replacing DOM elements using AJAX (Scriptaculous)

[Robert Sirois]

I'm no Scriptaculous (however you spell that) user, but here's an example utilizing jQuery:

html image
    id: 'macd';
    src: 'http://www.seaside.st/styles/logo-plain.png'.
        
    html break.

    html anchor
        onClick: (html jQuery ajax script: [:script | script add: (
            
            (script jQuery: #macd) attributeAt: 'src' put: 'http://www.lukas-renggli.ch/files/4d/y6mlhntkxm44gwm09o7ufxh7tlij4u/diff.png'
    
        )
        ]);
        with: 'Replace it'.

Here's some pointers:

a) The image path you have is invalid.
b) The 'url' attribute is actually 'src', and will be rendered that way (check your page source with Firebug or something).
c) You cannot create an object ie. "(html image id: 'macd'; url: 'http://etrade.com/IBM.macd.gif')" and render it this way.
d) I called an ajax script, which isn't necessary unless you want to use a variable for changing the image. The following works fine for a static url:

"onClick: ((html jQuery: #macd) attributeAt: 'src' put: 'http://www.lukas-renggli.ch/files/4d/y6mlhntkxm44gwm09o7ufxh7tlij4u/diff.png');"

I hope this helps, someone else please elaborate on this... I'm certainly no expert :)

RS

Thanks for the random image Lukas :p

> To: seaside at lists.squeakfoundation.org
> From: squeakman at gmail.com
> Date: Tue, 29 Sep 2009 17:57:40 -0400
> Subject: [Seaside] replacing DOM elements using AJAX (Scriptaculous)
> 
> Greetings,
> 
> I am attempting to replace one gif file with another using AJAX.  When I 
> click on the label 'Replace it' what I want is to replace the original 
> gif with a new gif.
> 
> I suspect that I am using SUElement>>replace: incorrectly.
> 
> Can you tell me what I am doing wrong?  I appreciate any help.
> 
> Thanks,
> Frank
> 
> --------- code snippet follows ------
> 
> renderContentOn: html
> 
> 	"original gif file - for WSM"
> 	html image id: 'macd';
> 	url: 'http://etrade.com/WSM.macd.gif'.
> 		
> 	html break.
> 	html anchor
> 		onClick: (html evaluator
> 		    callback: [:script |
> 		    script element id: 'macd';
> 						
> 		    "the replacement gif - for IBM"
> 		    replace: (html image id: 'macd';
> 		    url: 'http://etrade.com/IBM.macd.gif')]);
> 		with: 'Replace it'
> 
> 
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
 		 	   		  
_________________________________________________________________
Bing™  brings you maps, menus, and reviews organized in one place.   Try it now.
http://www.bing.com/search?q=restaurants&form=MLOGEN&publ=WLHMTAG&crea=TEXT_MLOGEN_Core_tagline_local_1x1
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20090929/92999dfb/attachment.htm