progress bar value

[ravi_k]

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 

[JMRKER]

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.

[ravi_k]

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 

[dsonesuk]

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.

[ravi_k]

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 

[dsonesuk]

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.