[RESOLVED] Get new picture?

**Slyke** · Oct 9th, 2009, 12:32 PM

This can be done with JavaScript or AJAX (It just has to work with all browsers).

My goal is to use a PHP script to return a picture's path, and then load the picture. The PHP part of the script is no biggy.

PHP Code:


echo getPicturePath();

Which will return 348344.jpg for example.

The bit that I can't workout how to do is to do this every second or so, and then actually load this picture onto the webpage.

Here's a thoery I've come up with, using JavaScript:

PHP Code:


<script>
var objPicure;
var latestPicture="";

init()
{
  objPicure=document.getElementById("thePicture");
}

loadNewPicture(fileName)
{
  ??? //Loads the picture from the fileName URL and puts it into objPicure
}

updatePictureFile()
{
  latestPicture=???; //Get the filename from the PHP script.
}
</script>

<img src="loading.jpg" id="thePicture" />

I'm familiar with JavaScript timers and would implement them too, just want to keep the theory simple.

Any tips

?

**Slyke** · Oct 9th, 2009, 02:10 PM

Solved

.

Used a bit of AJAX and JavaScript.

Solution:

PHP Code:


<?php

include_once "view_include.php"; //getLatestImage() function in here.

if (isset($_REQUEST['imagepath']))
{
  if (isset($_REQUEST['offsetindex']))
  {
    $offsetIndex=filter_input(INPUT_GET, "offsetindex", FILTER_SANITIZE_SPECIAL_CHARS);
    echo getLatestImage($offsetIndex);
  }
  else
  {
    echo getLatestImage();
  }
}
else
{
?>

<html>
<head>
<script type="text/javascript">
<!--
var xmlHttpRequestHandler = new Object();
var requestObject;
var newImagePath;
var objImageUpdate;
var objCurrentImageText;
var objTimer;

// AJAX Stuff ---------------
xmlHttpRequestHandler.createXmlHttpRequest = function()
{
  var XmlHttpRequestObject;
  if(typeof XMLHttpRequest != "undefined")
  {
    XmlHttpRequestObject = new XMLHttpRequest();
  }
  else if(window.ActiveXObject)
  {
    var tryPossibleVersions = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"];
    for(i=0;i<tryPossibleVersions.length;i++)
    {
      try
      {
        XmlHttpRequestObject = new ActiveXObject(tryPossibleVersions[i]);
        break;
      }
      catch(xmlHttpRequestObjectError)
      {
        // Ignore Exception
      }
    }
  }
  return XmlHttpRequestObject;
}
// End AJAX Stuff ---------------


function updateDisplayAndTimer()
{
  var url = "http://yoursite.com/yourupdatescript.php?imagepath=true";
  if(url.length > 0)
  {
    requestObject = xmlHttpRequestHandler.createXmlHttpRequest();
    requestObject.onreadystatechange=onReadyStateChangeResponse;
    requestObject.open("Get",url, true);
    requestObject.send(null);
    updateImage();
    objTimer=setTimeout("displayTimerInterval();", 500); //Will load the next picture, after the current one has loaded.
  }
}

function updateDisplay()
{
  var url = "http://yoursite.com/yourupdatescript.php?imagepath=true";
  if(url.length > 0)
  {
    requestObject = xmlHttpRequestHandler.createXmlHttpRequest();
    requestObject.onreadystatechange=onReadyStateChangeResponse;
    requestObject.open("Get",url, true);
    requestObject.send(null);
    updateImage();
  }
}

function onReadyStateChangeResponse()
{
  var ready, status;
  try
  {
    ready = requestObject.readyState;
    status = requestObject.status;
  }
  catch(e) {}
  if(ready == 4 && status == 200)
  {
    newImagePath=requestObject.responseText;
    objCurrentImageText.innerHTML=requestObject.responseText;
  }
}

function updateImage()
{
  objImageUpdate.src="path/to/images/"+newImagePath;
}

function init()
{

  objImageUpdate=document.getElementById('updatedpic');
  objCurrentImageText=document.getElementById('currentImage');
}

function displayTimerInterval()
{
  updateDisplayAndTimer();

}

// -->
</script>

</head>
<body onload="init();updateDisplayAndTimer();">
<img id="updatedpic" src="loading.jpg" align="left" />
<br />
<button onclick="updateDisplayAndTimer();">Start</button>
<button onclick="clearTimeout(objTimer);">Stop</button>
<span id="currentImage"></span>
<br />
<button onclick="updateDisplay();" value="Update">Update</button>


</body>
</html>

<?php
}

**penagate** · Oct 13th, 2009, 08:15 PM

AJAX is the pattern, JavaScript the language.

Thread: [RESOLVED] Get new picture?

Thread Tools

Display

[RESOLVED] Get new picture?

Re: Get new picture?

Re: [RESOLVED] Get new picture?

Posting Permissions