CODEWITHSUNDEEP
javascriptjqueryhtml
osxoverkill
osxoverkill

Reputation: 17

Using Jquery to refresh all of a page but a single image

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>

Upvotes: 0

Views: 110

Answers (1)

or29544
or29544

Reputation: 608

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.

Upvotes: 4

Related Questions