I have a JQuery Mobile Slider which I want to load into an HTML Widget and then use in an AJAX style way to get data to and from the server. I have setup the widget with the following code:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.js"></script>
<script language="javascript">
$(document).ready(function(){
$(".ui-slider").on('change', function(event) {
var valuenow = $(this).find(".ui-slider-handle").attr("aria-valuenow");
console.log(valuenow);
});
$( "#slider-1").on('slidestop', function( event ) {
var slider_value=$("#slider-1").slider().val();
alert('Value: '+slider_value);
$.getJSON("/show_submit", { "value":slider_value }, function( data ){
console.log(data);
});
});
});
</script>
<input type="range" name="slider" orient="vertical" id="slider-1" value="0" min="0" max="100" />
This works but what I don’t understand is why I need to reference JQuery and create my callback scripts in the HTML Widget. Why does it not work when I load the JQuery links or run the script from the file head? Is there some other place I can put this JQuery initialization where it can be re-used?