AJAX Loading Spinner

[Daniel Jones <da...@murieston.com>]

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@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org

Re: AJAX Loading Spinner

[Daniel Jones <da...@murieston.com>]

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
> 

-- 
View this message in context: http://www.nabble.com/AJAX-Loading-Spinner-tp24241153p24256052.html
Sent from the Tapestry - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org

Re: AJAX Loading Spinner

[ningdh <ni...@gmail.com>]

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: <us...@tapestry.apache.org>
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@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
> 
>