how to use #replaceWith:

Hi,

I'm trying to figure out how to use #replaceWith:. After many permutations, still no-go. :-(

I want to render 2 divs. When the first is clicked, I want to replace the second with something else. Any suggestions?

renderContentOn: html

    html div
        style: 'height: 44px; width: 65px; background-color: red;';
        id: 'bob001';
        onClick: (html jQuery ajax html: [ :h |
            h render: ((h jQuery id: #bob002) replaceWith: Time now asString).
        ]);
        with: [html text: 'bob001'].
    html div
        style: 'height: 44px; width: 65px; background-color: green;';
        id: 'bob002';
        with: [html text: 'bob002'].
       
TIA,
Bob

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

The script you pass on to onClick has many strange things. It seems you are trying to render a script as an ajax response. 
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Ah, yes, thanks. I understand the way to do this with a #load, but the total replacement was eluding me. I've never quite grasped the non-symmetrical parts of seaside/jQuery/whatever.

If, as you say, I want to replace the *contents* of something, this works well:

onClick: ((html jQuery id: #bob002) load html: [:h | h render: Time now asString]);

But if I want to replace the thing entirely, it seems I need to do something more complicated:

onClick: ((html jQuery ajax script:[:s | s << ((s jQuery id: #bob002) replaceWith: [:h | h text: Time now asString])]);

I keep expecting the two bits of code to differ only in one word, but that's just me. ;-)

Anyway, thanks for untangling me.

Cheers,
Bob

On 9/18/10 10:27 AM, Johan Brichau wrote:

The script you pass on to onClick has many strange things. It seems you are trying to render a script as an ajax response. 

Seaside (and jQuery) have exactly what you need. Here's what you are probably trying to do:

onClick: ((html jQuery ajax script:[:s | s << ((s jQuery id: #bob002) replaceWith: [:h | h div with: Time now asString])]);

The above will attach a handler script to the onClick event, that loads and executes a script that replaces the second div with a new div.

However, you probably only want the internals of the div to be replaced. This script does exactly that:

onClick: ((html jQuery id: #bob002) load html: [:h | h render: Time now asString]);

The above will attach a handler script to the onClick event, that does an ajax html load to replace the contents of the second div with the time at which the click happened.

On 18 Sep 2010, at 15:19, Bob Arning wrote:

Hi,

I'm trying to figure out how to use #replaceWith:. After many permutations, still no-go. :-(

I want to render 2 divs. When the first is clicked, I want to replace the second with something else. Any suggestions?

renderContentOn: html

    html div
        style: 'height: 44px; width: 65px; background-color: red;';
        id: 'bob001';
        onClick: (html jQuery ajax html: [ :h |
            h render: ((h jQuery id: #bob002) replaceWith: Time now asString).
        ]);
        with: [html text: 'bob001'].
    html div
        style: 'height: 44px; width: 65px; background-color: green;';
        id: 'bob002';
        with: [html text: 'bob002'].
       
TIA,
Bob

_______________________________________________
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

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