jQuery Load question

JavaScript
1

Hi all,

I’m trying to get the following piece of code working (the spinning gif never loads, nor is the data retrieved), but its not and I can’t seem to see the problem - any thoughts

<html>
<head>
<title> this is an ajax test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">

function example_ajax_request() {

    // Put an animated GIF image insight of content
    $("#content").empty().html('<img src="ajax-loader.gif" />');

    // Make AJAX call
    $("#content").load("http://www.bbc.co.uk");
});
</script>

<head>
<body>

<p><input type="button" value="Load Content" onclick="example_ajax_request()" /></p>
<div id="content">
  Please click "Load Content" button to load content.
</div>

</body>
</html>

thanks!

2

I thought it might have been a problem with trynig to load data from an external site, so I changed the url in the load function to a local file: data.txt, which random ascii content. Trying this in Firebug, and stepping through it I can see the gif load but when it lands on the load function it says:

XMLHttpRequest cannot load file:///C:/***********/data.txt. Origin null is not allowed by Access-Control-Allow-Origin.

Any thoughts?

3

Looks like it is in fact working ok in Firefox but not in Chrome. I suspect when I upload this html file to my server it’ll function ok in Chrome too.

Just in case anyone is wondering this is my final code:


<html>
<head>
<title> this is an ajax test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">

function example_ajax_request() {

    // Put an animated GIF image insight of content
    $("#content").empty().html('<img src="ajax-loader.gif" />');

    // Make AJAX call
    $("#content").load("data.txt");
};
</script>

<head>
<body>

<p><input type="button" value="Load Content" onClick="example_ajax_request();" /></p>
<div id="content">
  Please click "Load Content" button to load content.
</div>

</body>
</html>
4

sometimes if something isn’t showing in chrome it just needs a couple of ‘CTRL+F5’s’ (clears cache for that page)

Chrome seems to have a very persistent cache (what makes it fast I guess). sometimes one CTRL+F5 won’t do it so I just hit it 4 or 5 times everytime.