Why is this not working? jquery ajax replace content in specific div

Question

Below I have the code on my site, but when I click on the link in this particular div , it just opens a new window, why is this?

 $(function(){ //bind a click event to the nav links $("#links a").bind("click", function(e){ //keep the links from going to another page by preventing their default behavior e.preventDefault(); //this = link; grab the url var pageLocation = this.href; //fire off an ajax request $.ajax({ url: pageLocation, //on success, set the html to the responsetext success: function(data){ $("#biocontent").html(data.responseText); } }); }); }); 

EDIT:

I still do not understand this, but here's where I am, my script looks like this

  <script type="text/javascript">(function(){ //bind a click event to the nav links $("#links a").bind("click", function(e){ //keep the links from going to another page by preventing their default behavior e.preventDefault(); //this = link; grab the url var pageLocation = $(this).attr("href") //fire off an ajax request $.ajax({ url: pageLocation, //on success, set the html to the responsetext success: function(data){ $("#biocontent").html(data); }, dataType : "html" }); }); 

});

and this is how I use it in my html <div id="links"> <a href="testvid.html"><img src="img/thumbs/img3.jpg" /></a>

but don’t leave anyway, please let me know what you think.

EDIT

So, I took the minimal parts of this code and moved it to a new document, and now it doesn’t work at all, but I feel like I have a problem with jQuery, so now it works, and I get this error in

17XMLHttpRequest cannot load file: ///Users/semaj4712/Desktop/WME%20Website/testvid.html. The origin of null is not allowed through Access-Control-Allow-Origin.

What I don’t know is what it means, therefore, as soon as I earn here, I must solve the problem with jQuery on the site itself.

Answer 1

You should call ajax with the specified type that you want to get.

  $.ajax({ url: pageLocation, //on success, set the html to the responsetext success: function(data){ $("#biocontent").html(data); }, dataType : "html" }); 

Answer 2

Instead, I suggest using the jQuery load function:

 $(document).ready(function(){ $("#links a").bind("click", function(e){ e.preventDefault(); var pageLocation = $(this).attr('href'); $("#biocontent").load(pageLocation,function(){ alert('Loaded!'); }); }); }); 

This is the easiest and most efficient way to extract data based on your code. I assume this is only HTML.

Also, in your last board you do not see a semicolon when you define pageLocation.

Hope this helps!

Answer 3

In the success callback, your data object must be JSON in order to contain a responseText , so you need to set the dataType field in the ajax call to 'json' . In your current situation, it looks like you are returning html back. Check out the ajax documentation on jquery.com for more information.

Try using the javascript console in chrome or firebug in firefox to see any errors. You will probably find it on the page

Edit: You are working on your file system! You cannot make ajax calls through your file system due to the same origin policy that browsers apply. This means that you cannot make ajax requests to other servers. You will need to put your html pages in the same domain in order to fulfill the request. What you do is request data from www.google.com when your domain is www.mydomain.com. You can only request data at www.mydomain.com. It would be best to set up an Apache server on your computer.

Answer 4

Based on your updates, you tried $ ("# biocontent"). load (pageLocation)? This is similar to what you are trying to do.

 $(function(){ //bind a click event to the nav links $("#links a").bind("click", function(e){ //keep the links from going to another page by preventing their default behavior e.preventDefault(); //this = link; grab the url var pageLocation = this.href; $("#biocontent").load(pageLocation); }); }); 

http://api.jquery.com/load/

Answer 5

So, I was able to understand this, it is related to using chrome and accessing files on my c drive, when using safari it worked, now I just have a problem with conflicting jquery, but I will do some research on this now, thanks to all the help guys .