jquery : cannot update progressbar

Question

I have a Websocket server that sends datas from 1 to 1024.

Using JQuery, I am trying to set a progress bar that shows the actual value received. It does not work...

Here is my code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
    "use strict";
    // Initialize everything when the window finishes loading
    window.addEventListener("load", function(event) {
      var message = document.getElementById("message");
      var socket;

        // Create a new connection to websocket server
        socket = new WebSocket("ws://xx.xx.xx.xx:8080", "echo-protocol");

        // Display messages received from the server
        socket.addEventListener("message", function(event) {
          $("#progressbar").progressbar("option", "value", event.data);
          message.textContent = event.data;
        });
    });
  </script>
  <script>
$(document).ready(function() {
  $( "#progressbar" ).progressbar({
      min: 1,
      max: 1024
    });
    $("#progressbar").progressbar("option", "value", event.data);
});
</script>
</head>

<body>
<div id="data">
<div id="progressbar"></div>
<div id="message"></div>
</div>
</div>

The fact is that #message div displays values with no problems, but i am not able to update the JQuery progressbar... Any idea would be welcome...

What's inside `event.data` when you try to update? And why you initialize it with `event.data`. It isn't defined there, isn't it? — algorhythm, Jun 25 '14 at 21:39
Interesting comment : `event.data` is equal to data send from ws (as shown by `message.textContent = event.data;` in `#message`. Event.data is not defined but updates successfully `#message` — user2196728, Jun 25 '14 at 21:49
I never used jQuery UI progressbar till now, but maybe you have to convert your data to `int` like you set it with `min` and `max`. Try `parseInt(event.data, 10);` and make a `console.log(event.data);` before to verify the value. — algorhythm, Jun 25 '14 at 21:52
`parseInt(event.data, 10);` seems to work. Can you explain further and write an answer ? i will aprove — user2196728, Jun 25 '14 at 21:56

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

I think your event.data value is of type string e.g. '157' and not a number like e.g. 157. To find it out try:

console.log(typeof event.data); // => string

To parse it to type numberyou have to use parseInt. parseInt has two parameters, first one is the value to parse and second one with value 10 is "to make sure the string is interpreted as base 10 (decimal)." For more Information read also this: Javascript parseInt gives very unexpected results

var intValue = parseInt(event.data, 10);
console.log(typeof intValue); // => number

Documentation for parseInt's parameters: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

To make your code even better you can also check if the value is between min and max. I mean between your defined bounds 0 (option min is not in documentation) and 1024 like so:

var min = 0;
var max = $("#progressbar").progressbar("option", "max");

if (intValue >= min && intValue <= max) {
    $("#progressbar").progressbar("option", "value", intValue);
}

edited May 23 '17 at 12:20

Community

1
1

answered Jun 25 '14 at 22:03

algorhythm

8,530
3
35
47

You are a master, you saved my day. I really love this site and people with real skills here. Thanks a lot man. – user2196728 Jun 25 '14 at 22:12
Not a problem ;) But mention, that `option`is not defined for the progressbar, it's always `0`. See here: http://api.jqueryui.com/progressbar/ – algorhythm Jun 25 '14 at 22:13
Sorry, I made a mistake. Not `option`, I meant option `min`... It's not defined for progress bar. Only `max` can be set. – algorhythm Jun 25 '14 at 22:32
So now i agree ! i will update my code according to this and according to your advices. Thanks again – user2196728 Jun 25 '14 at 22:39

jquery : cannot update progressbar

1 Answers1