Menu
Hello,
I made a Jquery Mobile page with a slider and a bit of Javascript. This functions like it should.
[CODE]
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css”>
<script src=”http://code.jquery.com/jquery-1.10.2.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js”></script>
<script>
$(document).ready(function() {
$(“#tempslider”).on(“slidestop”, function() {
var graden = $(this).val();
$.ajax({
type: ‘POST’,
url: ‘text.php’,
data: {
‘graden’: graden
},
});
});
});
</script>
</head>
<body>
<div data-role=”page” id=”thermostaat”>
<div data-role=”header”>
<h1>Thermostaat</h1>
</div>
<div data-role=”main”>
<form>
<label for=”tempslider”>Temperatuur instellen op:</label>
<input data-highlight=”true” data-popup-enabled=”true”
data-show-value=”true” id=”tempslider” max=”24″ min=”15″ name=”tempslider” step=”0.5″ type=”range” value=”<?php $onoff = file_get_contents(‘/var/www/thermostaat.txt’); echo $onoff; ?>”>
</form>
</div>
<div data-role=”footer”>
<h1>Footer</h1>
</div>
</div>
</body>
</html>
But when I add my other 2 Jquery Mobile pages, it stops working. This is my final code:
[CODE]
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css”>
<script src=”http://code.jquery.com/jquery-1.10.2.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js”></script>
<script>
$(document).ready(function() {
$(“#ledwhite”).change(function () {
var isChecked = $(“#ledwhite”).is(“:checked”) ? 1 : 0;
if (isChecked) {
$.ajax({
url: ‘rolluiken/white_on.php’,
type: ‘POST’,
});
} else {
$.ajax({
url: ‘rolluiken/white_off.php’,
type: ‘POST’,
});
}
});
$(“#ledred”).change(function () {
var isChecked = $(“#ledred”).is(“:checked”) ? 1 : 0;
if (isChecked) {
$.ajax({
url: ‘rolluiken/red_on.php’,
type: ‘POST’,
});
} else {
$.ajax({
url: ‘rolluiken/red_off.php’,
type: ‘POST’,
});
}
});
$(“#tempslider”).on(“slidestop”, function() {
var graden = $(this).val();
$.ajax({
type: ‘POST’,
url: ‘text.php’,
data: {
‘graden’: graden
},
});
});
});
</script>
</head>
<body>
<div data-role=”page” id=”home”>
<div data-role=”header”>
<h1>Home</h1>
</div>
<div data-role=”main”>
<a data-role=”button” href=”#rolluik” id=”buttonrolluik”>Rolluik</a>
<a data-role=”button” href=”#thermostaat” id=”buttonthermostaat”>Thermostaat</a>
</div>
<div data-role=”footer”>
<h1>Footer</h1>
</div>
</div>
<div data-role=”page” id=”rolluik”>
<div data-role=”header”>
<h1>Rolluiken</h1>
</div>
<div data-role=”main”>
<form>
<div>
<div class=”ui-field-contain”>
<label for=”swhitechwhite”>white LED Control</label>
<input data-role=”flipswitch” id=”ledwhite” name=”switchwhite” type=”checkbox”>
</div>
<div class=”ui-field-contain”>
<label for=”swhitechred”>red LED Control</label>
<input data-role=”flipswitch” id=”ledred” name=”switchred” type=”checkbox”>
</form>
</div>
<div data-role=”footer”>
<h1>Footer</h1>
</div>
</div>
</div>
</div>
<div data-role=”page” id=”thermostaat”>
<div data-role=”header”>
<h1>Thermostaat</h1>
</div>
<div data-role=”main”>
<form>
<label for=”tempslider”>Temperatuur instellen op:</label>
<input data-highlight=”true” data-popup-enabled=”true”
data-show-value=”true” id=”tempslider” max=”24″ min=”15″ name=”tempslider” step=”0.5″ type=”range” value=”<?php $onoff = file_get_contents(‘/var/www/thermostaat.txt’); echo $onoff; ?>”>
</form>
</div>
<div data-role=”footer”>
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Anyone can give me a hint? I already checked if there are unclosed <div> ‘s but I didn’t found anything. In the Apache logs are no errors.
So, I think there must be a problem with the #rolluik page or the #home page, but I don’t find anything
FYI this is my text.php code, but this thing works fine:
[CODE]
<?php
$myFile = “thermostaat.txt”;
$fh = fopen($myFile, ‘w’) or die(“can’t open file”);
$stringData = $_POST[‘graden’];
fwrite($fh, $stringData);
fclose($fh);
?>