Jump to content
ravi_k

progress bar value

Recommended Posts

Hi

I have a below code, which shows a progress  bar.

default it shows as 22. 

but when i receive the data from server , the progress bar data should be changed.

 <div>
<button onclick="Sensor()">Sensor</button>
<progress id="myProgress" value="22" min="0"max="100"> </progress>
</div>

<script>
function Sensor() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {

          document.getElementById("myProgress").value =
this.responseText;
        }
      };
    xhttp.open("GET", "sensor", true);
    xhttp.send();
    }
    </script>

Thanks with

Regards

Ravi 

Share this post


Link to post
Share on other sites

It may be that the call to your progress display is only called when the AJAX call has been completed.

After it received the completed data access, the function is not called upon again.

Share this post


Link to post
Share on other sites

Hi

Whether the calling of 

          document.getElementById("myProgress").value =this.responseText;

is proper or not?

May be its not receiving the value properly.

 

Thanks with

Regards

Ravi 

Share this post


Link to post
Share on other sites

If it is called, then the progress bar value will be changed in any case as long as a appropriate value is returned, it does not need to do a second calling of function to update.  What is it returning? that's the first thing to check. If it returns anything other than a number then that's your problem.

Share this post


Link to post
Share on other sites

Hi

I am not receiving any value.

To check if am getting any value , i am just getting a value and try to print it in a text box 

But nothing prints.

I think some issue is there

<p id ="sensor_progress"></p>
 <div>
<button onclick="Sensor()">Sensor</button> &emsp;&emsp;&nbsp;&nbsp;
<progress id="myProgress" value="22" max="100"> </progress>
<input type="text" id="sensor_progress" size ="7"style="border: 2px solid
black;font-size:20pt;" disabled>
   
   <script>
     function Sensor() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {

          document.getElementById("myProgress").value =this.responseText;
          document.getElementById("sensor_progress").value = this.responseText; 
        }
      };
    xhttp.open("GET", "sensor.txt", true);
    xhttp.send();
    }
     </script>

Thanks with

Regards

Ravi 

Share this post


Link to post
Share on other sites

It nothing to do with the code, your board/server is supposed to return a value, your code can only send a request for data to be return that will represent a value as 'this.responseText' that will be used to update the progress bar. The progress code will do its job, when the board/server does its job. Again! Normally sensor.txt would be a link to server script that will process and return html content or just a string value which this.responseText will hold that data to be used to update the progress bar. So again! its not html/JavaScript code, its the board/server not acting like a server would, sort it form the boards forum not here.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×