NYCPHP Meetup

[Mark Armendariz]

On 3/8/07, Rob Marscher <rmarscher at beaffinitive.com> wrote:
>
> Basically, you have a regular <a> tag link that goes to the location you
> want, but you also have an onclick javascript event for that link that does
> the ajax stuff and returns false so that the browser doesn't request the
> href part of the tag.  Ideally, you'll have an onload event to your page
> that attaches all these onclick events to your links so that you don't even
> have inline javascript.
> -Rob
>

Exactly... To test, you can do without the onload, just put your scripts at
the bottom of the page.  The added benefit to backloading your ajaxification
is that regardless of js enablement, the user could right click your link
and open in new tab or window or even bookmark it and it's still a plain
link that will open normally.

I would usually have all this in some elaborate library built for the
project with all kinds of fancy news specific 'stuff', but essentially
here's how I would do it (tested example in ie and ff - so you can download
prototype.js and test if you like)...

<html>
    <head>
        <script type="text/javascript" src="prototype.js"></script>
    </head>
    <body>
        <a href="/article/1" id="show_article_1">Show This Article</a>
    </body>
    <script>
        /////// This should probably be in a separate script file and get
started by an onload as Rob mentioned

        // give the link an id for function reference
        $('show_article_1')._id = 1;

        // tell it what to do with a click
        $('show_article_1').onclick = showArticle;

        function showArticle(link) {
            link = getTarget(link);

            // prototype::insertion - add the new paragraph tag after the
link
            new Insertion.After(link, getArticle(link._id));

            // change the link to close the article
            link.onclick = hideArticle;

            // make sure our link doesn't actually go anywhere
            return false;
        }

        function hideArticle(link) {
            link = getTarget(link);

            var the_article = $('article_' + link._id);

            // make sure we have an article to kill
            if (the_article !== undefined) {
                // kill it!
                the_article.parentNode.removeChild(the_article);
            }

            // change the link to show the article
            link.onclick = showArticle;

            // make sure our link doesn't actually go anywhere
            return false;
        }

        function getArticle(id) {
            // fling ajax brand pixie dust into air, clap hands and return
story text or for now, just 'story text'
            return '<p id="article_' + id + '">' + 'story text' + '</p>';
        }

        // cross browser utility function to get a link target
        function getTarget(element) {
            if (window.event != undefined) {
                return window.event.srcElement;
            }

            return element.target;
        }
    </script>
</html>

and some notes...
When you set an onclick event it passes itself (or a 'click' element) to the
function.  What's actually passed differs between browsers, so getTarget
ensures we get our anchor tag back every time.


I use prototype for my projects as it's done very well by me.  If you're not
familiar...

the $ function is nearly an equivalent to document.getElementById

the Insertion class handles manipulating the innerHTML in and around the
elements in your document.  It has 4 methods
Insertion.Before
Insertion.After
Insertion.Top
Insertion.Bottom
(I'll let you guess what they do)


Always return false from your onclick functions.  This tells the link not to
redirect.  Probably good to put some exception handling to make sure it
returns false no matter what.


And that's it.  Properly ajaxified / backward compatible.  Family Fun for
everyone.

Good luck, and thank you for the opportunity to procrastinate!

Mark Armendariz
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.nyphp.org/pipermail/talk/attachments/20070308/7fb13e93/attachment.html>