Solved

show processing image

Posted on 2014-07-22
26
487 Views
Last Modified: 2014-09-17
hi,

i have a jsp page having panels(jquery ui layout),

I need to show the processing image before the layout is rendered.When the jsp is called from action it takes few seconds at that time panels are not created and a blank white screen is being displayed. need to show processing images,how to achieve this

<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
<script type="text/javascript" src="/lib/js/jquery-latest.js"></script>
<script type="text/javascript" src="/lib/js/jquery.layout-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$('body').layout({ applyDemoStyles: true });
});
</script>
</head>
<body>
<div class="ui-layout-center">Center
	<p><a href="http://layout.jquery-dev.com/demos.html">Go to the Demos page</a></p>
	<p>* Pane-resizing is disabled because ui.draggable.js is not linked</p>
	<p>* Pane-animation is disabled because ui.effects.js is not linked</p>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>
</html>

Open in new window

0
Comment
Question by:Rocking
  • 7
  • 6
  • 3
  • +3
26 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 40212378
Assuming you have some loading image like so and give it a class of loading

<img class="loading" src="">

Assume the image is 50x50px

<script>
$(document).ready(function () {
	var windowH = $(window).height();
	var windowW = $(window).width();
	$(".loading").css({
		position:"fixed",
		left: ((windowW - 25 + $(document).scrollLeft()),
		top: ((windowH - 25 + $(document).scrollTop())
	})

	$('body').layout({ applyDemoStyles: true });
	$(".loading").hide()
});

</script>

Open in new window

Edited...
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 40214449
Hello,

the dilemma is that the JavaScript GUI page display will be suspended until the page is completely loaded.
Therefore you have to separate the two actions: showing the Wait message/image(animated gif) and second step: producing the page output.
Doing that two tasks in a single page is tricky and therefore do it in two Responses to the page request.
Like this:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>        
<html>
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <%
            if(request.getParameter("wait") == null){
                String strQueryString = request.getQueryString();
                if (strQueryString == null){
                    strQueryString = "?";
                } else {
                    strQueryString = strQueryString + "&";
                }
                response.setHeader("Refresh", "1; URL="+strQueryString+"wait=done"); 
        %>
          <title>waiting....</title>
          </head>
          <body>
          <h1 align=center>Please wait...</h1>
          <center><img src="http://images.simplecall.com/loading.gif" border="0"/></center>
          </body>
          </html>

        <% 
                return; 
            } 
        %>
        
<title>Layout Example</title>
</head>
<body>
    <h1>Your Page Here</h1>    
</body>
</html>

Open in new window

Instead of reloading the same page after wait is done you can also redirect to some other worker page and use upper page only for Wait message display.
For that change the URL in response.setHeader("Refresh", "1; URL=some.jsp"); to some worker page.

Good luck,
Zvonko
0
 

Author Comment

by:Rocking
ID: 40214783
@gary
As suggested by you implemented the code but no luck. the div is shown with pane div also and after that  the layout is not created? Please advise


<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery-latest.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery.layout-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	var windowH = $(window).height();
	var windowW = $(window).width();
	$(".loading").css({
		position:"fixed",
		left: ((windowW - 25 + $(document).scrollLeft()),
		top: ((windowH - 25 + $(document).scrollTop())
	})

	$('body').layout({ applyDemoStyles: true });
	$(".loading").hide()
});

</script>
</head>
<body>
<div class="loading" style="background: aqua;">Loading</div>
<div class="ui-layout-center">Center
	<p><a href="http://layout.jquery-dev.com/demos.html">Go to the Demos page</a></p>
	<p>* Pane-resizing is disabled because ui.draggable.js is not linked</p>
	<p>* Pane-animation is disabled because ui.effects.js is not linked</p>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>
</html>

Open in new window

panel.png
0
 
LVL 58

Expert Comment

by:Gary
ID: 40215733
What is the function .layout doing? What is the code?
I'm guessing this is an ajax call which means you will need to incorporate my code into your ajax code.
0
 

Author Comment

by:Rocking
ID: 40215867
no it's part of jauery ui layout
http://layout.jquery-dev.com/
jquery.layout-latest.js
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 40216466
@Rocking: did you notice my JSP proposal?
0
 

Author Comment

by:Rocking
ID: 40216701
@Zvonko

Thanks it's working, on intial load bu when i try to refresh two or three times it takes fraction of second but the image is not displayed may be the wait=done in the url (http://localhost:8080/SampleCode/test.jsp?wait=done),how can i achieve the above?
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>        
<html>
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <%
            if(request.getParameter("wait") == null){
                String strQueryString = request.getQueryString();
                if (strQueryString == null){
                    strQueryString = "?";
                } else {
                    strQueryString = strQueryString + "&";
                }
                response.setHeader("Refresh", "1; URL="+strQueryString+"wait=done"); 
        %>
          <title>waiting....</title>
          </head>
          <body>
          <h1 align=center>Please wait...</h1>
          <center><img src="http://images.simplecall.com/loading.gif" border="0"/></center>
          </body>
          </html>

        <% 
                return; 
            } 
        %>
        
<title>Layout Example</title>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.layout-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$('body').layout({ applyDemoStyles: true });
});
</script>
</head>
<body>
    <div class="loading" style="background: aqua;">Loading</div>
