[FRAGE] setInterval und JavaScript nach aus- und einschalten (IOS)

dieterwo · 29. Okt. 2014

Hi,

ich habe mir eine Webseite für mein IPhone geschrieben, um mit dem Handy Daten von meinem PC abrufen zu lassen.
Als Webserver läuft XAMPP.
Die Daten rufe ich über Ajax in einem JavaScript ab. Dieses Script wird mit setInterval immer wieder aufgerufen um die Daten zu aktualisieren. Funktioniert auch bestens, bis ich das Telefon aus- und wieder einschalten. Also nicht komplett runterfahre, sondern nur über die Taste oben oder wenn es in den Ruhemodus geht.
Wenn ich dann wieder reingehe, ist die Webseite noch aktiv, also wird angezeigt. Allerdings wird die mit setInterval eingestellte Funktion nicht mehr aufgerufen. Weiterhin kann ich über den Backbutton aus JQueryMobile nicht mehr zurück auf die Ursprungspage.

Ist das normal? Oder kann man das irgendwie umgehen? So dass wenn das Telefon reaktiviert wird, die Scripte wieder gestartet werden?

Gruß
Dieter

PS: Ist meine erste Mobile Webapp mit JQuery, daher habe ich noch keine große Erfahrung.

kkapsner · 30. Okt. 2014

Zeig' doch mal deinen Code.

dieterwo · 31. Okt. 2014

Okay,

hier mal meine HTML-Seite:

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--den Browser unterdrücken, Aussehen wie eine Web App-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link href="apple-touch-startup-image-320x460.png"
           media="(device-width: 320px) and (device-height: 480px)
           and (-webkit-device-pixel-ratio: 1)"
           rel="apple-touch-startup-image">
    <!-- iPhone (Retina) -->
    <meta name="viewport" content="
        width = 320,  <!-- Die Seite soll auf 1100 Pixel skaliert werden -->
        user-scalable = no,  <!-- Darf der User zoomen? yes/no -->
        initial-scale = 0.4,  <!-- Minimaler Skalierungsfaktor -->
        maximum-scale = 1 <!-- Maximaler Skalierungsfaktor. Hier 100% = scharfe Pixeldarstellung -->
    " />
    <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone-retina-display.png" />
    <title>OurHouse 1.0</title>
    <meta name="apple-mobile-web-app-title" content="OurHouse 1.0">
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/jquery.mobile-1.4.4.js"></script>
    <link href="css/jquery.mobile-1.4.4.css" rel="stylesheet" />
    <link href="css/StyleSheet1.css" rel="stylesheet" />
    <script type="text/javascript">
        function updateDataHeizung() {
            $.ajax({
                url: "updatedataheizung.php",
                type: "POST",
                success: function (data) {
                    var response = $.parseJSON(data);
                    document.getElementById('IdPuffer').innerHTML = response.puffer;
                    document.getElementById('IdPufferoben').innerHTML = response.pufferoben;
                    document.getElementById('IdPuffermitte').innerHTML = response.puffermitte;
                    document.getElementById('IdPufferunten').innerHTML = response.pufferunten;
                    document.getElementById('IdKessel').innerHTML = response.kessel;
                    document.getElementById('IdKesseltemp').innerHTML = response.kesseltemp;
                    document.getElementById('IdAbgastemp').innerHTML = response.abgastemp;
                    document.getElementById('IdRcklauftemp').innerHTML = response.rcklauftemp;
                    document.getElementById('IdPumpe1').innerHTML = response.pumpe1;
                    document.getElementById('IdPumpe2').innerHTML = response.pumpe2;
                    document.getElementById('IdPufferpumpe').innerHTML = response.pufferpumpe;
                    document.getElementById('IdTuer').innerHTML = response.tuer;
                    document.getElementById('IdKesseltempwaechter').innerHTML = response.kesseltempwaechter;
                    document.getElementById('IdStellmotorobenist').innerHTML = response.stellmotorobenist;
                    document.getElementById('IdStellmotorobensoll').innerHTML = response.stellmotorobensoll;
                    document.getElementById('IdStellmotoruntenist').innerHTML = response.stellmotoruntenist;
                    document.getElementById('IdStellmotoruntensoll').innerHTML = response.stellmotoruntensoll;
                    document.getElementById('IdGeblaese').innerHTML = response.geblaese;
                    document.getElementById('IdRestsauerstoff').innerHTML = response.restsauerstoff;
                    document.getElementById('IdBoardtemp').innerHTML = response.boardtemp;
                    if (response.kessel == "aus") {
                        $('#badge-heizung').html("!").fadeOut();
                    } else {
                        $('#badge-heizung').html("!").fadeIn();
                    }
                }
            });
        }
        updateDataHeizung();
        setInterval(updateDataHeizung, 5000);
    </script>
    <script type="text/javascript">
       /* Hier soll eine Funktion rein, die auf das Swipe-Down reagiert. 
           Funktioniert aber noch nicht */
        jQuery(window).on("swipe", function (event) {
            updateDataHeizung();
        })
    </script>
