Error
This content is not currently supported on this browser.
+ Start a Discussion
SidharthSidharth 

Progress bar HTMl button

Hi

 

I have a html button, How can i add actionSupport and ActionStatus PROGRESS BAR functionality in that.

 

<td>
   <input id="btnCreateNewSettlement{!unsettledAccount.Id}" type="button" class="btn" value="Create Settlement" onClick="return usaValidateSettlementInputs('{!unsettledAccount.Id}', '{!clientId}';" /> 
</td>
                        

 

Thanks

Sid

Best Answer chosen by Admin (Salesforce Developers) 
SidharthSidharth

I created the component, containing the Javascript for the progress bar.

 

<apex:component id="progressBar">
<apex:includeScript value="/soap/ajax/21.0/connection.js"/>
<apex:includeScript value="/soap/ajax/21.0/apex.js"/>
    <style>
      .hide { position:absolute; visibility:hidden; }
      .show { position:absolute; visibility:visible; }
    </style>

    <SCRIPT LANGUAGE="JavaScript">
      
      var duration=6 // Specify duration of progress bar in seconds
      var _progressWidth = 100;    // Display width of progress bar.
      
      var _progressBar = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||"
      var _progressEnd = 5;
      var _progressAt = 0;
      

      function ProgressCreate(end) {
          // Initialize state variables
          _progressEnd = end;
          _progressAt = 0;
      
          // Move layer to center of window to show                                   
          
          if (document.all) { // Internet Explorer
              document.getElementById("progress").className = 'show';                        
              document.getElementById("progress").style.left = (document.documentElement.clientWidth/2) - 100+"px";
              document.getElementById("progress").style.top = (document.documentElement.clientHeight/2) - 40+"px";   
          } else if (document.layers) {   // Netscape
              document.progress.visibility = true;
              document.progress.left = (window.innerWidth/2) - 100+"px";
              document.progress.top = pageYOffset+(window.innerHeight/2) - 40+"px";
          } else if (document.getElementById) {   // Netscape 6+
              document.getElementById("progress").className = 'show';
              document.getElementById("progress").style.left = (window.innerWidth/2)- 100+"px";
              document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40+"px";
          }
           
          ProgressUpdate();   // Initialize bar
          
      }
      
      // Hide the progress layer
      function ProgressDestroy() {
          // Move off screen to hide
          if (document.all) { // Internet Explorer
              document.getElementById("progress").className = 'hide';
          } else if (document.layers) {   // Netscape
              document.progress.visibility = false;
          } else if (document.getElementById) {   // Netscape 6+
              document.getElementById("progress").className = 'hide';
          }
      }
      
      // Increment the progress dialog one step
      function ProgressStepIt() {
          _progressAt++;
          if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
          ProgressUpdate();
      }
      
      // Update the progress dialog with the current state
      function ProgressUpdate() {
          var n = (_progressWidth / _progressEnd) * _progressAt;
          if (document.all) { // Internet Explorer
              var bar = document.getElementById("bar")
          } else if (document.layers) {   // Netscape
              var bar = document.layers["progress"].document.forms["dialog"].bar;
              n = n * 0.55;   // characters are larger
          } else if (document.getElementById){
              var bar=document.getElementById("bar")
          }
          var temp = _progressBar.substring(0, n);
          bar.value = temp;
      }
      
      // Demonstrate a use of the progress dialog.
      function Demo() {
          ProgressCreate(10);
          window.setTimeout("Click()", 100);
      }
      
      function Click() {
          if(_progressAt >= _progressEnd) {
              ProgressDestroy();
              return;
          }
          ProgressStepIt();
          window.setTimeout("Click()", (duration-1)*1000/10);
      }
      
      function CallJS(jsStr) { //v2.0
        return eval(jsStr)
      }
      
      function Update123(clientId){
        alert('enter 1');
        alert(clientId);
        sforce.apex.execute("webService_UpdateDailyForecast","updateDailyForecastForClient", {clientId:clientId});
        alert('enter 2');
     }
      
      
      
   </script>
      
   <SCRIPT LANGUAGE="JavaScript">
      
      // Create layer for progress dialog
      document.write("<span id=\"progress\" class=\"hide\">");
          document.write("<FORM name=dialog id=dialog>");
          document.write("<TABLE border=2  bgcolor=\"#FFFFCC\">");
          document.write("<TR><TD ALIGN=\"center\">");
          document.write("Processing....<BR>");
          document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\"");
          if(document.all||document.getElementById)   // Microsoft, NS6
              document.write(" bar.style=\"color:navy;\">");
          else    // Netscape
              document.write(">");
          document.write("</TD></TR>");
          document.write("</TABLE>");
          document.write("</FORM>");
      document.write("</span>");
      ProgressDestroy();  // Hides
      
   </script>
</apex:component>
                    

 

Place "

CallJS('Demo()');

"inside your Page/Component to show the progress bar