When should i show loading ico when using AJAX?

[snowboardr]

When should i show a loading icon for ajax, and whats the best method for showing an animated gif when loading?

 

[steven290]

what library are you using

 

[steven290]

if using prototype it might look something like this

var myAjax = new Ajax.Updater(
            target, 
            url, 
            {
                method: 'get', 
                parameters: pars,
                onComplete:function(request){Element.hide('spinner')},
                onLoading:function(request){Element.show('spinner')}
            });

 

[BabyJeffy]

I would show an animated gif at the point you fire off your ajax request - and then remove it when you trigger your getLoadPOSTHTMLHttpResponse() function.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[snowboardr]

Would this work? I can't really test it at the point in time, because its localhost and there is not loading

var LoadHTMLHttp = null;
function LoadHtml(iCall,sSaveThis,intId) {
// show Loading icon
	document.getElementById('Layer1').style.display="";
    LoadHTMLHttp = createRequestObject();
    var url="ajax_display.asp?call=" + iCall + "&save=" + sSaveThis + "&id=" + intId
    LoadHTMLHttp.open('GET', url, true);
    LoadHTMLHttp.onreadystatechange = getLoadHTMLHttpResponse;
    LoadHTMLHttp.send('');
}

function getLoadHTMLHttpResponse() {
    if (LoadHTMLHttp != null)
        if (LoadHTMLHttp.readyState == 4)
            if (LoadHTMLHttp.status == 200)
                document.getElementById('viewsubtopic').innerHTML = LoadHTMLHttp.responseText;

// hide Loading icon				document.getElementById('Layer1').style.display="none";

}

 

[BabyJeffy]

I would set the display to block (rather than empty string). Other than that, it ought to work fine!

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[steven290]

simplfy your life use prototype

var pars = "call=" + iCall + "&save=" + sSaveThis + "&id=" + intId
var myAjax = new Ajax.Updater(
            "viewsubtopic", 
            "ajax_display.asp", 
            {
                method: 'get', 
                parameters: pars,
                onComplete:function(request){Element.hide('Layer1')},
                onLoading:function(request){Element.show('Layer1')}
            });

 

[BillyRayPreachersSon]

steven,

You show these great examples, but provide no information about the libraries we need to use to get them to work.

In your example above, "Ajax" is not defined anywhere, so the code will clearly not work. Nor are "iCall", "sSaveThis", "intId", or "Element" defined.

Don't get me wrong - I'm not simply trying to pick holes in your code... just point out that some users may not realise that your code wont work as-is, without extra libraries, so it might be good to give information about these when posting snippets that require them.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

simplfy your life use prototype

Whilst frameworks (like the one you have mentioned twice now) can be very useful in speeding up development time, they tend to require you learn their own data structures and methods... and they usually have quite particular ways of doing things.

I would rather learn the language - than learn how to implement some niche product based on that language. You end up with full control - and full understanding.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[steven290]

BillyRayPreachersSon

google prototype

or try this for reference:

http://www.sergiopereira.com/articles/prototype.js.html

BabyJeffy point taken

 

[snowboardr]

Being new to ajax world as some of you know, I think it would be a bad idea for me to jump into something such as prototype as this point, however I will spurl the link for a later date and look into it, but I feel that the "old school" way for now is efficient for what i am doing.

Regards,
Jason

 

[steven290]

thats cool but i would still in the prototype js in you documents. besides the ajax stuff it has some good functions

ex.

old way
document.getElementById('Layer1')

prototype
$('Layer1')

even further
document.getElementById('Layer1').style.display="";
to
Element.hide('Layer1');
or
Element.toggle('Layer1');

not to mention the many other functions, its really helped me even when not running ajax scripts