Question

I’m not brilliant with AJAX but could somebody please write me a quick code for switching a DIV tag with an external page.

For example:

<script type="text/javascript">
// Fun Stuff Here //
</script>

<div id="random">HIDDEN</div>

<a href="externalpage.php?random=78"></a>

It would be AWESOME if the content could fade-in when it’s loaded.

Ok, I have this so far (but it doesn’t seem to be working):

<ul>
    <li><a href="random.html" class="load">ss3</a></li>
    <li><a href="random.php" class="load">ss4</a></li>
</ul>

<script type="text/javascript">
    $(function(){
        $("a.load").click(function (e) { 
            e.preventDefault();
            $("#folioWrap").load($(this).attr("href"));
        });
    });
</script>

<div id="folioWrap"></div>

Answer 1

You may want to try this JavaScript AJAX loader jQuery plugin that can load page elements content via AJAX and it alters all the links in such way that when you click on the links of the AJAX loaded content, the new page element content is also loaded via AJAX.

I suppose you can hack it to add any fade transition effects when the new page element is loaded.