Display "Loading' animated gif or js : How to

[Vineet]

A View requests or redirects to some controller.
It takes some time to serve the request.
In the meantime, how do I display animated "Loading" image?
It will disappear after the request is served.

----Vineet

[juanduke]

Hi Vinnet:

The easiest way to achive this, is showing a image (<img src="..." ) before the ajax call

Then when ajax response is loaded, hide the images.

Or showing by default in a view, the $(document).ready(function(){

//code to hide image here

});

You can generte custom loading images here:

http://www.ajaxload.info/

[Paolo Caruccio]

Hi Vineet,

as juanduke has suggested, I use the following jquery function (I put it in web2py_ayax.js) instead of standard w2p ajax function to show a loading image:

function web2py_polling(u,s,t){

$('#'+t).html('<div id="loading_gif_container"><img src="/static/images/loading.gif" alt="loading..." height="64" width="64" /></div>');

ajax(u,s,t);

}

Of course you can set some css rules to custom div#loading_gif_container.

How to use:

I insert at the bottom of the view :

<script  type="text/javascript" charset="utf-8">

//<!--

jQuery(document).ready(function(){

web2py_polling('get_output',[args],'output_target');

//-->

</script>

### controller ###

def get_output():

the_output = "I'm the output"

return the_output

You could also use a standard ajax call to a function that returns web2py_polling function that, optionally, calls another action.

For example:

### in the view ###

<script  type="text/javascript" charset="utf-8">

//<!--

jQuery(document).ready(function(){

ajax('get_output',[args],':eval');

//-->

</script>

### controller ###

def get_output():

# make evaluation 

return "web2py_polling('another_action',[args],'output_target');"

def another_action():

the_output = "I'm the output"

return the_output

Ciao.

Paolo

[Vineet]

@juanduke, @Paolo,

Thanks for sharing your time & ideas.
I successfully implemented your idea by juanduke.
The url -- http://www.ajaxload.info/ is excellent.

Regarding Paolo's code, I need to re-structure my code somewhat (which
I will definitely do).
Then I will implement the idea.
In case of any query, I'll post it here.

Thanks again.
---Vineet

On Oct 13, 12:05 am, Paolo Caruccio <paolo.carucci...@gmail.com>
wrote:

[Jaison Raj]

Hi Vineet,

Could you share your successful implementation of the code?

in my controller i have the following:

def index():

    msg="wait"

    form_main=FORM(INPUT(_type='submit', value="RUN"),

                   INPUT(_name='text'),

                   )

    if form_main.accepts(request.vars,formname='form_main'):

        msg=wait(form_main.vars.text)

    return dict(msg=msg)

def wait(some_text):

    import time

    time.sleep(10)

    msg=some_text

    return (msg)

in my view:

<form enctype="multipart/form-data" action="{{=URL()}}" method="post" align="left">

        <input name="_formname" type="hidden" value="form_main">

    

<label>Type something and click RUN: <input name="text" requires=IS_NOT_EMPTY()></label>

            <input type="submit" value="RUN">

</form>

<br/>

<div>

    {{=msg}}

</div>

so basically i have a text box where user enters some text, then the controller simply takes the text and runs a wait function before returing the text to view.

I am trying to implement the said loading.gif during the function wait is on-going.

Could you please advice?

I have very limited knowledge on Ajax.

[Dave S]

On Friday, November 3, 2017 at 2:47:05 PM UTC-7, Jaison Raj wrote:

Hi Vineet,

Could you share your successful implementation of the code?

I'm not sure Vineet is still around.
 

[ code elided]

so basically i have a text box where user enters some text, then the controller simply takes the text and runs a wait function before returing the text to view.

I am trying to implement the said loading.gif during the function wait is on-going.

Could you please advice?

I have very limited knowledge on Ajax.

Web2py has a very handy wrapper for ajax, the LOAD() helper.
<URL:http://web2py.com/books/default/chapter/29/12/components-and-plugins#LOAD>
The content argument allows you to customize the loading message (by default, just "Loading ...").

My example:

{{loadmsg = CAT("loading ...", BR(), SPAN(_class="fa fa-spinner fa-spin"))}}
{{=LOAD(c='myhosts', f='myhosts2.load', target='my_hosts', content=loadmsg, ajax=True)}}

(fa-spinner is an animation available from Font-Awesome-4.3.0 on the web)
When you need to move to fancier stuff, you can also use the jquery and ajax tools described in
<URL:http://web2py.com/books/default/chapter/29/11/jquery-and-ajax>

Hope this helps.