Block UI question

#1

I'm trying to implement a processing message and I think Block UI
might work however I can't seem to get it to redirect after my
processing is complete.

Basically, I have a form and a submit button which does a post to a
server and passes in several parameters for calculation. The server
can take anywhere from 15-45 seconds to return with the results.

I would like to trigger the modal Block UI div on Submit. The UI
would be blocked or grayed out underneath and the modal box would
appear prominently in the middle of the page and would say something
like "Calculation in Progress....please stand by". Also, I will add a
nice little ajax loader gif to go with the processing message.

I want to keep this message visible until the server is finished with
the processing. When I get the response back, (this is the trick), I
want to redirect to a completely new page with the results.

Can this be done with the BlockUI plugin or does anyone have an
example on how to do this.

#2

Once you re-direct by submit, your current page loses control. That's
the problem with the submit button. When user presses, your page is
immediately gone.

You need to manually do this by making your own, fake "submit." Stick
a .gif "submit look-alike" in your html.

<img id="submit" src="submit.gif"

Now, in your jquery function(ready)...

$("#submit").onclick() bla bla
{
1. load or form your waiting message
2. use AJAX to send your data out.
}

If you need help with AJAX, see the AJAX tutorial at w3schools.com
http://www.w3schools.com/ajax/default.asp

On Nov 2, 2:48*pm, Rich <rich... (AT) gmail (DOT) com> wrote:

Quote:

I'm trying to implement a processing message and I think Block UI
might work however I can't seem to get it to redirect after my
processing is complete.

Basically, I have a form and a submit button which does a post to a
server and passes in several parameters for calculation. *The server
can take anywhere from 15-45 seconds to return with the results.

I would like to trigger the modal Block UI div on Submit. *The UI
would be blocked or grayed out underneath and the modal box would
appear prominently in the middle of the page and would say something
like "Calculation in Progress....please stand by". *Also, I will add a
nice little ajax loader gif to go with the processing message.

I want to keep this message visible until the server is finished with
the processing. *When I get the response back, (this is the trick), I
want to redirect to a completely new page with the results.

Can this be done with the BlockUI plugin or does anyone have an
example on how to do this.

#3

Here's what I have so far. I'm kind of stuck. I just started creating a
simple test page with one input field and a submit button. I want to pass
the input value to a file called submit.html. This file will accept the
argument and doing the heavy lifting with the server. When the response is
returned, I want it to redirect to review.html.

The below doesn't work at all. I'm confused where to go from here. Any
help would be greatly appreciated. If I get this working, I would like to
post the example somewhere for someone else trying to achieve the same
thing.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>

<script type=text/javascript>

$(document).ready( function() {

$('#submit').click(function() {
$.blockUI({ message: $('#processing') });
$.ajax({
type: 'POST',
url: 'submit.html',
data: page,
success: function(content) {
window.location.replace("review.html");
}
});
return false;
});

// unblock UI when ajax request completes
$().ajaxStop($.unblockUI);
});

</script>

<body>

<form>
<input type="text" id="txt"><br>

<input id="submit" src="calculate.gif" type="image" name="Submit"
value="Calculate" />
</form>

<div id=processing style="display:none;">
<div style="text-align:center;padding:15px;font: normal 13px Arial,
Helvetica, sans-serif;color:#cc6633;font-weight:bold;width:350px">
<div class="BoxTitle" style="text-align:center;">Calculation in
Progress.</div>
<img src="ajaxloader.gif" style="margin-top:10px">
<p>Please Stand By......</p>
</div>

</div>

</body>

On Mon, Nov 2, 2009 at 10:56 PM, jmatthews <jmatthews (AT) xexam (DOT) net> wrote:

Quote:

Once you re-direct by submit, your current page loses control. That's
the problem with the submit button. When user presses, your page is
immediately gone.

You need to manually do this by making your own, fake "submit." Stick
a .gif "submit look-alike" in your html.

img id="submit" src="submit.gif"

Now, in your jquery function(ready)...

$("#submit").onclick() bla bla
{
1. load or form your waiting message
2. use AJAX to send your data out.
}

If you need help with AJAX, see the AJAX tutorial at w3schools.com
http://www.w3schools.com/ajax/default.asp

On Nov 2, 2:48 pm, Rich <rich... (AT) gmail (DOT) com> wrote:
I'm trying to implement a processing message and I think Block UI
might work however I can't seem to get it to redirect after my
processing is complete.

