jQuery: The Write Less, Do More JavaScript Library

| 
jQuery
 » 
jQuery General Discussion

Block UI question

View: New views
10 Messages — Rating Filter:   Alert me  

Block UI question

by Rich-100 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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.

Re: Block UI question

by jmatthews :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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

Re: Re: Block UI question

by Rich-100 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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

Re: Re: Block UI question

by Rich-100 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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

Re: Block UI question

by MorningZ :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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

Re: Re: Block UI question

by sunnytanya :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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.

Re: Re: Block UI question

by sunnytanya :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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

Re: Block UI question

by MorningZ :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Has nothing to do with using the full or minified version

Re: Block UI question

by sunnytanya :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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>
 
<P>Please Stand By......</P>
</div>
</div>

</BODY>
</HTML>

Re: Re: Block UI question

by sunnytanya :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Thanks for your help. I finally got it working.
Free embeddable forum powered by Nabble Forum Help