How do I use an ajax indicator without using and updatepanel?

Hi, I have an onclick event that calls a javascript function that calls a webservice via ajax (the webservice has the [ScriptService] attribute.)

How can I have an ajax indicator without using the updatepanel.  Nothing so far has required the updatepanel.  I tried a simple visible and then hidden style, but it isn't working.

Thank you for any help.

7/7/2008 6:50:50 PM 13973 articles. 1 followers. Follow

4 Replies

Similar Articles

[PageSpeed] 11

 Add the indicator (an animated gif? or some text) to a div which is absolutely positioned has z-index set and also has id, like:

<div id="progress" style="position: absolute; left: 100px; top: 100px; width: 100px; height: 20px; background-color: red; color: white; z-index: 100; display: none;">

   <p>Please wait...</p>


Now before you call the webservice in javascript:

$get( "progress" ).style.display = "block";

In the callback (and also in the error handling function):

$get( "progress" ).style.display = "none";

Also put some sleep time in the webservice code to test, because if the response is too fast you won't see too much in the browser.

7/8/2008 7:51:45 AM

Thank you.  Can you tell me a basic beginner question?  What is this construct called:

$get( "progress" ).

 I mean where it has the dollar sign and parenthesis.  I had never seen javascript like that until I started using jQuery and ajax.  Just didn't know what it meant, event thought I can figure out what it does.  Wanted to research it.


7/8/2008 1:40:51 PM

Just didn't know what it meant, event thought I can figure out what it does.  Wanted to research it.

This is some shortcut to document.getElementById.  

It is defined this way in ms ajax:

(you can also download the full source code [microsoft ajax library from] to see how the framework works, also good to learn some advanced javascript: ):

