Jump to content

[SOLVED] auto refresh single div


DJ Zen Masta K

Recommended Posts

i've googled this, and there seems to be many ways using different methods.  what is the simplest method of auto refreshing a single div?

 

i have a page that has content dynamically updated that occasionally times out.  i used to just use an iframe on my main page and used a simple javascript on the page that is framed to update it.  i'm wanting to move from transitional to strict, which does not support iframes, so i've redeisgned the page to only use divs.

Link to comment
https://forums.phpfreaks.com/topic/149848-solved-auto-refresh-single-div/
Share on other sites

AJAX. an easy way is to get jQuery, and then use the load() method like so:

$('#id_of_the_div').load('page.php');

that will get the contents of page.php and load it into the dom node with the ID of 'id_of_the_div'. as far as when that code gets executed...you can put it in a button, or inside setTimeout/setInterval to have it updated periodically

thanks, i will have to see if my webhost supports jquery and learn it.

 

in the meantime, i did find this code, but i can't get it to work:

 

<html>
<head>
<script language="JavaScript" type="text/javascript">
function blah ( ) {
     var xmlhttp=false;
    try
    {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    }
    catch (e)
    {
        try
        {
            xmlhttp = new
            ActiveXObject('Microsoft.XMLHTTP');
        }
        catch (E)
        {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined')
    {
        xmlhttp = new XMLHttpRequest();
    } 
     xmlhttp.open("GET", "songinfo.php", true);
     xmlhttp.onreadystatechange = function ( ) {
         if ( ajax.readyState == 4 ) {
             document.getElementById('songinfo').innerHTML = xmlhttp.responseText;
         }
     };
return;
}
  setInterval('blah()', 10000);
  </script>
</head>
<body>
<div id="songinfo">
<?php
include ("songinfo.php");
?>
</div>
</body>
</html>

you were missing one part:

<html>
<head>
<script language="JavaScript" type="text/javascript">
  var xmlhttp;
  function blah ( ) {
    try
    {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    }
    catch (e)
    {
      try
      {
        xmlhttp = new
        ActiveXObject('Microsoft.XMLHTTP');
      }
      catch (E)
      {
        xmlhttp = false;
      }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined')
    {
      xmlhttp = new XMLHttpRequest();
    }
    xmlhttp.open("GET", "songinfo.php", true);
    xmlhttp.onreadystatechange = function ( ) {
      if ( xmlhttp.readyState == 4 ) {
        document.getElementById('songinfo').innerHTML = xmlhttp.responseText;
      }
    };
    xmlhttp.send(null);
    return;
  }
  setInterval('blah()', 10000);
</script>
</head>
<body>
<div id="songinfo">
<?php
include ("songinfo.php");
?>
</div>
</body>
</html>

 

or with jQuery:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
  setInterval("$('#songinfo').load('songinfo.php');", 10000);
</script>
</head>
<body>
<div id="songinfo">
<?php
include ("songinfo.php");
?>
</div>
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.