• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 327
  • 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
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

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