Question

I’ve just attempted to make a simple script to use ajax to load a new part of a page. The class remove/add to change the relevant text colour works fine. However, the new html does not seem to appear. I have a feeling this is to do with my general js syntax but I can’t work it out.

Javascript:

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#page_menu a").click(function() {
            $("#page_menu p").removeClass("current");
            $(this).children().addClass("current");

            var project = $(this).attr("name");
            var loadUrl = project + ".html";

            $("#project_image").load(loadUrl);

            return false;
            });
        });
    </script>

An example of an anchor tag in the html would be:

<a name=example href="#">Example</a>

The html file I’m looking to load would be called “example.html” and the code in it:

<h1>Hello</h1>

I’m sure it’s pretty straight-forward but I’m just not seeing it!

Cheers,

Rich

Answer 1

I would use the href of the anchor directly:

<a href="example.html">Example</a>
<div id="project_image"></div>

And then AJAXify it:

$(function() {
    $('#page_menu a').click(function() {
        $('#page_menu p').removeClass('current');
        $(this).children().addClass('current');
        $('#project_image').load(this.href);
        return false;
    });
});