<div class="ui-layout-center">Center
	<p><a href="http://layout.jquery-dev.com/demos.html">Go to the Demos page</a></p>
	<p>* Pane-resizing is disabled because ui.draggable.js is not linked</p>
	<p>* Pane-animation is disabled because ui.effects.js is not linked</p>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>    
</body>
</html>

Open in new window



Secondly what if the url is taken more than 1 seconds or say 5 seconds to load?will this approach work?
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40230272
You might consider loading the "starting up" image in the HTML and loading the rest of the page via an AJAX request.  I'll see if I can give you an example in a moment.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40230300
So the solution to a slow loading page is to add more overhead to tell the user that the page is slow?

Why deal with the real problem which is the slow load.  Bring in a barebones skelton of the page and then use ajax in the background  after the load instead of making the user wait while you do all the frontend stuff.  If the page is that slow, then putting up something to tell the user you are processing is not going change the normal behavior which sees a rapid increase in the use of the back button after about 3 seconds of wait time.

Cd&
0
 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 250 total points
ID: 40230317
First, run this script and observe how long it takes.  This will simulate the slow script.
http://iconoun.com/demo/temp_rocking_server.php
<?php // demo/temp_rocking_server.php
error_reporting(E_ALL);

// SEE http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28481473.html

// THIS SCRIPT WAITS A WHILE BEFORE PRODUCING ITS OUTPUT, SIMULATING A LONG-RUNNING TASK
sleep(5);
echo 'Here is the output from the server-side AJAX script.';

Open in new window

Next we can add the client-side script and see how the two work together.
http://iconoun.com/demo/temp_rocking_client.html
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#initialDiv").html('Loading...');
    $.get("temp_rocking_server.php", function(response){
        $("#finalDiv").html(response);
        $("#initialDiv").hide("slow");
    });
});
</script>

<title>HTML5 Page with jQuery AJAX Loader</title>
</head>
<body>

<div id="initialDiv"></div>

<div id="finalDiv"></div>

</body>
</html>

Open in new window

HTH, ~Ray
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40230320
@Cd&: Great minds think alike once again!  :-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40230351
I don't know about great ones, maybe just old experienced ones.

Cd&
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40230368
Old, for sure.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 40231156
@Rocking: sorry I did not notice your response to me among all the other comments.

First: the one second is not a parameter at all. The following page will start showing first when output of second response is flushed to browser and not at the beginning of second response transmit. That means when the second response takes 15 seconds then the redirect after one second shows 16 seconds the first response with the Wait image.

And then: if you need a refresh of the page and need to display the wait image again after the Query parameter "&wait=done" was added then you need logic for doing so and change the QueryString parameters accordingly.
0
 

Author Comment

by:Rocking
ID: 40233265
@Zvonko : feeling sorry,no ways :)