var $get = Sys.UI.DomElement.getElementById = function Sys$UI$DomElement$getElementById(id, element) {
    /// <summary locid="M:J#Sys.UI.DomElement.getElementById" />
    /// <param name="id" type="String"></param>
    /// <param name="element" domElement="true" optional="true" mayBeNull="true"></param>
    /// <returns domElement="true" mayBeNull="true"></returns>
    var e = Function._validateParams(arguments, [
        {name: "id", type: String},
        {name: "element", mayBeNull: true, domElement: true, optional: true}
    if (e) throw e;
    if (!element) return document.getElementById(id);
    if (element.getElementById) return element.getElementById(id);
    var nodeQueue = [];
    var childNodes = element.childNodes;
    for (var i = 0; i < childNodes.length; i++) {
        var node = childNodes[i];
        if (node.nodeType == 1) {
            nodeQueue[nodeQueue.length] = node;
    while (nodeQueue.length) {
        node = nodeQueue.shift();
        if ( == id) {
            return node;
        childNodes = node.childNodes;
        for (i = 0; i < childNodes.length; i++) {
            node = childNodes[i];
            if (node.nodeType == 1) {
                nodeQueue[nodeQueue.length] = node;
    return null;

You can also specify a second parameter to $get: $get Shortcut Method

7/8/2008 2:25:04 PM


If you want to get Ajax-enabled, you can use XMLHttpRequest. Please check this reference:

If you want to hidden some control by using JavaScript on the Client, you can use property display or visibility.

document.getElementById('controlid').style.display="none";  // hidden the control
document.getElementById('controlid').style.display="block"; // display the control

document.getElementById('controlid').style.visibility="hidden";  // hidden the control
document.getElementById('controlid').style.visibility="visible";  //display the control

"display" and "visibility" are different. When "visibility" is set to hidden, the element being hidden still occupies its same place in the layout of the page. But "display" won't.

 Check this:

Hope it helps.


Vince Xu
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
7/9/2008 4:18:34 AM

Similar Artilces:

Samples of using ajax without using toolkit
Hi,           I am new to Anyone please give me some samples or examples of ajax by using callbacks without using toolkit and without database.  Please reply soon...   Thanks In Advance <asp:Label id="Time" runat="server"></asp:Label><asp:ScriptManager id="sm1" runat="server"></asp:ScriptManager> <asp:UpdatePanel>    <ContentTemplate>        <asp:Button id="Button" runat="server&q...

how i use ajax in web application without using ajaxtoolkit?
Hello, to every one i m new in ajax, plz help meso plz tell me how i start ajax in .net without using ajaxtoolkit or dlls Thankx in advanced Regardz ParhiyarThe best and most important Thing in this world is to help others so that then GOD Helps u!! So keep help Others!!!!! you dont need the controltoolkit.... that is just a set of pre-packaged controls for usage. You could do the exact same thing that any one of them does with just the native Asp controls and the Ajax extentions....  Improve Your Coding StandardsRules to Succ...

How to develop a website without using update panels using ajax . .
hi all,   How to develop a website without using update panels using ajax . . .since i m using many update panels in a single page it loads slowly.... Ashok Hi You can use ajax web service approach to develop your website which will give far more better performance compared to update panels . And In order to get the best out of web service approach you can use DotNetSlackers ajaxdataControls(ADC) like gridview , datalist etc which enables you to do alomst everything on client side using javascript . With this you can dramatically increase the overall perf...

Use Ajax Control Toolkit without .NET?
Hello,  I couldn't find any (good) documentation about the Ajax Control Toolkit and would like to know if it can also be used independently of the .Net framework, e.g. with php or java on the server.  thanks, luke Hey, No, it requires the ASP.NET AJAX extensions, which has to use .NET.  You may be able to find a port for Mono; don't know anything about that.  Brian"Trust in the Lord and do what is good; dwell in the land and live securely. Take delight in the Lord, and He will give you your heart's desires" (Psalm 37: 3-4)....

call webservice using javascript without using AJAX and
HI,how can i call a webservice without using AJAX and, using any protocols?Thanks.X you could skip using an AJAX framework and issue an xmlHttpRequest directly Banavige~~~~~~~~~~~~Need a site code sample in a different language? Try converting it with: Hi, thanks mbanavige.well, is there any disadvantage of using xmlhttprequest?and one more question can AJAX also work on other web servers than IIS like Apache? and is AJAX compatible with all browsers other than IE?how can i call a web servi...

How do use I use AJAX UpadtePanel ?
Ok, I here is what I want to do. I have a MasterPage so I will call it MymasterPage.master. Then I have a page my default page, so I will call it Default.aspx which uses the MasterPage I mentioned above. Now I have a an UpdatePanel on Mymaterpage and the Default.aspx uses the MasterPage. I have a folder called Controls and inside this folder, I have a page (ascx). This control works fine, but it causes a postback which refreshes the entire page. My preference is to just refesh ONLY the content of the control when the submit buton on it is clicked. SO My Question is: How do I use UpdatePan...

How to use Google Ajax Toolkit and Yahoo Ajax Toolkit in .Net 2.0
This is Ramesh,I know how work with MicroSoft  Ajax Toolkit, But i need : how to work with google and yahoo Ajax Toolkit's in .Net 2.0Is there any way to work  with google and yahoo Ajax Toolkit's in .Net 2.0 ?Please help any body as soon as,  Please Please Help me with in short time Thank youRamesh    Ramesh.M...

I need to use Ajax without Ajax Control like Script Manager, Is it possible?
Hi all, I am writing this for learning point of view. I did not install ajax exe to get ajax enabled controls like scriptmanager. But I am using vs2005. I need to use ajax without using scriptmanager conltrls like this. I need to do that by javascitp. Is it possible? If it is possible then I am realy happy anybody send me sample code for that.. Thanks R. Eswaran Hi you can develop functionality using ajax in so many ways... Bellow is the simple way to use AJAX. HTML code of Default2.aspx page... <%@ Page Language="VB" AutoEventWireup="false" CodeFil...

How well can Ajax and Javascript be used inside.Net application using C#?
In my experimentation with Ajax.Net I am not sure how far I can go with Ajax. NET and /or  javascript on the .NET platform. Is there anyone who had used these technologies exstensively who can tell me who well they can be used on .NET's platform? I guess what I am asking is...will using Ajax be like using ajax and or will using javascript be like using javascript when you use it on .NET's platform or will there be suttle diffrences?   thanks Allen is basically just a javascript library like scriptaculous or others.  It has lo...

Ajax controls/events in partial page updates w/o using Ajax UpdatePanel
 I company I work for has been using a old library ("slickback") which does XML-based form postbacks via javascript and replaces DIV tag sections (looks very much like how Ajax does panel updates).  It works somewhat okay for content updates w/o updating the page.  We'd like to someday move the whole system to AJAX but as of right now, there is no time to do so.We recently started using AJAX Controls such as the SliderExtender.  These work great......  until we do our slickback postback.  When the content is updated, the sliders disappear and all t...

Configure AJAX extensions to enable AJAX controls ***WITHOUT*** using web.config file
I've inherited a legacy application that has many issues.  I'm not going to get into specifics or debates about what *should* be done; I know what *should* be done, but right now I have to <sigh> 'get 'er done'.So here's what I need to do:I need to get the AJAX controls working WITHOUT using the configuration file.  Of course things work great if I update the configuration file declaritively, but that's not option.Now with WF I can set my managers (such as adding the persistence service or adding the manual scheduler service) declaritively or in co...

How Do I Use AJAX and AJAX Control Toolkit In Visual Studio 2008 When Targetting .NET 2.0 Framework?
I have recently converted a lot of Visual Studio 2003 / .NET Framework 1.1 projects to Visual Studio 2008 / .NET Framework 2.0.  I want to be able to use AJAX and AJAX Control Toolkit under Visual Studio 2008 while we target the .NET 2.0 Framework.  Unfortunately, we cannot target .NET Framework 3.5 because we need Windows 2003 Server for that and we only have Windows 2000.  I do not want to use Visual Studio 2005 either.  Is it possible to do what I want given these conditions?You can't stop entropy so why even try? The simple answer is yes.  What pr...

Use of Ajax in WebSite which is not Ajax enabled.
How to use Ajax in a web site which is not Ajax enabled. When i tried to implemet the same i recieved an error saying "Sys" not defined. What should i do now.  "Sys is not defined" error - ASP.NET Forumsdid you try to just copy web.config file of a Ajax Enabled Application to your Web Application  which is not Ajax Enabled ??Thanx, [KaushaL] || BloG || Profile || Microsoft MVP"I would love to change the world, but they won’t give me the source code"Don't forget to click "Mark as Answer" on the post that helped you.This credits that memb...

Do I have to use javascript in order to use AJAX?
I would like to use AJAX in my ASP pages so that I can load a part of the page instead of the wholepage when a user clicks on a particular radio button.  I bought a book on Microsoft AJAX, but the book keeps mentioning javascript.  I don't use javascript anywhere in my page.  I think I use VB, but I'm not sure.  (I am still a little confused by the overall picture of things.) I have included a sample of my code below.  Am I using VB here, or is this just ADO?  Also, if I did need to use javascript, how would I include that since my script needs to read ...

Web resources about - How do I use an ajax indicator without using and updatepanel? -

Newest 'internet-explorer-11' Questions - Stack Overflow
current community chat blog Stack Overflow Meta Stack Overflow Stack Overflow Careers your communities Sign up or log in to customize your list. ...

Calendar of Events - St Paul the Apostle Primary, Winston Hills
... Paul the Apostle is a two-stream Catholic parish school in Winston Hills, catering for boys and girls from Kindergarten to Year 6. Hidden UpdatePanel, ...

Drink of the Week - Logicum
Logicum It's Logical to share Menu Skip to content Home Contests Food Recipes Drink of the Week Health Technology Sports Space World Day Weapons ...

Advert-Rotator™ Rotate any type of ad, advert or banner - Welcome
NEW : Google Adsense™ in AJAX Updatepanel - Rotate any type of advertisement on your website. Whether it is Google Adsense™, Flash video or banner, ...

dotnet HighCharts inside UpdatePanel
Read my article about the databind? A frequently question regards the possibility to get functioning a dotnet.HighCharts chart ...

Blog Archive
Blog Archive 2013 75 Essential Tools for iOS Developers Aug 15 2013 posted in iOS Speaking at Cocoa Conf PDX Jul 13 2013 posted in Speaking In ...

ASP.NET AJAX and jQuery Presentation
... the following demo Visual Studio 2008 projects: ASP.NET AJAX and jQuery Demo Illustrates how to use ASP.NET AJAX (ScriptManager, UpdatePanel, ...

Latest Updates
Latest Updates - Free source code and tutorials for Software developers and Architects.; Updated: 15 Feb 2013

New Release of WatirMaker now WatirRecorder
Rutger Smit & Scott Hanselman have released a new version of WatirMaker, now retitled WatirRecorder. This is a great program for building UI ...

Work smarter: MS AJAX’s JavaScript type extensions
Examples of using Array.contains, Date.format, String.format, and other base type extensions to accelerate ASP.NET AJAX client side development. ...

Resources last updated: 1/2/2016 6:55:05 AM