Knob circular progress bar with ajax

Question

I am trying to use Knob with AJAX, and it is working, but the progress bar is not changing, only the number inside real time.

You can check it here: www.skincannon.com

The code is: HTML:

<input id="val" type="text" value="0" /> <input type="button" value="Change" /> 

AJAX:

$.ajax({
    type: "GET",
    url: "currentitemswidth.php",
    success: function(msg){
        $('#val').val(msg);
    }
});

And I am changing the value with ajax, but the bar won't change.

Anybody could help me? If you need further codes just tell me.

I need something like this, but I would like to change it automatically, not by hitting the Change button: http://www.jqueryajaxphp.com/dynamically-animate-jquery-knob/

Thanks

Answer 1

Here i have achieved your requirement with jQuery roundSlider plugin.. I think this is suitable for you, since you can easily customize the appearance and animation style of this slider.. Check the below demo:

Demo

For more details check the demos and documentation page.

Edit:

In the ajax success what value you got, you can assign that value to the slider. Like below:

$.ajax({
    type: "GET",
    url: "currentitemswidth.php",
    success: function(msg){
        $('#val').val(msg);

        // use the below code to dynamically update the roundSlider value
        $("#slider").roundSlider("option", "value", msg);
    }
});