JQuery Progress Bar and ASP.net

JQuery Progress Bar and ASP.net

I am using making application asp.net 2.0. In my page there is Data List which is having two buttons. When user click on the button it is doing some process and taking some time. Due to that user some time click twice and it will make problem in application. So to stop that I wanted to show progress bar until button click process done.

I am using following code 

ASPX Page Code


  1. <script language="javascript" src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
  2. <script language="javascript" src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
  3. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  4.  
  6. <script type="text/javascript">
  7.       $(document).ready(function() {
  8.             $("#progressbar").progressbar({ value: 0 });
  9.             $("#addtocart").click(function() {
  10.                 var intervalID = setInterval(updateProgress, 250);
  11.                 $.ajax({
  12.                     type: "POST",
  13.                     url: "AutoComplete.asmx/GetText",
  14.                     data: "{}",
  15.                     contentType: "application/json; charset=utf-8",
  16.                     dataType: "json",
  17.                     async: true,
  18.                     success: function(msg) {
  19.                         $("#progressbar").progressbar("value", 100);
  20.                         $("#result").text(msg.d);                        
  21.                         clearInterval(intervalID);
  22.                     }
  23.                 });
  24.                 return false;
  25.             });
  26.         });

  28.         function updateProgress() {            
  29.             var value = $("#progressbar").progressbar("option", "value");
  30.             if (value < 100) {
  31.                 $("#progressbar").progressbar("value", value + 1);                
  32.             }
  33.         }        
  34.  </script>

  36. <div id="progressbar"></div> 
  37. <div id="result"></div>

Above code is not working may be as datalist is making different name to the control at runtime. Next thing may be I am missing something.

I also want to change the look of the progress bar. Also want to write some text on it like adding ...

How can I do that.