PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
S

jquery app onthoudt settings niet

Door Sander Zijnstra op 02-05-2013 22:35 gewijzigd op 02-05-2013 22:38
1.767 views
Ik maak al enige tijd gebruik van een zelf gebouwde (met jullie hulp) apple web app om de verlichting in huis te schakelen. De app is geschreven met jquery. Dit werkt super, het enige nadeel is dat zodra de app afgesloten wordt alle `switches` op null gaan. Ik kan dus niet in de app zien welke lampen aanstaan.

Iemand enig idee hoe dit te verhelpen?


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=utf-8>
    <title>Kaku</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <link rel="stylesheet" href="ios_inspired/styles.css" />
  <link rel="apple-touch-startup-image" href="/apple-touch-startup-image.png">
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
    // all dialog buttons should close their parent dialog
    $(".ui-dialog button").live("click", function() {
      $("[data-role='dialog']").dialog("close");
    });
    $(document).on("mobileinit", function(){
      $.mobile.defaultPageTransition = "slide";
    });
  </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

  </head>
  <body>
    <div data-role="header" data-theme="c" data-position="inline">
    <a href="#" data-rel="back" data-theme="a">Back</a>
      <h1><font color="white">Klik aan Klik uit</font></h1>
      <a href="" class="refresh" data-theme="c">UIT</a>
    </div>

  <div data-role="content">


     <ul data-role="listview" data-inset="true">
      <li style='background: -webkit-linear-gradient(top,  #7e5098 0%,#72448b 50%,#6c3b87 50%,#683385 100%);'>


     <div data-role="header" data-theme="c" data-position="inline">
     <a href="#" data-rel="back" data-theme="a">Back</a>
     <div id="kamerdiv">Woonkamer</div>
     </div>
        </li>
              <li>
       <label for="slider"><font size="4px">Alles uit</font></label><br>
       <select name="slider" id="allesuit" data-role="slider">
        <option value="uit">UIT</option>
        <option value="aan">AAN  </option>
       </select>
      </li>
      <li>
       <label for="slider"><font size="4px">Spots Bank</font></label><br>
        <select name="slider" id="spotsbank" data-role="slider">
          <option value="schakelen.php?kanaal=a3&actie=uit&optie=0">UIT</option>
          <option value="schakelen.php?kanaal=a3&actie=aan&optie=0">AAN</option>
        </select>
      </li>
      <li>
        <label for="slider"><font size="4px">Living Colors</font></label><br>
        <select name="slider" id="living" data-role="slider">
          <option value="schakelen.php?kanaal=a2&actie=uit&optie=0">UIT</option>
          <option value="schakelen.php?kanaal=a2&actie=aan&optie=0">AAN</option>
        </select>
      </li>
     <li>
        <label for="slider"><font size="4px">Open haard</font></label><br>
        <select name="slider" id="haard" data-role="slider">
          <option value="schakelen.php?kanaal=b2&actie=uit&optie=0">UIT</option>
          <option value="schakelen.php?kanaal=b2&actie=aan&optie=0">AAN</option>
        </select>
      </li>
      <li>
   <label for="slider"><font size="4px">Dimbare spot</font></label><br>
   <label for="select-choice-1" class="select"></label>
   <select name="formal" id="plafondspot" onchange="javascript:handleSelect(this);">
      <option value="schakelen.php?kanaal=100&actie=uit&optie=0;" >Uit</option>
      <option value="schakelen.php?kanaal=100&actie=8&optie=0;">Sfeervol</option>
      <option value="schakelen.php?kanaal=100&actie=2&optie=0">Film</option>
      <option value="schakelen.php?kanaal=100&actie=4&optie=0">Gamen</option>
      <option value="schakelen.php?kanaal=100&actie=16&optie=0">Schoonmaken</option>
      <option value="schakelen.php?kanaal=100&actie=12&optie=0">Ochtend</option>
   </select>
      </li>
    </ul>

    <ul data-role="listview" data-inset="true">
      <li style='background: -webkit-linear-gradient(top,  #7e5098 0%,#72448b 50%,#6c3b87 50%,#683385 100%);'>
        <h1><font color="white">Keuken</font></h1>
        </li>
      <li>
        <label for="slider"><font size="4px">Plafondspot</font></label><br>
        <select name="slider" id="plafondspot" data-role="slider">
          <option value="schakelen.php?kanaal=a4&actie=uit&optie=0">UIT</option>
          <option value="schakelen.php?kanaal=a4&actie=aan&optie=0">AAN</option>
        </select>
      </li>
      <li>
        <label for="slider"><font size="4px">Led koffiehoek</font></label><br>
        <select name="slider" id="led" data-role="slider">
          <option value="schakelen.php?kanaal=b1&actie=uit&optie=0">UIT</option>
          <option value="schakelen.php?kanaal=b1&actie=aan&optie=0">AAN</option>
        </select>
      </li>
    </ul>

        <ul data-role="listview" data-inset="true">
      <li style='background: -webkit-linear-gradient(top,  #7e5098 0%,#72448b 50%,#6c3b87 50%,#683385 100%);'>
        <h1><font color="white">Tuin</font></h1>
        </li>
      <li>
        <label for="slider"><font size="4px">Spots potten</font></label><br>
        <select name="slider" id="potten" data-role="slider">
          <option value="schakelen.php?kanaal=a13&actie=uit&optie=0">UIT</option>
          <option value="schakelen.php?kanaal=a13&actie=aan&optie=0">AAN</option>
        </select>
      </li>
      <li>
       <label for="slider"><font size="4px">Spots houtkast</font></label><br>
       <select name="slider" id="houtkast" data-role="slider">
        <option value="uit">UIT</option>
        <option value="aan">AAN  </option>
       </select>
      </li>
      <li>
        <label for="slider"><font size="4px">Spots boom</font></label><br>
        <select name="slider" id="boom" data-role="slider">
          <option value="schakelen.php?kanaal=a15&actie=uit&optie=0">UIT</option>
          <option value="schakelen.php?kanaal=a15&actie=aan&optie=0">AAN</option>
        </select>
      </li>
      <li>
        <label for="slider"><font size="4px">Stopcontact</font></label><br>
        <select name="slider" id="stopcontact" data-role="slider">
          <option value="schakelen.php?kanaal=a14&actie=uit&optie=0">UIT</option>
          <option value="schakelen.php?kanaal=a14&actie=aan&optie=0">AAN</option>
        </select>
      </li>
       </ul>



        </div><!-- /ui-body wrapper -->
