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 <[email protected]> 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 <[email protected]> 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 [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
