Reload page asynchronously or setTimeout?

Question

I'm a bit lost.

I have two pages; Results and Detail. Whenever user navigates from Detail to Results using the browser back button, Results page should refresh, this way I can show what product user just seen on Detail (like amazon does with recently viewed items)

I don't know if it is better to load page asynchronously, or use setTimeout as seen here (the example below works, but page refreshes forever)

   if(window.top==window) {
   // you're not in a frame so you reload the site
   window.setTimeout('location.reload()', 3000); //reloads after 3 seconds
   } else {
   //you're inside a frame, so you stop reloading
   }

and when I try reloading just a div also doesn't work

   $('#div-id').triggerevent(function(){
   $('#div-id').html(newContent);
   });

I've also came across a lot of examples leading to this but didn't managed to make it work. Any suggestion is welcome. Thank you

Answer 1

The onload event should be fired when the user hits the back button. Elements not created via JavaScript will retain their values. I suggest keeping a backup of the data used in dynamically created element within an INPUT TYPE="hidden" or TEXTAREA set to display:none then onload using the value of the textbox to rebuild the dynamic elements to the way they were.

If you don't care about rebuilding the page and want to actually reload it, then you could do:

<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
onload=function(){
var e=document.getElementById("refreshed");
if(e.value=="no")e.value="yes";
else{e.value="no";location.reload();}
}
</script>

Answer 2

I believe you should reload the page asynchronously. Maybe attaching the event ready to the body will work.

  $(function(){

    $('body').ready(function(){
      alert('worked');
      //Code to reload the page or data 
    });

  });