i understood if the page takes 10 seconds to load the wait message is displayed for 10 seconds ,if 2 seconds to load then wait will be displayed for 2 seconds.this is dynamic


 if you need a refresh of the page and need to display the wait image again after the Query parameter "&wait=done" was added then you need logic for doing so and change the QueryString parameters accordingly.

Can u please help me out in this logic?

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>        
<html>
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <%
            if(request.getParameter("wait") == null){
                String strQueryString = request.getQueryString();
                if (strQueryString == null){
                    strQueryString = "?";
                } else {
                    strQueryString = strQueryString + "&";
                }
                response.setHeader("Refresh", "1; URL="+strQueryString+"wait=done"); 
        %>
          <title>waiting....</title>
          </head>
          <body>
          <h1 align=center>Please wait...</h1>
          <center><img src="http://images.simplecall.com/loading.gif" border="0"/></center>
          </body>
          </html>

        <% 
                return; 
            } 
        %>
        
<title>Layout Example</title>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.layout-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$('body').layout({ applyDemoStyles: true });
});
</script>
</head>
<body>
    <div class="loading" style="background: aqua;">Loading</div>
<div class="ui-layout-center">Center
	<p><a href="http://layout.jquery-dev.com/demos.html">Go to the Demos page</a></p>
	<p>* Pane-resizing is disabled because ui.draggable.js is not linked</p>
	<p>* Pane-animation is disabled because ui.effects.js is not linked</p>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>    
</body>
</html>

Open in new window

0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40280476
I got an alert from a moderator about this question.  

Have you tried the JQuery suggestion posted a few weeks ago at this link?
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28481473.html#a40230317

It is a tested and working code example.  You can see it in action on my server here:
http://iconoun.com/demo/temp_rocking_client.html

Please let us know if you have any questions.
0
 

Author Comment

by:Rocking
ID: 40294000
working with ajax is easy to show the loading images? what i wanted to know is the solution provided by an expert above,can u please help me out in in the queries below
i understood if the page takes 10 seconds to load the wait message is displayed for 10 seconds ,if 2 seconds to load then wait will be displayed for 2 seconds.this is dynamic


 if you need a refresh of the page and need to display the wait image again after the Query parameter "&wait=done" was added then you need logic for doing so and change the QueryString parameters accordingly.


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>        
<html>
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <%
            if(request.getParameter("wait") == null){
                String strQueryString = request.getQueryString();
                if (strQueryString == null){
                    strQueryString = "?";
                } else {
                    strQueryString = strQueryString + "&";
                }
                response.setHeader("Refresh", "1; URL="+strQueryString+"wait=done");
        %>

          <title>waiting....</title>
          </head>
          <body>
          <h1 align=center>Please wait...</h1>
          <center><img src="http://images.simplecall.com/loading.gif" border="0"/></center>
          </body>
          </html>

        <%
                return;
            }
        %>
       
<title>Layout Example</title>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.layout-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
      $('body').layout({ applyDemoStyles: true });
});
</script>
</head>
<body>
    <div class="loading" style="background: aqua;">Loading</div>
<div class="ui-layout-center">Center
      <p><a href="http://layout.jquery-dev.com/demos.html">Go to the Demos page</a></p>
      <p>* Pane-resizing is disabled because ui.draggable.js is not linked</p>
      <p>* Pane-animation is disabled because ui.effects.js is not linked</p>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>    
</body>
</html>
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40309653
You're making this too complicated... go back to what Ray said here: http:#a40230272.  You have a simple html page with nothing but a wait message.  the jsp page is then loaded from javascript (ajax) and inserted into the webpage.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40327097
I think the E-E community is entitled to an explanation of your marked-down grade.  Why did you do that?  What was wrong?  Please explain!
0
 

Author Comment

by:Rocking
ID: 40328762
there is no problem in providing the grade "A",however i got a response from one of the experts and i queried against the response but even after many days passed i didn't received any response.

the solution provided by "Ray" is absolutely correct,but i cannot use the approach because of the my limit in support project.

Please have a look at
"http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28481473.html#a40294000"
0
 

Author Comment

by:Rocking
ID: 40329447
Just a request please ak ray to provide his valuable comments on below link

"http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28481473.html#a40294000"
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now