Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 597
  • Last Modified:

show processing image

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
Rocking
Asked:
Rocking
  • 7
  • 6
  • 3
  • +3
2 Solutions
 
GaryCommented:
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
 
ZvonkoSystems architectCommented:
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
 
RockingAuthor Commented:
@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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GaryCommented:
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
 
RockingAuthor Commented:
no it's part of jauery ui layout
http://layout.jquery-dev.com/
jquery.layout-latest.js
0
 
ZvonkoSystems architectCommented:
@Rocking: did you notice my JSP proposal?
0
 
RockingAuthor Commented:
@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
 
Ray PaseurCommented:
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
 
COBOLdinosaurCommented:
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
 
Ray PaseurCommented:
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
 
Ray PaseurCommented:
@Cd&: Great minds think alike once again!  :-)
0
 
COBOLdinosaurCommented:
I don't know about great ones, maybe just old experienced ones.

Cd&
0
 
Ray PaseurCommented:
Old, for sure.
0
 
ZvonkoSystems architectCommented:
@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
 
RockingAuthor Commented:
@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
 
Ray PaseurCommented:
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
 
RockingAuthor Commented:
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
 
RobOwner (Aidellio)Commented:
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
 
Ray PaseurCommented:
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
 
RockingAuthor Commented:
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
 
RockingAuthor Commented:
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 7
  • 6
  • 3
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now