Hi,

If you do decide to just go with a progress indicator (a spinner or
similar, rather than an actual progress bar), the easiest way to do it
is to make it completely automatic -- whenever an ajax request is
initated it gets shown (if not already showing), and whenever one
completes, it gets hidden (if there aren't any others still running).

That's what Ajax.Responders[1] are for:
* * * *
Ajax.Responders.register({
    onCreate: function() {
        $('progress').show();
    },
    onComplete: function() {
        if (Ajax.activeRequestCount == 0) {
            $('progress').hide();
        }
    }
});
* * * *

Prototype pre-installs a responder that keeps the
Ajax.activeRequestCount var up-to-date, so you can just use it.

Assuming you have an image something like this:

<img id='progress' src='spinner.gif' style='display: none';>

(And optionally CSS like this:

img[src=spinner.gif] {
    width:      32px; /* or whatever its... */
    height:     32px; /* ...actual size is */
}

) ...the spinner.gif (you'll have to supply it) will appear when ajax
requests are running and disappear when they're not.

[1] http://prototypejs.org/api/ajax/responders

HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available


On Jul 14, 3:29 am, Fares Farhan <fares.far...@gmail.com> wrote:
> I assume that you're searching a way to display a loading indicator
> while a page is processing an XHR using prototype js because we're in
> protoculous discussion group ;) so it should be server-agnostic :).
>
> here is what I've done :
>
> function loadData(strParam1, strParam2){
>     var url = 'script.php?
> strParam1='+strParam1+'&strParam2='+strParam2;
>     new Ajax.Request(url, {
>       method: 'get',
>       onCreate: function() {
>         $('ajaxActivity').show(); // show a div with loading
> indicator, could be a regular "spinner" animated gif
>       },
>       onComplete: function(response) {
>         $('ajaxActivity').hide(); // hide the loading indicator
>         var strResponse = response.responseText;
>         $('dataHolder').update(strResponse);}
>
> document.observe('dom:loaded',function(){
> $('button1').observe('click',function(event){
> loadData(strParam1, strParam2)
> // end observe click
>
> });
> // end dom:loaded
> });
>
> It can be applied to any DOM element which has id 'button1' but if you
> want to do that from a button contained in an HTML Form, you have to
> "hijack" the form submission event first, otherwise the page will
> reload with form's elements' value displayed on the address bar, as
> you mentioned "the page does not
> go anywhere but something pops up or appears and say the page is
> processing"
>
> something like :
>
> $('myForm').observe('submit',function(event){
> event.stop();
> doSomething($('myForm').serialize());
>
> // end observe submit
>
> });
>
> and related to your "not allowing the user to do anything", you may
> create a div which has browser's viewport width and height, covering
> the page. Can be set on the onCreate even of the new XHR call,
> something similar with $('pageOverlay').show() or $
> ('pageOverlay').toggle(). set this 'pageOverlay' div from CSS with
> high z-Index, like 1000.
>
> Hope you find this useful,
>
> Cheers
>
> On Jul 7, 4:33 am, anthony <mrsmi...@gmail.com> wrote:
>
>
>
> > I am sure this is a commonly asked question or can be found in many
> > tutorials, but I just can;t see to figure out what to search for.
>
> > I am looking for something were when I hit submit, the page does not
> > go anywhere but something pops up or appears and say the page is
> > processing, not allowing the user to do anything. Can someone point me
> > in to the right direction?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to