</head>
<body>
    <!--MainPage - Haupt-Übersichtseite-->
    <div data-role="page" id="MainPage" class="ui-page-theme-b" data-title="Home">
        <div data-role="header" data-position="fixed">
            <h1>   OurHouse 1.0</h1>
        </div>
        <div data-role="content">
            <div class="ui-grid-a">
                <div class="ui-block-a"><a href="#heizung" class="ui-btn ui-corner-all ui-icon-heizung-b ui-btn-icon-left" data-transition="flow">Heizung<span id="badge-heizung" class="badge"></span></a></div>
                <div class="ui-block-b"><a href="#temperatur" class="ui-btn ui-corner-all ui-icon-temperatur-b ui-btn-icon-left" data-transition="flow">Temp.<span id="badge-temperatur" class="badge"></span></a></div>
            </div>
            <div class="ui-grid-a">
                <div class="ui-block-a"><input type="button" value="Licht" data-icon="licht-b" /></div>
                <div class="ui-block-b"><input type="button" value="Räume" data-icon="raeume-b" /></div>
            </div>
            <div class="ui-grid-a">
                <div class="ui-block-a"><input type="button" value="Außen" data-icon="aussen-b" /></div>
                <div class="ui-block-b"><input type="button" value="Türen" data-icon="tueren-b" /></div>
            </div>
        </div>
        <div data-role="footer" data-position="fixed">

        </div>
        <!--Ende MailPage-->
    </div>
    <!--heizung - Darstellung der Holzheizung-->
    <div data-role="page" id="heizung" class="ui-page-theme-b" data-title="Heizung">
        <div data-role="header" data-add-back-btn="True" data-position="fixed">
            <h1>   MyHouse 1.0</h1>
            <a href="#heizung" data-icon="refresh" data-theme="b" class="ui-btn-right">Refresh</a> 
