• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 320
  • Last Modified:

Display partial page before full page is ready

I have a page which takes a long time to load, because some of the data has to be retrieved from remote site.

I would like to be able to display the bulk of the data, before displaying the data which needs to be fetch remotely.

How can I display part of the page, and than have the rest of the page display when it's ready.

I'm using JSP and jquery on Tomcat server.
0
Axter
Asked:
Axter
  • 5
  • 2
  • 2
  • +1
3 Solutions
 
COBOLdinosaurCommented:
AJAX should solve the problem.

Add a script to do an xmlhttp call in the fast part and then the page can render while thw eslow stuff is being retrieved. Jquery supports an xmlhttp object.
0
 
AxterAuthor Commented:
You have any example code for this?  I'm new to both jquery and ajax.
0
 
COBOLdinosaurCommented:
This page explains it better than I can.  I don't use use a whole lot of Jquery if I can avoid it.  I prefer to use Javascript raw rather than being held hostage to someone elses library functions
Jquery api



0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
leakim971PluritechnicianCommented:
Put this in the head section :
<script src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script>
$(document).ready(function() {
        $("#div_ID").load("path/to/proxy.jsp?url=" + encodeURIComponent("http://www.remote.site/path/to/content"));
});
</script>

Open in new window


jQuery.load :
http://api.jquery.com/load/

proxy :
http://technology.amis.nl/blog/999/proxy-servlet-for-ajax-requests-to-multiple-remote-servers
http://stackoverflow.com/questions/6515840/get-the-url-contents-in-jsp-and-pass-the-whole-content-as-the-response-back-to-a
http://raghuonflex.wordpress.com/2007/10/11/jsp-proxy-code-for-sourcing-cross-domain-images/
http://www.servletsuite.com/tips/twitter.htm
https://www.codemagi.com/blog/post/190
0
 
rrzCommented:
A JSP uses a buffer on its output. You can flush the buffer to the client when you want to send something.
Please try the following demo code. Just copy and paste to test.
<html>
<body>
Some text here is necessary here for the IE browser to start displaying. 
Otherwise it will wait until it receives enough of a response to begin displaying anything.
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz I am sure how much padding is necessary. But this works for me.
<%
  out.print("<br/>Here is some quick data. <br/>");
  out.flush();
  for(int x = 0; x < 3; x++){
                             Thread.sleep(3000);  //mock processing
                             out.print("Here is some more data.<br/>");
                             out.flush();
  }
%>
</body>
</html>

Open in new window

0
 
AxterAuthor Commented:
Thanks rrz@871311, but I already have similar logic like this, but this doesn't work for IE.  It works for Firefox and other browsers, but I have to use flushBuffer as well.
Example:

out.flush();
response.flushBuffer();
0
 
AxterAuthor Commented:
COBOLdinosaur & leakim971,
I need some time to try the jquery logic, and then I'll respond back.

Thanks
0
 
rrzCommented:
>but this doesn't work for IE.  
The test code that I posted does work for IE. Did you try it ?  
>but I have to use flushBuffer as well.  
That should not be necessary.  
Quote from the API for out.flush();
Flush the stream. If the stream has saved any characters from the various write() methods in a buffer, write them immediately to their intended destination. Then, if that destination is another character or byte stream, flush it. Thus one flush() invocation will flush all the buffers in a chain of Writers and OutputStreams.
0
 
AxterAuthor Commented:
>>The test code that I posted does work for IE. Did you try it ?  

I tried it,and your simple example does work on IE.

out.flush() does not work for me on IE with a more complex page.  I believe issue is being triggered by the way IE is handling javascript or jquery implementation.
0
 
AxterAuthor Commented:
Thanks
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 5
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now