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);
?>