Show busy during AJAX?

[Dave S]

Is there an easy way to have the browser show your page is "busy" during an AJAX call?

(I like hourglasses.)

/dps

[Leonel Câmara]

Yeah, just insert an element into the dom with it and then remove or hide it when the ajax call is done.

[António Ramos]

i do like this

dom event

onclick="$('drop_html_here').html("wait!!!");my_ajax_function();"

<script>

function my_ajax_function(){

call your ajax function ....

this function should return some html to replace your initial "wait!!!"

</script>

2015-03-18 2:38 GMT+00:00 Leonel Câmara <leonel...@gmail.com>:

Yeah, just insert an element into the dom with it and then remove or hide it when the ajax call is done.

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Dave S]

On Wednesday, March 18, 2015 at 3:11:26 AM UTC-7, Ramos wrote:

i do like this

dom event

onclick="$('drop_html_here').html("wait!!!");my_ajax_function();"

<script>

function my_ajax_function(){

call your ajax function ....

this function should return some html to replace your initial "wait!!!"

</script>

Thank you.  This works pretty well, when I put the  ID of the target div in the $("...").

 

2015-03-18 2:38 GMT+00:00 Leonel Câmara <leonel...@gmail.com>:

Yeah, just insert an element into the dom with it and then remove or hide it whe

n the ajax call is done.

Ramos' version swaps in new content twice per click:  the "wait!!!" is one swap, and then the waited-for-content is another swap.
Your method potentially cuts down the swaps (but the same number of redraws).  I am still interested, though, in having the
cursor do the hour-glass thing.  Is cursor changing just a javascript call away?

/dps

 

[Leonel Câmara]

fontawesome has spinner icons you can use that don't even need javascript because they use css transitions. Although they don't have an hourglass you can check them here check http://fontawesome.io/examples/#animated

I've found an ugly hourglass:

http://siyanpanayotov.com/css3-hourglass-throbber/

[Dave S]

On Wednesday, March 18, 2015 at 7:26:35 PM UTC-7, Leonel Câmara wrote:

fontawesome has spinner icons you can use that don't even need javascript because they use css transitions. Although they don't have an hourglass you can check them here check http://fontawesome.io/examples/#animated

The spinner, at least, does require javascript, but since I'm doing AJAX I do have javascript enabled.

I like those icons, too.

I've found an ugly hourglass:

http://siyanpanayotov.com/css3-hourglass-throbber/

I don't think that's ugly.  Not quite as pretty as the other spinners, but not ugly.

Thank you!

/dps
 

[Dave S]

On Wednesday, March 18, 2015 at 6:31:08 PM UTC-7, Dave S wrote:

On Wednesday, March 18, 2015 at 3:11:26 AM UTC-7, Ramos wrote:

i do like this

dom event

onclick="$('drop_html_here').html("wait!!!");my_ajax_function();"

<script>

function my_ajax_function(){

call your ajax function ....

this function should return some html to replace your initial "wait!!!"

</script>

Thank you.  This works pretty well, when I put the  ID of the target div in the $("...").

The ajax'd content has a couple of elements in it, as you'd expect.  One of them is a PRE.  Using "#my_id" as above replaced everything.  Using "#my_id.pre" didn't work.  I suppose I can try giving the PRE an ID.  Sounds like a job for tomorrow.

Thanks again for the tips!

/dps

[Dave S]

On Wednesday, March 18, 2015 at 10:18:23 PM UTC-7, Dave S wrote:

On Wednesday, March 18, 2015 at 7:26:35 PM UTC-7, Leonel Câmara wrote:

fontawesome has spinner icons you can use that don't even need javascript because they use css transitions. Although they don't have an hourglass you can check them here check http://fontawesome.io/examples/#animated

The spinner, at least, does require javascript, but since I'm doing AJAX I do have javascript enabled.

It appears that the js is needed to create the font.  WIth js off, you may have a "something" rotating due to the CSS animation, but it won't be the pretty spinner.
 

I like those icons, too.

I've found an ugly hourglass:

http://siyanpanayotov.com/css3-hourglass-throbber/

I don't think that's ugly.  Not quite as pretty as the other spinners, but not ugly.

Thank you!

and again

/dps

[Derek]

eh, use an animated gif... 

http://www.ajaxload.info/

gotta love their license...

[Dave S]

On Thursday, March 19, 2015 at 5:23:52 PM UTC-7, Derek wrote:

eh, use an animated gif... 

http://www.ajaxload.info/

gotta love their license...

Interesting indeed!

/dps
 

[c...@cemeren.com]

I prefer to use the below scripts;

    $(document).ajaxStart( function () {

      $(".aloading").show();

    });

    

    $(document).ajaxStop( function () {

      $(".aloading").hide();

    });

put somewhere above body for example; 

<div class="aloading"></div>

and css

.aloading {

    display: none;

    border-style: none;

    position:fixed;

    left:45%;

    top :38%;

    width:66px;

    height:66px;

    background: url("/static/images/loaderblack.gif") no-repeat;

    z-index: 10001;

                }

I am not an expert this was what I came up once searched about years ago. I still keep it.

If you don't want to show "busy"  for some ajax calls set global to false in ajax call and the above scripts will not be triggered.