How to change knob value dynamically in jquery..?

Asked 17/9, 2014 at 9:45 Answered 21/11, 2016 at 9:43

I have applied a jquery knob with readonly feature as follows :

<style>
.test{
    background: #292929;
    margin:50px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<body>

<input type="text" value="45%" class="dial"><button id="change">Change</button>
</body>
<script>
$(".dial").knob({
    readOnly: true,
    fgColor: "#00ABC6",
    bgColor: "#666666",
    thickness: 0.2
                });

$(document.body).on('click', 'button#change', function(){
    $("input.dial").val('80%');
    })
</script>

Now when i click on change button it only changes the value of input tag but failed to change the percentage on knob filled area.

Reprobation answered 17/9, 2014 at 9:45 Comment(0)

Just trigger an change event on the input after setting the value for it like :

$("input.dial").trigger('change');

Your code will look like :

<style>
.test{
    background: #292929;
    margin:50px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<body>

<input type="text" value="45%" class="dial"><button id="change">Change</button>
</body>
<script>
$(".dial").knob({
    readOnly: true,
    fgColor: "#00ABC6",
    bgColor: "#666666",
    thickness: 0.2
                });

$(document.body).on('click', 'button#change', function(){
    $("input.dial").val('80%');
    $("input.dial").trigger('change');
    })
</script>

Reprobation answered 17/9, 2014 at 9:45 Comment(0)

You can use the change or input trigger from Jquery:

// on line to change 
$('.dial').val(27).trigger('change');

// or
$('.dial').val(27).trigger('input');

Clevelandclevenger answered 21/11, 2016 at 9:43 Comment(0)

Recommended topics

Hot tags