Jump to content

Update only one image on page with AJAX

Maja

By Maja
in Javascript Help

 Share

Recommended Posts

Maja Newbie

Maja

Posted
Posted (edited)

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>
Edited by Maja
Link to comment
Share on other sites
brandon66 Newbie

brandon66

Posted
Posted (edited)

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>
Edited by brandon66
Link to comment
Share on other sites
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>
Link to comment
Share on other sites
Maja Newbie

Maja

Posted
  • Author
Posted (edited)

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?

Edited by Maja
Link to comment
Share on other sites
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();

?>
Link to comment
Share on other sites
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>
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.