How to Display Loading Image with AJAX-Auto Complete

After long time I had a chance to update my Blog.

In this post I’m going to show you how to display data fetching progress with AJAX Auto Complete extender.

image

This is very simple.

  1. Add ASP Text box to the page (ID=TextBox1)
  2. Add AJAX AutoCompleteExtender
  3. Insert following javascript code to the web page
    <script type="text/javascript">
        function ShowImage() {
            document.getElementById('TextBox1')
                 .style.backgroundImage = 'url(images/loader.gif)';
     
            document.getElementById('TextBox1')
                               .style.backgroundRepeat = 'no-repeat';
     
            document.getElementById('TextBox1')
                               .style.backgroundPosition = 'right';
        }
        function HideImage() {
            document.getElementById('TextBox1')
                                 .style.backgroundImage = 'none';
        }
    ript>



  4. Set OnClientPopulating=ShowImage and OnClientPopulated=HideImage events of AutoCompleteExtender. Complete markup as below.



    <asp:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"  
        DelimiterCharacters="" Enabled="True" ServicePath="WebService1.asmx" TargetControlID="TextBox1"
        ServiceMethod="GetCompletionList" MinimumPrefixLength="2"
        OnClientPopulating="ShowImage" OnClientPopulated="HideImage"  />

Comments

Popular posts from this blog

IIS 7.5: 401 Unauthorized Access Error (Keep prompting Username/password)

Calculating Elapsed Time Accurately (C#)

Connecting DB2/iSeries From .net Application