<!--Hier soll das Script "updatedataheizung.php" aufgerufen werden. Ist aber noch nicht implementiert.
      Zur Zeit nur als Button ohne Sinn. -->
        </div>
        <div data-role="content">
            <ul data-role="listview" class="ui-listview-outer">
                <li class="custom-li">
                    <!--Das ist notwendig, damit das collapsible in voller Breite angezeigt wird (siehe css)-->
                    <div data-role="collapsible" data-corners="false" data-shadow="false" data-iconpos="right" data-inset="true">
                        <h1>Pufferladung<span id="IdPuffer" class="ui-li-count">n/a</span></h1>
                        <ul data-role="listview" data-corners="false" data-shadow="false" data-theme="a">
                            <li>Puffer Oben<span id="IdPufferoben" class="ui-li-count">n/a</span></li>
                            <li>Puffer Mitte<span id="IdPuffermitte" class="ui-li-count">n/a</span></li>
                            <li>Puffer Unten<span id="IdPufferunten" class="ui-li-count">n/a</span></li>
                        </ul>
                    </div>
                </li>
                <li class="custom-li">
                    <div data-role="collapsible" data-corners="false" data-shadow="false" data-iconpos="right" data-inset="false">
                        <h1>Kessel<span id="IdKessel" class="ui-li-count">n/a</span></h1><!--Aus/Heizt an/Heizt/Übertemperatur-->
                        <ul data-role="listview" data-corners="false" data-shadow="false" data-theme="a">
                            <li>Kesseltemp<span id="IdKesseltemp" class="ui-li-count">n/a</span></li>
                            <li>Abgastemp<span id="IdAbgastemp" class="ui-li-count">n/a</span></li>
                            <li>Rücklauf<span id="IdRcklauftemp" class="ui-li-count">n/a</span></li>
                        </ul>
                    </div>
                </li>
                <li data-corners="false" data-shadow="false" data-iconpos="right">
                    Pumpe 1<span id="IdPumpe1" class="ui-li-count">n/a</span>
                </li>
                <li data-corners="false" data-shadow="false" data-iconpos="right">
                    Pumpe 2<span id="IdPumpe2" class="ui-li-count">n/a</span>
                </li>
                <li data-corners="false" data-shadow="false" data-iconpos="right">
                    Pufferpumpe<span id="IdPufferpumpe" class="ui-li-count">n/a</span>
                </li>
                <li data-corners="false" data-shadow="false" data-iconpos="right">
                    Tür<span id="IdTuer" class="ui-li-count">n/a</span>
                </li>
                <li data-corners="false" data-shadow="false" data-iconpos="right">
                    Kesselübertemperatur<span id="IdKesseltempwaechter" class="ui-li-count">n/a</span>
                </li>
                <li class="custom-li">
                    <div data-role="collapsible" data-corners="false" data-shadow="false" data-iconpos="right" data-inset="false">
                        <h1>Stellmotor Oben<span id="IdStellmotorobenist" class="ui-li-count">n/a</span></h1>
                        <ul data-role="listview" data-corners="false" data-shadow="false" data-theme="a">
                            <li>Sollwert<span id="IdStellmotorobensoll" class="ui-li-count">n/a</span></li>
                        </ul>
                    </div>
                </li>
                <li class="custom-li">
                    <div data-role="collapsible" data-corners="false" data-shadow="false" data-iconpos="right" data-inset="false">
                        <h1>Stellmotor Unten<span id="IdStellmotoruntenist" class="ui-li-count">n/a</span></h1>
                        <ul data-role="listview" data-corners="false" data-shadow="false" data-theme="a">
                            <li>Sollwert<span id="IdStellmotoruntensoll" class="ui-li-count">n/a</span></li>
                        </ul>
                    </div>
                </li>
                <li data-corners="false" data-shadow="false" data-iconpos="right">
                    Gebläse<span id="IdGeblaese" class="ui-li-count">n/a</span>
                </li>
                <li data-corners="false" data-shadow="false" data-iconpos="right">
                    Restsauerstoff<span id="IdRestsauerstoff" class="ui-li-count">n/a</span>
                </li>
                <li data-corners="false" data-shadow="false" data-iconpos="right">
                    Boardtemperatur<span id="IdBoardtemp" class="ui-li-count">n/a</span>
                </li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>Heizung</h1>
        </div>
    </div>
    <!--Ende heizung-->
    <!--Temperaturen-->
    <div data-role="page" id="temperatur" class="ui-page-theme-b" data-title="Heizung">
        <div data-role="header" data-add-back-btn="True" data-position="fixed">
            <h1>   MyHouse 1.0</h1>
            <a href="#temperatur" data-icon="refresh" data-theme="b" class="ui-btn-right">Refresh</a>
        </div>
        <div data-role="content">
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>Temperaturen</h1>
        </div>
    </div>
    <!--Ende Temperaturen-->
</body>
</html>

dazu die PHP:

PHP:

     <?php
       $response = parse_ini_file ('heizung.txt'); 
       print_r(json_encode($response));
     ?>

Wie gesagt, ist meine erste JQuery-Seite und mit Javascript hab ich auch sehr wenig Erfahrung. Als nicht über die Schönheit meckern

Gruß Dieter

j-l-n · 31. Okt. 2014

Zum einen solltest du - wenn es sich dabei nur um Text handelt - .textContent statt .innerHTML verwenden.
Zum anderen lässt sich dieser ganze Wust

dieterwo schrieb:

Code:

        function updateDataHeizung() {
            $.ajax({
                url: "updatedataheizung.php",
                type: "POST",
                success: function (data) {
                    var response = $.parseJSON(data);
                    document.getElementById('IdPuffer').innerHTML = response.puffer;
                    document.getElementById('IdPufferoben').innerHTML = response.pufferoben;
                    document.getElementById('IdPuffermitte').innerHTML = response.puffermitte;
                    document.getElementById('IdPufferunten').innerHTML = response.pufferunten;
                    document.getElementById('IdKessel').innerHTML = response.kessel;
                    document.getElementById('IdKesseltemp').innerHTML = response.kesseltemp;
                    document.getElementById('IdAbgastemp').innerHTML = response.abgastemp;
                    document.getElementById('IdRcklauftemp').innerHTML = response.rcklauftemp;
                    document.getElementById('IdPumpe1').innerHTML = response.pumpe1;
                    document.getElementById('IdPumpe2').innerHTML = response.pumpe2;
                    document.getElementById('IdPufferpumpe').innerHTML = response.pufferpumpe;
                    document.getElementById('IdTuer').innerHTML = response.tuer;
                    document.getElementById('IdKesseltempwaechter').innerHTML = response.kesseltempwaechter;
                    document.getElementById('IdStellmotorobenist').innerHTML = response.stellmotorobenist;
                    document.getElementById('IdStellmotorobensoll').innerHTML = response.stellmotorobensoll;
                    document.getElementById('IdStellmotoruntenist').innerHTML = response.stellmotoruntenist;
                    document.getElementById('IdStellmotoruntensoll').innerHTML = response.stellmotoruntensoll;
                    document.getElementById('IdGeblaese').innerHTML = response.geblaese;
                    document.getElementById('IdRestsauerstoff').innerHTML = response.restsauerstoff;
                    document.getElementById('IdBoardtemp').innerHTML = response.boardtemp;
                    if (response.kessel == "aus") {
                        $('#badge-heizung').html("!").fadeOut();
                    } else {
                        $('#badge-heizung').html("!").fadeIn();
                    }
                }
            });
        }
        updateDataHeizung();
        setInterval(updateDataHeizung, 5000);

