In a PhoneGap app, I navigate to a html page via the $.mobile.changePage() function.
The target page contains a slider input element.
I want to compute the selected value after a change of the slider, but I cant figure out how to receive the events.
I looked up the samples of the jQM demo page, but it's not working.
Here is the code of the target page containing the slider element:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="../cordova/cordova-2.7.0-android.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
//WRONG RECEIVING SCRIPT?
<script type="text/javascript">
$("#volume-slider").on("stop", function (event) {
var value = event.target.value;
alert("User has finished sliding my slider, final value: " + value);
});
</script>
</head>
<body>
<div id="homeContainer" data-role="page">
<div data-role="content">
<label for="slider-fill">Lautstärke:</label>
<input id="volume-slider" type="range" name="slider-fill" value="50" min="0" max="100" data-highlight="true" />
</div>
</div>
</body>
</html>
Could it be that I have to place the receiving script somwhere else? Because it seems not to be executed.
Thank you, Max
You have several errors in your code:
Working example: http://jsfiddle.net/Gajotres/JCdGA/
slidestopis a correct event to detect end of slider movement.HTMLpage format and if this page is not an initialHTMLthis javascript will be discarded. WhenjQuery Mobileloads newHTMLpages it loads onlyBODYcontent and discards the rest. Read more here.