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 ``. — Amal Murali, Oct 08 '13 at 16:16
What data is being loaded from the URL? Does it have an elemnt with ID `load`? — Jimbali, Oct 08 '13 at 16:18
jsfiddle will be good to debug.. or share code with all included js. — Ashish Kasma, Oct 08 '13 at 16:18
are you expecting the div to hold new php vars on load(). you might want to use a different approach. and $.ajax() call to a php generated json object. — b_dubb, Oct 08 '13 at 16:19

score 3 · Answer 1 · answered Oct 08 '13 at 16:19

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>

becquerel · Answer 2 · 2013-10-08T16:38:36.270

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 08 '13 at 16:38

answered Oct 08 '13 at 16:23

becquerel

1,131
7
11

Nope, it's really just fine. – Paul Roub Oct 08 '13 at 16:27
I could reproduce it at http://jsfiddle.net/BFtY6/ vs http://jsfiddle.net/BFtY6/1/ (using Chrome 30, maybe it differs between browsers) – becquerel Oct 08 '13 at 16:28
1

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. – Paul Roub Oct 08 '13 at 16:32
1

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? – becquerel Oct 08 '13 at 16:36
1

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. – Paul Roub Oct 08 '13 at 16:40
Ok, I'm going to be quiet now - I've got no luck in thinking today :) – becquerel Oct 08 '13 at 16:41
Ok, changed the code to: ...and getting the following error: TypeError: $ is not a function $('#load').fadeOut('slow').load('index.html').fadeIn("slow"); – Michael Hazelwood Oct 08 '13 at 16:47
1

@MichaelHazelwood that's because, you forgot to include jquery library – Akshay Khandelwal Oct 08 '13 at 16:53
jquery-1.9.1.min.js is included. – Michael Hazelwood Oct 08 '13 at 16:59
Is jQuery included before your script element? – becquerel Oct 08 '13 at 17:15
yes jQuery is included before my script element, just after the opening head section. – Michael Hazelwood Oct 08 '13 at 17:47

score -1 · Answer 3 · edited May 23 '17 at 12:21

-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 '17 at 12:21

Community

1
1

answered Oct 08 '13 at 17:04

superken

1
1

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. – Michael Hazelwood Oct 08 '13 at 17:24
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. – superken Oct 08 '13 at 17:37

Auto refreshing div with javascript

3 Answers3