Basically, I have a form and a submit button which does a post to a
server and passes in several parameters for calculation. The server
can take anywhere from 15-45 seconds to return with the results.

I would like to trigger the modal Block UI div on Submit. The UI
would be blocked or grayed out underneath and the modal box would
appear prominently in the middle of the page and would say something
like "Calculation in Progress....please stand by". Also, I will add a
nice little ajax loader gif to go with the processing message.

I want to keep this message visible until the server is finished with
the processing. When I get the response back, (this is the trick), I
want to redirect to a completely new page with the results.

Can this be done with the BlockUI plugin or does anyone have an
example on how to do this.

#4

Don't know how but I got it to work. Still scratching my head. This is my
code. Anything look funny?

$(document).ready( function() {

$('#submit').click(function() {
/* Block the UI and display the processing message... */
$.blockUI({ message: $('#processing') });

/* do the AJAX call... */
var txtval = $("#txt").val();
$.post("submit.html", { txt: txtval },
function(data){
if(data.length >0) {
window.location.href("review.html");
}
});
});
// global hook - unblock UI when ajax request completes
$().ajaxStop($.unblockUI);
});

<form>
<input type="text" id="txt" name="txt"><br>
<br>
<input id="submit" src="calculate.gif" type="image" name="Submit"
value="Calculate" />
</form>

<div id=processing style="display:none;">
<div style="text-align:center;padding:15px;font: normal 13px Arial,
Helvetica, sans-serif;color:#cc6633;font-weight:bold;width:350px">
<div class="BoxTitle" style="text-align:center;">Calculation in
Progress.</div>
<img src="ajaxloader.gif" style="margin-top:10px">
<P>Please Stand By......</P>
</div>
</div>

On Tue, Nov 3, 2009 at 1:23 PM, Rich Elston <richzre (AT) gmail (DOT) com> wrote:

Quote:

Here's what I have so far. I'm kind of stuck. I just started creating a
simple test page with one input field and a submit button. I want to pass
the input value to a file called submit.html. This file will accept the
argument and doing the heavy lifting with the server. When the response is
returned, I want it to redirect to review.html.

The below doesn't work at all. I'm confused where to go from here. Any
help would be greatly appreciated. If I get this working, I would like to
post the example somewhere for someone else trying to achieve the same
thing.

script type="text/javascript" src="jquery-1.3.2.min.js"></script
script type="text/javascript" src="jquery.blockUI.js"></script

script type=text/javascript

$(document).ready( function() {

$('#submit').click(function() {
$.blockUI({ message: $('#processing') });
$.ajax({
type: 'POST',
url: 'submit.html',
data: page,
success: function(content) {
window.location.replace("review.html");
}
});
return false;
});

// unblock UI when ajax request completes
$().ajaxStop($.unblockUI);
});

/script

body

form
input type="text" id="txt"><br

input id="submit" src="calculate.gif" type="image" name="Submit"
value="Calculate" /
/form

div id=processing style="display:none;"
div style="text-align:center;padding:15px;font: normal 13px Arial,
Helvetica, sans-serif;color:#cc6633;font-weight:bold;width:350px"
div class="BoxTitle" style="text-align:center;">Calculation in
Progress.</div
img src="ajaxloader.gif" style="margin-top:10px"
p>Please Stand By......</p
/div

/div

/body

On Mon, Nov 2, 2009 at 10:56 PM, jmatthews <jmatthews (AT) xexam (DOT) net> wrote:

Once you re-direct by submit, your current page loses control. That's
the problem with the submit button. When user presses, your page is
immediately gone.

You need to manually do this by making your own, fake "submit." Stick
a .gif "submit look-alike" in your html.

img id="submit" src="submit.gif"

Now, in your jquery function(ready)...

$("#submit").onclick() bla bla
{
1. load or form your waiting message
2. use AJAX to send your data out.
}

If you need help with AJAX, see the AJAX tutorial at w3schools.com
http://www.w3schools.com/ajax/default.asp

On Nov 2, 2:48 pm, Rich <rich... (AT) gmail (DOT) com> wrote:
I'm trying to implement a processing message and I think Block UI
might work however I can't seem to get it to redirect after my
processing is complete.

