0

I have read how to refresh a single div with jquery, however I have a webpage based on mostly tables and updating elements. I currently have a separate script to refresh the webpage every 1.5 seconds, however I have a static image in my Web_Main file, that flashes every time the page refreshes, so I would like to use jquery in my Web_Run file to exclude that image from the page refresh. I have included the jquery-1.11.2.min.js file in my directory folder and have the header to reference it, but I am not familiar with jquery and do not know how to make the div for everything but my image refresh, as well as whether i should put it in the Web_Main script or Web_Run script.

My Web_Main is set up as:

<div class ="refreshpage"> 


<!-- Rest of page content needing refreshed above --> </div>
<div class = "staticpic">
 <img src="picdrawing.png" height="130px" width="99.8%">
 </div> 
 <div class ="refreshpage"> 
<!-- Rest of page content needing refreshed below--> </div>

My Web_Run page

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">

</style>

<script>

function showCustomer(str)
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari     php<!-- include('test.php');--> ?>
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","Web_Main.php",true);
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.setRequestHeader( "If-Modified-Since", "Sat, 01 Jan 2000 00:00:00 GMT" );
xmlhttp.send(null);
//showCustomer('ALFKI');
setTimeout(function(){showCustomer('load')}, 1500);
}
</script>
</head>
<body onLoad="showCustomer('Load')">

<div id="txtHint"></div>

</body>
</html>
Cœur
  • 37,241
  • 25
  • 195
  • 267
osxoverkill
  • 17
  • 6
  • You can't ask the browser to refresh the whole page except a certain element. Besides, automatically refreshing the page sounds like a terrible user experience to me... You may want to consider other solutions like Ajax to refresh the content of the elements that need to be refreshed. – Jeremy Thille Mar 02 '15 at 14:14

1 Answers1

4

Why not try to use caching to cache the static image? It will still "load" with the page, but it will not flicker anymore since it will be served from cache instantaneously.

There really isn't a way to refresh everything except a div or an image, but caching stuff on the page exists solely for this reason. So you will not have to reload the static content.

or29544
  • 608
  • 5
  • 7
  • Never done anything with caching before, how would you set up a image cache for that picture? – osxoverkill Mar 02 '15 at 14:19
  • Well first of all you will need a server cache. What server technology do you use? I would presume you are using ASP.NET with IIS. If that's the case, it's quite easy. – or29544 Mar 02 '15 at 14:21
  • It is running a Windows 2012 Server with Apache, thats about as much as I know as someone else runs the server. – osxoverkill Mar 02 '15 at 14:23
  • Well, I am not an Apache expert, but I am sure it's easy to setup cache for the resources you need. You should take a look here: http://stackoverflow.com/questions/447014/website-image-caching-with-apache – or29544 Mar 02 '15 at 14:24