Ручка круговая прогресс-бар с Аяксом

Question

Я пытаюсь использовать Knob с AJAX, и он работает, но индикатор выполнения не меняется, только число внутри реального времени.

Вы можете проверить это здесь: www.skincannon.com

Код: 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);
    }
});

И я изменяю значение с помощью ajax, но планка не изменится.

Кто-нибудь может мне помочь? Если вам нужны дополнительные коды, просто скажите мне.

Мне нужно что-то вроде этого, но я хотел бы изменить это автоматически, не нажимая кнопку Изменить: http://www.jqueryajaxphp.com/dynamically-animate-jquery-knob/

Спасибо

Answer 1

Здесь я выполнил ваше требование с помощью плагина jQuery roundSlider. Я думаю, что он подходит вам, так как вы можете легко настроить внешний вид и стиль анимации этого слайдера. Проверьте демонстрацию ниже:

Demo

Для более подробной информации посетите страницу с демонстрациями и документацией.

Редактировать:

В случае успеха Ajax, какое значение вы получили, вы можете присвоить это значение ползунку. Как ниже:

$.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);
    }
});