Link to home
Start Free TrialLog in
Avatar of PhatFrogDev
PhatFrogDev

asked on

Update entire document without page reload

I have a digital display with information displayed on it using HTML. This is not a webpage per se, as no one actually interacts with it -- they just read what's on the screen, and move on.

What I need to do is to be able to make changes to the document, and have that information change in near real time without flickering or reloading the page.

I am currently using a Jquery load() function. While that works well for changing content in a specific DIV, it does not seem to be able to update the entire document. In fact, it does occasionally blank the page as it's updating. I have only been able to come up with ways to update content in the body of the document, but not the entire document including all of the content in the HEAD. Styles both in the head section and in linked stylesheets tend to be changed often as well. Also, depending on what is being displayed at any given moment, I may need to also update scripts in the head.

Thus, the reason I need to update the ENTIRE document automatically, when I malke changes, without any interruption in the display.

The script simply calls the document that is currently displaying, and updates with the new content. The problem with using load(), is the page does blank out occasionally, and I cannot let that happen.

It should be stated that I am using IE, and cannot use anything else.

Here's what I currently use:

<script type="text/javascript" src="assets/jquery/jquery-1.8.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$.ajaxSetup ({
		cache: false
	});
	setInterval(function(){
    	    $("#outer").load('default.htm?1=1 #outer');
	}, 2000);
});
</script>

Open in new window


Thanks for any help...
SOLUTION
Avatar of skullnobrains
skullnobrains

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of PhatFrogDev
PhatFrogDev

ASKER

I have changed it to only attempt the update when the document has completely loaded by changing:

$(document).ready to $(window).load

Open in new window


Is that what you meant?

If you could explain further using document.write. I don't see how that doesn't make the page blink, blank out, or otherwise manifest itself as obvious. Perhaps I'm misunderstanding. And, how do I "write" what is called from a URL without collecting that data via ajax?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial

$(document).ready to $(window).load
will not likely make a difference


if you could explain further using document.write. I don't see how that doesn't make the page blink, blank out, or otherwise manifest itself as obvious. Perhaps I'm misunderstanding.

document.write() when used AFTER the page is fully loaded will replace the page's content with whatever you write. this will replace EVERYTHING including the running script.
i do not believe this is necessarily a good thing to do but you specifically asked about replacing the whole page


And, how do I "write" what is called from a URL without collecting that data via ajax?
window.localtion.href=URL
this will produce a page reload

---

did you try my suggestions ?

i see two things here :
- using a setInterval timer will produce problems when your page needs more than 2 seconds to load. you probably should schedule the next update after the current one is finished including if it finished with an error
- i'm not actually sure that the load function does not erase the contents before it sends the query. maybe use a regular get() and replace the innerHTML of the div once you got the whole page would work better 

Open in new window


use setTimer() to call your reload function
use get() in the reload function
hook the innerHTML replacement to the success function associated with the get()
hook a new setTimer() in both the success and failure functions associated with the get
hello  PhatFrogDev, ,  It is my view that because there is a Browser "Document" (as in DOM),  where the browser keeps the necessary info for that WEb page originally loaded, , that you should NOT expect entire page refresh, by writing to the entire page code (DHTML, script , css), like using your-
$("#outer").load('default.htm?1=1 #outer');

using javacript, the correct way is to Modify the existing Document, not overwrite it with an entire page DHTML, for instance, the correct way to add an external CSS in Ajax is something like -
success: function(msg){

// msg has css addy like  "www.website/newcss.cs"
  var linkref=document.createElement("link");
  linkref.setAttribute("rel", "stylesheet");
  linkref.setAttribute("type", "text/css");
  linkref.setAttribute("href", msg);

      }

Open in new window




but browsers can compensate for code like you change the entire page, the original "Document" is still there in browser memory, but it may can figure out what your new code write, screws up DOM and display something. I do not really have any kind for fix, but just saying that your approach may not go with how AJAX and browsers are suppose to operate.
AJAX is a javascript method using javascript access to the DOM to change the page.
The issue here is that all of the document gets changed periodically. I need everything, including the contents of the head (styles, scripts, etc.) to be updated at regular intervals. NOT just specific elements within that document, but the ENTIRE document -- without manifesting itself in the form of a standard page reload/refresh.

This is not a typical "web page", per se. This is an informational digital display that no end user will be intereracting with in any way, except to read what is on the screen.
As far as I know, the javascript AJAX info transfer, was not designed for that, as it's seems like just crapy code, to replace the javascript ajax function that is doing the ajax updating of the page, by changing the entire page.
However, if this method is working for you, then you can just keep doing whatever it is you do. AS far as an occasional "does blank out occasionally", you may have to either Not replace the entire page, or use javascript methods to change the <head> and document sections, but the way you state this, I am not getting your urgent need not to just go to the new page by URL, but perhaps, there is not an actual page addy, and it's created on the server. Still, you might have some blanking with any large Ajax replacement, even if you do not replace the whole page

there is a javascript function for changing the location of the page that is NOT the usual reassign the location URL, its replace( ) -

window.location.replace("http://www.newsite.com");

but that may not help you.  I can not really talk about the problem of "blank out occasionally", since this does not seem to be web view disaster to me, and I know of no remedy for the entire page replace.

My next "Logical" suggestion, but un-tried, is to call the ajax and get page replace text (HTML) return, then get the javascript document and, , get and DELETE all of it's children, giving you a new blank page, then use document.write( ) to place the Ajax return into the document.

It's my dumb opinion, But this all seems fundamentaly wrong to me, you really should not be changing the major document sections -
<!DOCTYPE html>
<html>

and you should not be changing the javascript code that does the Ajax refresh.

Sorry, I can not add any more, you might have to do some real long research into "Ajax entire page update"
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial