jquery app onthoudt settings niet

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Sander Zijnstra

Sander Zijnstra

02/05/2013 22:35:02
Quote Anchor link
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?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!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>
Gewijzigd op 02/05/2013 22:38:01 door Sander Zijnstra
 
PHP hulp

PHP hulp

03/05/2024 10:30:18
 
Frank Nietbelangrijk

Frank Nietbelangrijk

03/05/2013 00:33:36
Quote Anchor link
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.
 
Sander Zijnstra

Sander Zijnstra

03/05/2013 23:27:55
Quote Anchor link
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 :)
 
Sander Zijnstra

Sander Zijnstra

06/05/2013 22:12:26
Quote Anchor link
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?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
if (isset($_GET['actie']) && $_GET['actie'] === 'aan') {
  echo 'lamp is aan!';
}
else {
  echo 'lamp is uit!';
}
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.