Value in jquery knob not displaying

Question

I am using jquery knob in my project to set value of some parameter. However, I am not able to see the input value in the center of the jquery knob. I tried it in jsfiddle and it works, but the exact same thing does not work if I use it in my code. I am not sure where am I going wrong ? Can anyone please advice ??

jsFiddle link: http://jsfiddle.net/pljsf/RJY3N/

HTML:

<script src='https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js'></script>

<input type="text" value="55" class="dial">

JavaScript below:

$('document').ready(function() {

var dialColor = 'blue';  
var dialValue = $('.dial').val() ;

$(".dial").knob({
            'width':"200",
            'height':"200",
            'min' : "50",
            'max' : "110",
            'thickness':.3,
            'fgColor':dialColor,
            'tickColorizeValues': true,
            'dynamicDraw': true,
            'displayInput': true,
            "skin":"tron",
            'inputColor' : "#ff0000",  
            //'change' : function(dialValue) {  $('.dial').val(dialValue);  }            
            });
  $('.dial').val(dialValue).trigger('change');

});                                                                                          

(None of the solutions I searched, worked for me. :( )

Thanks

Answer 1

The problem is your knobjs inclusion, you are including it from github directly and the browser rejects it, because its mime type is different. try including from another source and it will work just fine . Never include JS from github directly in your page. github is not a CDN.