Jump to content

Update only one image on page with AJAX

Maja

By Maja
in Javascript Help

Recommended Posts

Maja Newbie

Maja

Posted
Posted

Hello,  

 

I have a page that shows a php generated image <img src="somepage.php" border="1" width="500" height="500" />.  I can auto refresh  the page using  <meta http-equiv="refresh" tag, but I was wondering can this be achieved with AJAX as well?  

 

Here is the complete code of the page 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="refresh" content="5">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo</title>
<link rel="stylesheet" href="something.css" type="text/css" media="screen" />
</head>
<body>
<div id="graph-title">
    <h1>Current Online Users by Country</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </p>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in.</p> 
</div>
<div id="graph">
     <img src="somepage.php" border="1" width="500" height="500" />
</div>
</body>
</html>
Link to comment
https://forums.phpfreaks.com/topic/284121-update-only-one-image-on-page-with-ajax/
Share on other sites
brandon66 Newbie

brandon66

Posted
Posted

So you want to refresh the page with Ajax instead of the meta tag?

 

maybe something like this  

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug.  without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#divToRefresh').load('/image/path/here');
}, 3000); // the "3000" here refers to the time to refresh the div.  it is in milliseconds. 
});
// ]]></script>
Maja Newbie

Maja

Posted
  • Author
Posted

Ok, I got this far... but I am stuck.  The "somepage.php" is a php generated image but what I get right now is a garbled text.  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo</title>
<link rel="stylesheet" href="something.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function() {
   $("#graph").load("somepage.php");
   var refreshId = setInterval(function() {
      $("#graph").load('somepage.php?randval='+ Math.random());
   }, 1000);
   $.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="graph-title">
    <h1>Current Online Users by Country</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </p>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in.</p> 
</div>
<div id="graph"></div>
</body>
</html>
Maja Newbie

Maja

Posted
  • Author
Posted

Hi Brandon, sorry for the delay.  The php file is jpgraph generated image.  The garbled text looks like this

 

�PNGIHDR�?z�jIDATx� followed by another 30 lines of similar characters.  Since it starts with PNG, it looks like the image is not being encoded properly.   Hope this helps.  Do you still want me to post the lengthy Jpgraph file?

Maja Newbie

Maja

Posted
  • Author
Posted

Here is the somepage.php code:

<?php // content="text/plain; charset=utf-8"
require_once ('jpgraph/jpgraph.php');
require_once ('jpgraph/jpgraph_line.php');

$datay1 = array(20,15,23,15);
$datay2 = array(12,9,42,;
$datay3 = array(5,17,32,24);

// Setup the graph
$graph = new Graph(300,250);
$graph->SetScale("textlin");

$theme_class=new UniversalTheme;

$graph->SetTheme($theme_class);
$graph->img->SetAntiAliasing(false);
$graph->title->Set('Filled Y-grid');
$graph->SetBox(false);

$graph->img->SetAntiAliasing();

$graph->yaxis->HideZeroLabel();
$graph->yaxis->HideLine(false);
$graph->yaxis->HideTicks(false,false);

$graph->xgrid->Show();
$graph->xgrid->SetLineStyle("solid");
$graph->xaxis->SetTickLabels(array('A','B','C','D'));
$graph->xgrid->SetColor('#E3E3E3');

// Create the first line
$p1 = new LinePlot($datay1);
$graph->Add($p1);
$p1->SetColor("#6495ED");
$p1->SetLegend('Line 1');

// Create the second line
$p2 = new LinePlot($datay2);
$graph->Add($p2);
$p2->SetColor("#B22222");
$p2->SetLegend('Line 2');

// Create the third line
$p3 = new LinePlot($datay3);
$graph->Add($p3);
$p3->SetColor("#FF1493");
$p3->SetLegend('Line 3');

$graph->legend->SetFrameWeight(1);

// Output line
$graph->Stroke();

?>
Maja Newbie

Maja

Posted
  • Author
Posted

UPDATE:  

So, I figured out how to refresh only div containing image but the problem I have now is that every time the image reloads, it flickers.... It just does not look very good.  Here is the updated code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo</title>
<link rel="stylesheet" href="something.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
     var url = 'somepage.php?random='+ Math.random();
     document.getElementById('graph').innerHTML = '<img src="' + url + '" />';
     
var refreshId = setInterval(function() {
     document.getElementById('graph').innerHTML = '<img src="' + url + '" />';
   }, 1000);
   $.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="graph-title">
    <h1>Current Online Users by Country</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </p>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in.</p> 
</div>
<div id="graph"></div>
</body>
</html>

Archived

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

Go to topic listing
×
×
  • 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.