Basically, I have a form and a submit button which does a post to a
server and passes in several parameters for calculation. The server
can take anywhere from 15-45 seconds to return with the results.

I would like to trigger the modal Block UI div on Submit. The UI
would be blocked or grayed out underneath and the modal box would
appear prominently in the middle of the page and would say something
like "Calculation in Progress....please stand by". Also, I will add a
nice little ajax loader gif to go with the processing message.

I want to keep this message visible until the server is finished with
the processing. When I get the response back, (this is the trick), I
want to redirect to a completely new page with the results.

Can this be done with the BlockUI plugin or does anyone have an
example on how to do this.

#5

There's all kinds of things to look at...

first, you pass in "page" as the data for the POST call.... but no
where (in that code sample) do you define it

second.... load up Firefox and fire up Firebug (http://
www.getfirebug.com), this will let you watch, in real time:
1) what you are sending to "submit.html"
2) what that response is
3) if there is an error, you should be able to look right at Firebug
to tell you what the error is

third, while i am not saying that it doesn't work, i've never seen
"window.location.replace(...)"... try window.location =
"review.html", and keep in mind that this new page will have
absolutely no clue about any values passed to/from submit.html

lastly, take $.ajaxStop out of the code, which you don't have the
right syntax for anyways......

$('#submit').click(function() {
$.blockUI({ message: $('#processing') });
$.ajax({
type: 'POST',
url: 'submit.html',
data: page,
success: function(content) {
window.location.replace("review.html");
},
complete: function(x,y) {
$.unblockUI();
}
});
return false;
});

On Nov 3, 2:23*pm, Rich Elston <rich... (AT) gmail (DOT) com> wrote:

Quote:

Here's what I have so far. I'm kind of stuck. *I just started creating a
simple test page with one input field and a submit button. *I want to pass
the input value to a file called submit.html. *This file will accept the
argument and doing the heavy lifting with the server. When the response is
returned, I want it to redirect to review.html.

The below doesn't work at all. *I'm confused where to go from here. *Any
help would be greatly appreciated. *If I get this working, I would like to
post the example somewhere for someone else trying to achieve the same
thing.

script type="text/javascript" src="jquery-1.3.2.min.js"></script
script type="text/javascript" src="jquery.blockUI.js"></script

script type=text/javascript

$(document).ready( function() {

* * $('#submit').click(function() {
* * * * $.blockUI({ message: $('#processing') });
* * * * $.ajax({
* * * * type: 'POST',
* * * * url: 'submit.html',
* * * * data: page,
* * * * success: function(content) {
* * * * window.location.replace("review.html");
* * * * }
* * });
* return false;
* });

// unblock UI when ajax request completes
* * $().ajaxStop($.unblockUI);

});

/script

body

form
input type="text" id="txt"><br

input id="submit" src="calculate.gif" type="image" name="Submit"
value="Calculate" /
/form

div id=processing style="display:none;"
div style="text-align:center;padding:15px;font: normal 13px Arial,
Helvetica, sans-serif;color:#cc6633;font-weight:bold;width:350px"
div class="BoxTitle" style="text-align:center;">Calculation in
Progress.</div
img src="ajaxloader.gif" style="margin-top:10px"
p>Please Stand By......</p
/div

/div

/body

On Mon, Nov 2, 2009 at 10:56 PM, jmatthews <jmatth... (AT) xexam (DOT) net> wrote:
Once you re-direct by submit, your current page loses control. *That's
the problem with the submit button. *When user presses, your page is
immediately gone.

You need to manually do this by making your own, fake "submit." *Stick
a .gif "submit look-alike" in your html.

*<img id="submit" src="submit.gif"

Now, in your jquery function(ready)...

$("#submit").onclick() bla bla
{
* *1. load or form your waiting message
* *2. use AJAX to send your data out.
}

If you need help with AJAX, see the AJAX tutorial at w3schools.com
http://www.w3schools.com/ajax/default.asp

On Nov 2, 2:48 pm, Rich <rich... (AT) gmail (DOT) com> wrote:
I'm trying to implement a processing message and I think Block UI
might work however I can't seem to get it to redirect after my
processing is complete.

Basically, I have a form and a submit button which does a post to a
server and passes in several parameters for calculation. *The server
can take anywhere from 15-45 seconds to return with the results.

