Maja Posted November 21, 2013 Share Posted November 21, 2013 (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 November 21, 2013 by Maja Quote Link to comment https://forums.phpfreaks.com/topic/284121-update-only-one-image-on-page-with-ajax/ Share on other sites More sharing options...
brandon66 Posted November 21, 2013 Share Posted November 21, 2013 (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 November 21, 2013 by brandon66 Quote Link to comment https://forums.phpfreaks.com/topic/284121-update-only-one-image-on-page-with-ajax/#findComment-1459294 Share on other sites More sharing options...
Maja Posted November 21, 2013 Author Share Posted November 21, 2013 Actually, I want to only refresh the content of <div id="graph"></div> Quote Link to comment https://forums.phpfreaks.com/topic/284121-update-only-one-image-on-page-with-ajax/#findComment-1459298 Share on other sites More sharing options...
Maja Posted November 21, 2013 Author Share Posted November 21, 2013 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> Quote Link to comment https://forums.phpfreaks.com/topic/284121-update-only-one-image-on-page-with-ajax/#findComment-1459308 Share on other sites More sharing options...
brandon66 Posted November 21, 2013 Share Posted November 21, 2013 could you post the garbled text that your getting? Quote Link to comment https://forums.phpfreaks.com/topic/284121-update-only-one-image-on-page-with-ajax/#findComment-1459444 Share on other sites More sharing options...
brandon66 Posted November 21, 2013 Share Posted November 21, 2013 The php file that your using also Quote Link to comment https://forums.phpfreaks.com/topic/284121-update-only-one-image-on-page-with-ajax/#findComment-1459447 Share on other sites More sharing options...
Maja Posted November 23, 2013 Author Share Posted November 23, 2013 (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 November 23, 2013 by Maja Quote Link to comment https://forums.phpfreaks.com/topic/284121-update-only-one-image-on-page-with-ajax/#findComment-1459624 Share on other sites More sharing options...
Maja Posted November 23, 2013 Author Share Posted November 23, 2013 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(); ?> Quote Link to comment https://forums.phpfreaks.com/topic/284121-update-only-one-image-on-page-with-ajax/#findComment-1459625 Share on other sites More sharing options...
brandon66 Posted November 23, 2013 Share Posted November 23, 2013 (edited) When you send the image back try sending it like this, not familiar with jpgraph yet $image = $graph->stroke(); echo $image; Edited November 23, 2013 by brandon66 Quote Link to comment https://forums.phpfreaks.com/topic/284121-update-only-one-image-on-page-with-ajax/#findComment-1459735 Share on other sites More sharing options...
Maja Posted November 28, 2013 Author Share Posted November 28, 2013 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> Quote Link to comment https://forums.phpfreaks.com/topic/284121-update-only-one-image-on-page-with-ajax/#findComment-1460476 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.