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.
>
