Ben ondertussen volledig opnieuw begonnen en deze keer zonder een Framework. Dus echt html/javascript/jquery Mobile/php.
Alles lijkt goed te werken uitgezonderd mijn Jquery Mobile Slider. Bij het wijzigen van de slider moet de waarde via een POST methode gestuurd worden naar een PHP pagina, die op zijn beurt die waarde wegschrijft in een .txt file.
Als ik dit test met deze code werkt het perfect:
Code: Selecteer alles
<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>
Als ik echter 2 bijkomende Jquery Mobile pages aan mijn code toevoeg (pagina Home en pagina Rolluik) dan werkt het plots niet meer:
Code: Selecteer alles
<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>
Iemand die op het eerste zicht iets fout ziet? In Apache zijn geen fouten terug te vinden. Wat ik wel zie aan de hand van Firebug is dat de POST methode bij het wijzigen van de slider niet uitgevoerd wordt, terwijl als ik op de Aan / Uit knop druk van de rolluiken ik de POST wel zie verschijnen in Firebug. Ik zit dus compleet vast
. Heb ook al gecheckt als al mijn <div>'s gesloten zijn, en voor zover ik kon zijn zag dit er ook goed uit.
Om het wat visueler voor te stellen heb ik een Fiddle gemaakt waarbij je kan zien wat er net gebeurt:
http://jsfiddle.net/Argon007/JUZM9/