使用JavaScript自动刷新div

Question

Trying to refresh a div every 60 seconds, using the following javascript:

<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load').fadeOut('slow').load('index.html #load').fadeIn("slow");
}, 60000);
</script>  

Here is the corresponding div:

<div class = "well" id="load">
  <center><h3><i class="icon-bar-chart"></i> Mt.Gox</h3></center>
  <center><h3>&#579;1 = <?php echo $usd; ?> USD</h3></center>
<hr>
  <center><h3><i class="icon-bar-chart"></i> BTC-e</h3></center>
  <center><h3>&#579;1 = <?php echo $usde; ?> USD</h3></center>
</div>

The div is currently not refreshing at all.

Thanks for any help!

Answer 1

Ok that's because you are using the script incorrectly., You need to use callbacks as below

    <script type="text/javascript">
    var auto_refresh = setInterval(
    function ()
    {
    $('#load').fadeOut('slow',$(this).load('index.html #load', 
       function(){
          $(this).fadeIn("slow");
       })
    )
    }, 60000);
    </script>  

Answer 2

Edit: I misunderstood the code a bit so ignore my original comment below!

---

Try to remove the #load in the url. It's perfectly valid according to the jQuery API , but I think in this case it can cause reduncancy.

That is, make it like this instead:

$('#load').fadeOut('slow').load('index.html').fadeIn("slow");

When you call .load() on an element it will load into that element, if you also specify the same element in the Url to load - I think it can cause a problem.

Answer 3

Please see this link: Origin null is not allowed by Access-Control-Allow-Origin

Also that issue, I think that you shouldn't load html data via file:/// URL. Why don't you load a div in the same file. Forexample:

$('#load').fadeOut('slow').load($('#test').css('display', 'inline')).fadeIn("slow");

and the div tag is like this:

div id="test" style="display:none;"