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 <rich...@gmail.com> wrote:
> 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...@xexam.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...@gmail.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.
>>
>
>
