AJAX Loading Spinner

[Daniel Jones]

Hi Guys,

Looking for a bit of help.  I have an action link which adds an item to the users shopping basket, it then updates a summary zone which is basically an overview of what they have added to their basket.  Like so:

<t:actionlink t:id="addToOrder" t:zone="summary" t:context="item.id">Add to Order</t:actionlink>

What I want to do is display a loading spinner when the 'Add to Order' link is clicked.  So my idea was to have a div containing the spinner which would be hidden initially.  I can then use the onclick event to show this div when the user clicks the 'Add to Order' link.  So something like this:

<t:actionlink onclick="showLoadingIndicator();" t:id="addToOrder" t:zone="summary" t:context="item.id">Add to Order</t:actionlink>

Which would just display the loading indicator forever.  I want the div containing the spinner to be hidden again when the AJAX request returns.  How do I monitor the request and trigger the hiding of the spinner when the AJAX request returns and the summary zone has been updated?

JavaScript has never been my strong point, it's on the to-do list of things to learn, but right now i'm looking for a quick answer.

Any help will be very much appreciated.

Regards,
Daniel

[DH-14]

I think what you need is prototype's global ajax responser register.

Ajax.Responders.register(
{
 onCreate: function() {
  // ajax request is sent
  }

 },
 onComplete: function() {
  // ajax response is back.
 }
})

DH

----- Original Message -----
From: "Daniel Jones"
To: <users@...>
Sent: Sunday, June 28, 2009 8:34 PM
Subject: AJAX Loading Spinner

>
> Hi Guys,
>
> Looking for a bit of help.  I have an action link which adds an item to the
> users shopping basket, it then updates a summary zone which is basically an
> overview of what they have added to their basket.  Like so:
>
> <t:actionlink t:id="addToOrder" t:zone="summary" t:context="item.id">Add to
> Order</t:actionlink>
>
> What I want to do is display a loading spinner when the 'Add to Order' link
> is clicked.  So my idea was to have a div containing the spinner which would
> be hidden initially.  I can then use the onclick event to show this div when
> the user clicks the 'Add to Order' link.  So something like this:
>
> <t:actionlink onclick="showLoadingIndicator();" t:id="addToOrder"
> t:zone="summary" t:context="item.id">Add to Order</t:actionlink>
>
> Which would just display the loading indicator forever.  I want the div
> containing the spinner to be hidden again when the AJAX request returns.
> How do I monitor the request and trigger the hiding of the spinner when the
> AJAX request returns and the summary zone has been updated?
>
> JavaScript has never been my strong point, it's on the to-do list of things
> to learn, but right now i'm looking for a quick answer.
>
> Any help will be very much appreciated.
>
> Regards,
> Daniel
> --
> View this message in context: http://www.nabble.com/AJAX-Loading-Spinner-tp24241153p24241153.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@...
> For additional commands, e-mail: users-help@...
>
>

[Daniel Jones]

Hi DH,

Thanks for your quick reply.

In the onComplete function is there any way to find out which request is actually complete.  As there could be many at the same time.  The reason I want to know this is so that I can hide the correct spinner.

I want to have a spinner next to each 'Add to Order' link.  So next to each link there will be a div with a unique id containing the spinner gif.  This will initially be hidden and i can use the onClick event to make this div visible when the 'Add to Order' link is clicked, $('add_to_order_link_1_spinner').show();

In the onComplete function (in the code you provided) how can i figure out which request is complete, so i can then figure out what button was actually clicked in the first place, so i can work out what spinner to hide.

I hope this makes sense.  It would be great if you or someone else could come up with a solution or point me in the right direction.

Cheers,
Daniel

DH-14 wrote:

I think what you need is prototype's global ajax responser register.

Ajax.Responders.register(
{
 onCreate: function() {
  // ajax request is sent
  }

 },
 onComplete: function() {
  // ajax response is back.
 }
})

DH