leicht abkürzen:

Code:

(function updateDataHeizung(){
  $.ajax({
    url: "updatedataheizung.php",
    type: "POST",
    success: function(data){
      var response, keys;
      response = JSON.parse(data);
      keys = Object.keys(response);
      for(var i = 0; i < keys.length; i++){
        var key, value;
        key = keys[i];
        value = response[key];
        document.getElementById(key).textContent = value;
      }
      if(response.kessel === "aus"){
        $('#badge-heizung').html("!").fadeOut();
      }
      else{
        $('#badge-heizung').html("!").fadeIn();
      }
    }
  });
})();
var update = setInterval(updateDataHeizung, 5000);

Du musst dazu lediglich die ID der jeweiligen Elemente so vergeben, dass sie der Antwort des Servers entspricht. Anstatt dem - sinnfreien? - Präfix id="IdPuffer" also einfach id="puffer".

dieterwo · 31. Okt. 2014

Danke

Sinnfrei, war das alles für mich nicht. Wie gesagt, ich fang grad damit an.

Aber das mit der Schleife leuchtet mir ein.

Aber du hat aus meinem

Code:

        updateDataHeizung();
        setInterval(updateDataHeizung, 5000);

Das hier gemacht.

j-l-n schrieb:
Code:

var update = setInterval(updateDataHeizung, 5000);

Was sicherlich auch gut ist. Aber dazu habe ich gleich 2 Fragen.
1. wird bei dieser Variante die Funktion updateDataHeizung auch direkt einmal ausgeführt? (Da der seperate Aufruf ja von dir entfernt wurde)
2. Ist das die Ursache für mein ursprüngliches Problem?

Gruß
Dieter

j-l-n · 31. Okt. 2014

dieterwo schrieb:
Sinnfrei, war das alles für mich nicht. Wie gesagt, ich fang grad damit an.

Sinnfrei bezog sich darauf, jeder ID das Präfix "Id" zu geben - aber im Grunde kannst du die IDs völlig frei vergeben, so wie du willst.

dieterwo schrieb:
Code:

var update = setInterval(updateDataHeizung, 5000);

dazu habe ich gleich 2 Fragen.
1. wird bei dieser Variante die Funktion updateDataHeizung auch direkt einmal ausgeführt? (Da der seperate Aufruf ja von dir entfernt wurde)

Nein - hab das oben ausgebessert. Nun ruft sich die Funktion vor dem setInterval auch direkt einmal selbst auf.

dieterwo schrieb:
2. Ist das die Ursache für mein ursprüngliches Problem?

Nein. Ich bin mir ehrlich gesagt ziemlich sicher, dass du das Problem nicht lösen kannst. Habe kein iPhone, um das Ganze zu testen; aber dass Prozesse, in diesem Fall das JavaScript-Intervall, im Hintergrund bzw. Deep Sleep beendet werden, ist ganz normal und - sofern es sich nicht um eine "echte" native App handelt - unvermeidbar.

dieterwo · 31. Okt. 2014

Okay, das heißt es geht grundsätzlich nur über einen Reload. Naja, ich hab den Button dafür ja schon vorgesehen.

Vielen Dank für deine Hilfe.

j-l-n · 31. Okt. 2014

dieterwo schrieb:
Vielen Dank für deine Hilfe.

Bitte - gerne. Sollten sich noch Fragen ergeben, frag ruhig.

[FRAGE] setInterval und JavaScript nach aus- und einschalten (IOS)

dieterwo

New member

kkapsner

Super Moderator

dieterwo

New member

j-l-n

Guest

dieterwo

New member

j-l-n

Guest

dieterwo

New member

j-l-n

Guest