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.