[SOLVED] Ajax script not reloading GD images

[Sled]

Hello, I am currently making a game with php and ajax. I have a move script in php which ajax loads and it also shows a mini map of where you are in the world.

this minimap is done in GD, yet everytime i move with ajax ajax will not reload this image so it stays the same.

function ajax(str,type,divname,scripturl,loadingimage)
{
if(typeof loadingimage == 'undefined')
{
var loadingimage="<center><img src='http://sammystudio.co.uk/majv1/images/loading.gif'><br>Loading..</center>";
}
if(loadingimage == 'walking')
{
var loadingimage="<center><img src='http://sammystudio.co.uk/majv1/images/loading.gif'><br>Walking..</center>";
}
if(!(loadingimage == 'none'))
{
document.getElementById(divname).innerHTML = loadingimage;
}
if (str.length==0)
  { 
  document.getElementById(divname).innerHTML="You must input something.";
  return;
  }
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
  
var div=divname;
var url=scripturl;
url=url+"&q="+str;
url=url+"&type="+type;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=function Create()
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById(div).innerHTML=xmlHttp.responseText;
}
}


xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

 

That is my current ajax script! if someone could please help me out that would be great!

Thanks

[mainewoods]

what are you returning through ajax? are you returning a whole image tag because that is what you should be doing.

 

document.getElementById(div).innerHTML='<img src="domainname.com/directory/image.jpg">'; // simulates ajax return of image

[Sled]

what are you returning through ajax? are you returning a whole image tag because that is what you should be doing.

 

document.getElementById(div).innerHTML='<img src="domainname.com/directory/image.jpg">'; // simulates ajax return of image

 

Sorry i am kind of a noob. where would that go?

my current ajax code just loads php scripts and the gd image is on one of those pages. with an image tag of course.

what happens is ajax caches the image and will not update it ???

[Xajel]

so the user will click on the image or some where else, and special marker in the image will move to another location, so the image is rendered using GD to put the marker any where in the image...

 

And I think, you mean that the image is not refreshed with the new location ??

 

if that's true, then this is because the browser sees that the file is the same, so to save time and internet usage it will use the cache instead, so it wont load the image from the server, but from users cache...

 

 

there's a sulution to this...

 

but I suggest you to make the GD script in seperate php file in order to simplify the whole script...

 

any way, in the PHP file that has the GD script, try to add these lines before any thing else ( directly after the Content-Type header line ), beware of the first line it's a header for text, change it for the picture type you choosed for the final map ( eg, gif, jpg or png )

as usual, these are header's lines so no output must be sent to the page before these lines...

 

header("Content-Type: text/html; charset=ISO-8859-15"); //-------------------MUST BE CHANGED FOR IMAGES
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

 

[mainewoods]

if caching is your problem, then just add a url passed parameter to the end of the src url while still in the php page.  I like to just add the date/ time with seconds:

<img src="http://domainname.com/directory/image.jpg?stopcache=<?php echo date('ymdgisa', strtotime('-15 hours')); ?>">

 

 

[Sled]

I have tried both methods and neither will work.

what is happening is i have a php page with a gd <img>. when the ajax reloads the div that the script is in the gd image still will not refresh?

Not too sure why this is, yet if you open the image externally and then reload the div with ajax the image will refresh to the one on the external page..

 

is there any other caching methods i should be aware of??

 

Thanks again for your help

[Xajel]

Can you put the GD script ( the whole file ) to inspect ?

[rhodesa]

I don't see the need for AJAX here. Just some simple JavaScript. Here is an example:

 

image.php

<?php
  /**
   * PHP Script to Generate the Image
   *   Expects 1 GET var:
   *     q : string of text i will dispaly
   */
  header ("Content-type: image/png");
  $im = @imagecreatetruecolor(400, 400);
  $text_color = imagecolorallocate($im, 255, 255, 255);
  imagestring($im, 5, 50, 50,  $_GET['q'], $text_color);

  //These 2 lines are for testing only
  imagestring($im, 5, 50, 100,  date('r'), $text_color); //DEBUG: Prove image is up to date
  sleep(1); //DEBUG: Sleep 1 seconds so we can see the 'loading' image 

  imagepng($im);
  imagedestroy($im);
  exit;
?>

 

test.php

<html>
  <head>
    <script type="text/javascript">
      var timer;
      function updateImage ( str ) {
        var uImg = document.getElementById('updateImg');
        var lImg = document.getElementById('loadingImg');

        uImg.style.display = 'none'; //Hide main image
        lImg.style.display = ''; //Show loading image

        var d = new Date(); //Will help us prevent caching
        var url = 'image.php?q='+escape(str)+'&_'+d.getTime(); //Make URL

        // Add onload
        if(!uImg.onload){
          uImg.onload = function(){
            document.getElementById('loadingImg').style.display = 'none'; //Hide Loading Image
            this.style.display = ''; //Show new image
          };
        }

        uImg.src = url; //Set URL
        return true;
      }
    </script>
  </head>
  <body onload="updateImage('Start');">
    <input type="button" value="Move Left" onclick="updateImage('Left');" /> 
    <input type="button" value="Move Right" onclick="updateImage('Right');" />
    <div>
      <img id="updateImg" src="" />
      <img id="loadingImg" src="http://sammystudio.co.uk/majv1/images/loading.gif" style="display:none;" />
    </div>
  </body>
</html>

 

Would that cover what you are doing? Or am I not getting something?

[Sled]

I have used your code and strangely this will also not work?

My GD image is extracts values out of a mysql database.

not too suer why your code doesn't also make my image reset ??? :-\

[Sled]

Hold on a second it does work!!!

Thank you very much