Auto refreshing div with javascript

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!

You're probably missing the references to jQuery files. Try adding this <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>. — Amal
– Amal, Commented Oct 8, 2013 at 16:16
<center></center> is deprecate. use css text-align: center; instead — b_dubb
– b_dubb, Commented Oct 8, 2013 at 16:17
What data is being loaded from the URL? Does it have an elemnt with ID load? — Jimbali
– Jimbali, Commented Oct 8, 2013 at 16:18
jsfiddle will be good to debug.. or share code with all included js. — Ashish Kasma
– Ashish Kasma, Commented Oct 8, 2013 at 16:18

Akshay Khandelwal · Accepted Answer · 2013-10-08 16:19:33Z

3

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>

answered Oct 8, 2013 at 16:19

Akshay Khandelwal

1,56811 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

becquerel · Accepted Answer · 2013-10-08 16:38:36Z

1

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.

edited Oct 8, 2013 at 16:38

answered Oct 8, 2013 at 16:23

becquerel

1,1317 silver badges11 bronze badges

11 Comments

Paul Roub Over a year ago

Nope, it's really just fine.

Paul Roub Over a year ago

Right, but in your example, there is no #load section in the loaded document. Of course it will fail when you say "load a section that does not exist". The #load in the function parameter isn't saying where to load the data - its a selector, telling jQuery which part of the loaded document should actually be used.

becquerel Over a year ago

Ah, of course - I got a bit confused since they are both called #load :) Sorry for the confusion. Adding a second element with the same ID can not be a good idea however since they are supposed to be unique, maybe it could still be a reason for the error?

Paul Roub Over a year ago

That's not what's going to happen. load() will pull the contents of the #load element from the loaded data, and replace the contents of the current document's #load element with that.

Akshay Khandelwal Over a year ago

@MichaelHazelwood that's because, you forgot to include jquery library

|

Community · Accepted Answer · 2017-05-23 12:21:08Z

-1

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;"

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Oct 8, 2013 at 17:04

superken

11 bronze badge

2 Comments

Michael Hazelwood Over a year ago

Thanks, with style=display:none nothing is displayed at all -- not even the data available at page load. Secondly I still get the TypeError: $ is not a function error, despite the fact that jquery-1.9.1.min.js is included and all the other javascript items on my page are working fine.

superken Over a year ago

If you want it is displayed at page load, so remove style=display:none and change the javascript code like this one: $('#load').fadeOut('slow').load('#test').fadeIn("slow"); Remember that div tag that has id "test" is in the same file. Hope this help.

Collectives™ on Stack Overflow

Auto refreshing div with javascript

3 Answers 3

Comments

11 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

11 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related