I would like to trigger the modal Block UI div on Submit. *The UI
would be blocked or grayed out underneath and the modal box would
appear prominently in the middle of the page and would say something
like "Calculation in Progress....please stand by". *Also, I will add a
nice little ajax loader gif to go with the processing message.

I want to keep this message visible until the server is finished with
the processing. *When I get the response back, (this is the trick), I
want to redirect to a completely new page with the results.

Can this be done with the BlockUI plugin or does anyone have an
example on how to do this.

#6

I am also trying to achieve the same thing. Since you got it to work, can you
please post a step-by-step process of how to get this working....will be
even helpful if you can post the code with some comments too. Thanks in
Advance.

--
View this message in context: http://old.nabble.com/Block-UI-question-tp26174291s27240p26197217.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

#7

If you have seen my previous reply - "am I missing anything here?"
Is is because I downloaded jquery-1.3.2.js instead of jquery-1.3.2.min.js ?
If that is the case, from where can I download the right js file?

Thanks Again
--
View this message in context: http://old.nabble.com/Block-UI-question-tp26174291s27240p26202265.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

#8

Has nothing to do with using the full or minified version

#9

With Rich's help...I have the following files. But nothing seems to be
working. Please advise if I'm missing anything.

1. test.jsp
2. calculate.jsp - dummy jsp
3. review.jsp - dummy jsp
4. jquery-1.3.2.js
5. jquery.blockUI.js
6. And two graphics.

When I run the test.jsp page http://localhost/testProject/test.jsp and click
on the calculate button, it changes the URL but does nothing. This is the
changed URL
http://localhost/vendorManagement/test.jsp?txt=1223&Submit.x=50&Submit.y=13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>Processing</TITLE>
<META http-equiv=content-type content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
<SCRIPT type=text/javascript>

$(document).ready( function() {

/* Block the UI... */
$('#submit').click(function() {
$.blockUI({ message: $('#processing') });

/* do the AJAX call and processing here... */
var txtval = $("#txt").val();
$.post("calculate.jsp", { txt: txtval },
function(data){
if(data.length >0) {
window.location.href("review.jsp");
}
});
});
// unblock UI when ajax request completes
complete: function(x,y) {
$.unblockUI();
}
});

</SCRIPT>
<STYLE type=text/css>
body {
background: #FFF;
font: normal 12px Arial, Helvetica, sans-serif;
padding: 0;
margin:0;
}

#processing {
padding:0;
margin:0;
}
..BoxTitle {
border-bottom:#ccc 1px solid;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight:bold;
color: #005b9c;
line-height: 120%;
margin-bottom:5px;
padding:2px 0;
}
</STYLE>
</HEAD>
<BODY>
<P>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><br>
<br>
<br>

<br>
<form>
Enter a value:
<input type="text" id="txt" name="txt"><br>
<br>
<input id="submit" src="img/calculate.gif" type="image" name="Submit"
value="Calculate" />
</form>

</td></tr>
</table>

<div id=processing style="display:none;">
<div style="text-align:center;padding:15px;font: normal 13px Arial,
Helvetica, sans-serif;color:#cc6633;font-weight:bold;width:350px">
<div class="BoxTitle" style="text-align:center;">Calculation in
Progress.</div>
img/ajaxloader.gif
<P>Please Stand By......</P>
</div>
</div>

</BODY>
</HTML>
--
View this message in context: http://old.nabble.com/Block-UI-question-tp26174291s27240p26203460.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

#10

Thanks for your help. I finally got it working.
--
View this message in context: http://old.nabble.com/Block-UI-question-tp26174291s27240p26213648.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Block UI question

jQuery jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

Block UI question - 11-02-2009 , 03:48 PM

Re: Block UI question - 11-02-2009 , 11:56 PM

Re: [jQuery] Re: Block UI question - 11-03-2009 , 02:23 PM

Re: [jQuery] Re: Block UI question - 11-03-2009 , 03:06 PM

Re: Block UI question - 11-03-2009 , 03:09 PM

Re: Re: [jQuery] Block UI question - 11-04-2009 , 09:27 AM

Re: Re: [jQuery] Block UI question - 11-04-2009 , 01:42 PM

Re: Block UI question - 11-04-2009 , 01:57 PM

Re: [jQuery] Block UI question - 11-04-2009 , 02:48 PM

Re: Re: [jQuery] Block UI question - 11-05-2009 , 07:59 AM