Why wouldnt this javascript run ?

newbie_0404 · 06-28-2010, 02:59 PM

Hello Everyone,
I am new to writing javascripts. I am working on a web-interface that has to show certain data in real-time (update it every 2 seconds). I figured including an iframe and reloading it with javascript would be the best bet. So to see if it works I wrote this test code. But it doesnt reload the iframe every 2 seconds. Can anyone point out where I am going wrong ?

this is the code for hello.html

PHP Code:



<html> 
<body> 
<script type="text/javascript"> 
function reloadIt() 
{ 
frm=document.getElementsByName("iframe1")[0];//we get the iframe object 
frm.src=frm.src;//or you can set the src to a new src. 
setTimeout("reloadIt()",2000);//the function will run every 2 seconds 
} 
</script> 
<h1>This is a test</h1> 
<p>The random number generated is  
<iframe id="iframe1" name="iframe1" height="30" width="300" 
src="hello.php"></iframe> 
</p> 
</body> 
</html>

and this is the code for hello.php

PHP Code:



<?php 
$i=rand(0,10); 
print ("$i"); 
?>

Any help with this would be highly appreciated.

Thanks

timmeke · 06-29-2010, 03:53 AM

Did you try to change the src-URL for the iframe to a complete URL?
Remember that iframe/javascript are on client's side, php on server's.

zirias · 06-29-2010, 08:35 AM

Just an idea for you how to solve this kind of problem cleaner.

Service-Side (REST-style JSON service):

getRandomNumber.php:

PHP Code:



<?php 
header("Content-Type: text/x-json"); 
$i = rand(0,10); 
print('{ "value" : "'.$i.'" }'); 
?>

Client-Side (XmlHttpRequest):

PeriodicUpdater.js:

Code:

(function() {

  function createXmlHttpRequestObject()
  {
    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')
    {
      try
      {
        xmlhttp = new XMLHttpRequest();
      }
      catch (e)
      {
        xmlhttp = false;
      }
    }
    if (!xmlhttp && window.createRequest)
    {
      try
      {
        xmlhttp = window.createRequest();
      }
      catch (e)
      {
        xmlhttp = false;
      }
    }
    return xmlhttp;
  }

  window.PeriodicUpdater = function(element, service, period);
  {
    if (typeof(element) == "string")
    {
      this._element = window.document.getElementById(element);
    }
    else
    {
      this._element = element;
    }
    this._service = service;
    this._period = period;
    this._request = createXmlHttpRequestObject();
    this._active = false;
  };

  PeriodicUpdater.prototype = {

    start: function()
    {
      if (!this._request) { return; }
      if (this._active) { return; }
      this._active = true;
      window.setTimeout(this._update(), this._period);
    },

    stop: function()
    {
      this._active = false;
    },

    _update: function()
    {
      if (!this._active) { return; }
      this._request.open("GET", this._service, true);
      this._request.onReadyStateChange = function() {
        if (this._request.readyState != 4) { return; }
        var response = eval('(' + this._request.responseText + ')');
        while (this._element.hasChildNodes())
        {
          this._element.removeChild(this._element.firstChild);
        }
        this._element.appendChild(window.document.createTextNode(response.value));
      };
      window.setTimeout(this._update(), this._period);
    }
  };
})();

Usage in html:

Code:

<div id="update"></div>
<script type="text/javascript">
var updater = new PeriodicUpdater("update", "http://example.com/getRandomNumber.php", 2000);
updater.start();
</script>

This code is untested (but the whole XmlHttpRequest boilerplate is copy&paste from a working script, so there should be no major problems with it)