[Catalyst] Catalyst + Ajax

[Bill Moseley]

On Thu, Dec 01, 2005 at 02:31:38PM +0000, Chisel Wright wrote:
> Since Ajax keeps cropping up on the list, I thought I'd make a start on
> a "Ajax with Catalyst" demo app.

Ya, this stuff is too sexy to ignore.

> I've had very little trouble with:
>  - some effects (reload, fade, appear)

Could I ask for a little basic help from someone that knows
javascript?  Not Ajax, but scriptaculous.

I'm using an effect to toggle display of a table.  I have some
text "Hide Table" with an onclick handler to hide the table and to
make text "Show Table" appear.  "Show Table"'s onclick handler shows
the table again and hides itself.  Easy enough.

In the odd chance someone doesn't have javascript enabled, I want to
not display the "Hide Table" text in the first place, and only display
it if javascript is available.

So, I set it's style in-line to display:none and use a window.onload
to make it appear.

This all works great -- the "Hide Table" text only shows up when
javascript is enabled.  But then it seems it doesn't have it's onclick
handler any more.  At least clicking on it doesn't make the table
hide.

Here's the details.


    <div id="hiddentable">
        <span id="tablehide" style="display:none;">Hide Table</span>

        (( show table here ))

    </div>
    <span id="tableshow" style="display:none;">Show Table</span>



I'm using Behaviour to register the javascript:

    /* 
        Make the "hide" text visible if javascript is enabled.
        This makes the "hide" text not do anything,
        comment out and it works
    */
    window.onload = function() {
        new Effect.Appear(document.getElementById('tablehide'));
    }


    var hide_rules = {
        '#tablehide' : function(e) {
            e.onclick = function() {
                new Effect.BlindUp(document.getElementById('hiddentable'));
                new Effect.Appear(document.getElementById('tableshow'));
            }
        },

        '#tableshow' : function(e) {
            e.onclick = function() {
                new Effect.BlindDown(document.getElementById('hiddentable'));
                new Effect.Fade(this);
            }
        },
    };

    Behaviour.register(hide_rules);




-- 
Bill Moseley
moseley at hank.org