</div><!-- /page -->

    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script>


      $(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
  $('#houtkast').change(function(e) { // wanneer de gebruiker de select verandert, doen we dit:
    // Ajax aanroepen
    var aan_uit = $(this).val(); // this is de <select>. .val() haalt de value op
    $.ajax({
    url: 'schakelen.php?kanaal=a9&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });

    $.ajax({
      url: 'schakelen.php?kanaal=a10&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });

    $.ajax({
      url: 'schakelen.php?kanaal=a11&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });
  });
});

      $(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
  $('#allesuit').change(function(e) { // wanneer de gebruiker de select verandert, doen we dit:
    // Ajax aanroepen
    var aan_uit = $(this).val(); // this is de <select>. .val() haalt de value op
    $.ajax({
    url: 'schakelen.php?kanaal=a9&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });

    $.ajax({
      url: 'schakelen.php?kanaal=a10&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });

    $.ajax({
      url: 'schakelen.php?kanaal=a11&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });

    $.ajax({
      url: 'schakelen.php?kanaal=a3&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });

    $.ajax({
      url: 'schakelen.php?kanaal=a2&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });

    $.ajax({
      url: 'schakelen.php?kanaal=100&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });

    $.ajax({
      url: 'schakelen.php?kanaal=a4&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });

    $.ajax({
      url: 'schakelen.php?kanaal=b1&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });

    $.ajax({
      url: 'schakelen.php?kanaal=a14&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });

    $.ajax({
      url: 'schakelen.php?kanaal=a15&actie=' + aan_uit + '&optie=0',
      success: function(message) {
      }
    });
  });
});

      $(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
        $('#spotsbank, #living, #haard, #plafondspot, #led, #potten, #stopcontact, #boom').change(function(e) { // wanneer de gebruiker de select verandert, doen we dit:
          // Ajax aanroepen
          var url = $(this).val(); // this is de <select>.  .val() haalt de value op
          $.ajax({
            url: url,
            success: function(message) {
            }
          });
        });
      })
</script>


    <style>
.ui-icon-loading {
    opacity: 0;
}
</style>

  </body>
</html>
Frank Nietbelangrijk
03-05-2013 00:33
Sander,

om te schakelen roep je schakelen.php aan. blijkbaar heb je een webserver draaien op een pc in huis die tevens in staat is om de verlichting te schakelen. dit php bestand is eigenlijk vrij simpel uit te breiden zodat ie ook de status van de verlichting gaat doorgeven.

Je moet goed onthouden dat javascript (jquery is javascript) in de browser of app draait en dat php op de webserver draait. die webserver is beter in staat om gegevens op te slaan en uit te lezen dan een app die in een compleet beveiligde omgeving (de browser) draait.

Bovendien als je dit met php oplost dan maakt het niet uit met welke iphone/tablet/pc je wil schakelen, immers de server weet welke lamp aan of uit is.

Mocht je het toch persé binnen je app willen oplossen dan zou je eens kunnen googlen op cookies met javascript. Maar een aanrader is het niet.
S Sander Zijnstra
03-05-2013 23:27
Tuurlijk! Logisch! Dat ik daar miet aan gedacht heb. Bedankt voor je antwoord. Ik hoop er dit weekend tijd voor te hebben. Zal ongetwijfeld dan nog meer vragen hebben :)
S Sander Zijnstra
06-05-2013 22:12
Zoals verwacht kan ik inderdaad nog wat hulp gebruiken. Als ik me niet vergis moet onderstaand script een begin zijn. Hoe zorg ik ervoor dat dit javascript laat weten wat de status is? En er dus voor zorgt dat de slider bij de desbetreffende id goed staat?


if (isset($_GET['actie']) && $_GET['actie'] === 'aan') {
  echo 'lamp is aan!';
}
else {
  echo 'lamp is uit!';
}

Reageren

Inloggen om te reageren