I need some help with the Load function in JQuery

Question

I currently have links w/ class="ajax" that I want to retrieve the element with id="test" from the file "data.html" in the same directory, and put that content into the id="content" div on my page:

<script>
$(document).ready(function(){
    $("a.ajax").click(function(event){
    $("#content").load("/data #test");
    });
});
</script>
<a class="ajax" href="#">Text</a>
<div id="content"></div>

and externally, but in the same directory, I have data.html:

<div id="test">Will this show up?</div>

On the clicking of the anchor, Safari reports "page loading interupted", and no change occurs.

I definitely have JQuery called in the header. Can I get some help with this function? Thanks!

Answer 1

You have /data but the file is /data.html , assuming you're in the root. :)

I just tested what you have with this change and it works fine for me. I also recommend you get a tool like Firebug so you can easily see what your AJAX requests are doing.

Answer 2

$.ajax({
    url: "data.html",
    type: "POST",
    success: function (answer) {
        $("main_content").html($(answer).find("div#content_id").html());
    }
});

I hope it will help you.