Autor Thema: Popup: Uncaught RangeError  (Gelesen 758 mal)

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1350
Popup: Uncaught RangeError
« am: 07 Dezember 2017, 01:05:22 »
In meinem Template für einen Switch mit "Dimmer-Popup" bekomme ich eine Fehlermeldung beim verändern des Volume-Reglers im Popup im Toast. Sonst funktioniert alles.

Fehlermeldung
Uncaught RangeError: jquery.min.js:2
Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at Function.camelCase (http://192.168.0.22:8083/fhem/ftui10test2/lib/jquery.min.js:2:2649)

Mein Template schaut so aus:
<!-- ======================================== Template Switch mit Dimmer ======================================== -->
<!-- ============================================================================================================== -->
<!-- ======================================== einfügen mit (Beispiel) ======================================== -->
<!-- <div data-template="template_licht_switch_dimmer.html" data-parameter='{"var_device":"eg_ki_ledspots","var_icon":"fs-hue_filled_phoenix_recessed_spot"}'></div> -->
<!-- ============================================================================================================== -->


<!-- ======================================== Start horizontale Box ======================================== -->
<div class="hbox">
    <!-- ======================================== Start Switch ======================================== -->
    <div class="vbox">
    <div data-type="switch"
data-device="var_device"
data-set-on="on"
data-set-off="off"
data-get-on="!off"
data-get-off="off"
data-icon="var_icon"
class="large">
</div>
    <!-- ======================================== Ende Switch ======================================== -->
        <div data-type="label" data-device="var_device" data-get="pct" data-unit="%" class="small darker"></div>
</div>
   
    <!-- ======================================== Anfang Symbol (Optionsbutton) ======================================== -->
    <div data-type="symbol" id="var_device" data-device='var_device' data-get="" data-icon="fa-bars" class="left-narrow top-space"></div>
    <!-- ======================================== Ende Symbol (Optionsbutton) ======================================== -->
    </div>
 
<!-- ======================================== Ende horizontale Box ======================================== -->     
    <!-- ======================================== Anfang Popup ======================================== -->
    <div data-type="popup" data-draggable="false" data-height="250px" data-width="250px" data-mode="fade" data-starter="#var_device" onclick="$('.dialog-close').trigger('click');">
      <!-- ======================================== Anfang Dialog ======================================== -->
      <div class="dialog">
          <header>Dimmen</header>
         
             <div
              data-type="volume"
                  data-device="var_device"
                  data-get="pct"
                  data-set="pct"
                  data-min="0"
                  data-max="100"
                  data-tickstep="5"
                  class="dim-tick dim-back top-space-3x"
                  onclick="$('.dialog-close').trigger('click');">
            </div>
            </div>
            <!-- ======================================== Ende Dialog ======================================== -->
      </div>
<!-- ======================================== Ende Popup ======================================== -->

Eingebunden so:
    <div data-template="template_licht_switch_dimmer.html" data-parameter='{"var_device":"og_bz_licht_deckenspots","var_icon":"fs-hue_filled_phoenix_recessed_spot"}'></div>
Was kann das sein?

Außerdem klappt das automatische Schließen per onclick nicht.
« Letzte Änderung: 07 Dezember 2017, 01:15:50 von Gunther »
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1350
Antw:Popup: Uncaught RangeError
« Antwort #1 am: 07 Dezember 2017, 01:46:00 »
Ok, wenn ich
onclick="$('.dialog-close').trigger('click');"rauslasse, kommt die Fehlermeldung nicht. wie kann ich trotzdem schließen lassen ohne einen Fehler zu bekommen?
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3666
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Popup: Uncaught RangeError
« Antwort #2 am: 07 Dezember 2017, 21:30:06 »
klappt bei mir wunderbar mit automatischem Schließen ohne Fehler.

Scheint ein Race Condition Problem zu sein. Ein Object wird schon gelöscht sein, als gerade drauf zugegriffen wird.
Vllt. verursachen andere Elemente auf der Seite das. Mit dieser minimalen Seite klappt es

<!DOCTYPE html>
<html>

<head>

    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>

<body>
    <div class="gridster">
        <ul>

            <li data-row="5" data-col="1" data-sizey="3" data-sizex="3">
                <header>EXAMPLE4</header>
                <!-- place your widget here -->
                <div data-template="template_licht_switch_dimmer.html" data-parameter='{"var_device":"og_bz_licht_deckenspots","var_icon":"fs-hue_filled_phoenix_recessed_spot"}'></div>
            </li>

        </ul>
    </div>
</body>

</html>

Bei dir auch?.

Ich habe es aber nur im Safari und FF probiert.

Neue Erkenntnis: Fehler passiert, wenn man das Template mehrfach einbindet. Dann bei mir auch.
« Letzte Änderung: 09 Dezember 2017, 10:19:29 von setstate »

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1350
Antw:Popup: Uncaught RangeError
« Antwort #3 am: 08 Dezember 2017, 00:23:40 »
Danke fürs Testen.
Nach was muss ich Ausschau halten bzw. wie kann ich das bereinigen/ testen?
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3666
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Popup: Uncaught RangeError
« Antwort #4 am: 08 Dezember 2017, 07:47:54 »
Die Idee mit dem Auto-Close ist gut, nur muss man sie anderes implementieren, damit es nicht zu dem Fehler kommen kann.

Das Netz sagt sowas zu solchen Fehlern: You can also get this error when you have an infinite loop. Make sure that you don't have any unending, recursive self references.

Ich muss mir das mal tiefer ansehen

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3666
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Popup: Uncaught RangeError
« Antwort #5 am: 09 Dezember 2017, 10:25:21 »
Der Fehler passiert, weil du zweimal onclick="$('.dialog-close').trigger('click'); drin hast. Einmal bei Popup und einmal beim Volume.

Bei Popup einfach das onclick="$('.dialog-close').trigger('click'); weg, dann geht es.

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1350
Antw:Popup: Uncaught RangeError
« Antwort #6 am: 10 Dezember 2017, 23:14:28 »
Hmm, ich habe hier auch einen Fehler.
Komischerweise schmiert mir regelmäßig Spotify auf dem Tablet ab, wenn ich Tablet UI aufhabe (auch ohne aktive Bedienung). Ist Tablet UI zu, läuft es munter durch.
Da ich viel an meiner Badezimmerseite (ganz unten) gebastelt habe, habe ich diese im Verdacht.
Wenn ich auf einen der Lightszene-Button drücke, kommt der Fehler wieder.
Brauche da nochmal Unterstützung zwecks WAF-Anhebung.

So schaut das anscheinend fehlerhafte Template template_led_streifen.html aus:
<!-- ======================================== Template LED-HUE-Licht über Homematic-Schalter ======================================== -->
<!-- ======================================== Template Uhr ======================================== -->
<!-- ============================================================================================================== -->
<!-- ======================================== einfügen mit (Beispiel) ======================================== -->
<!-- <div data-template="template_led_streifen.html" data-parameter='{"var_device_hm":"og_bz_licht_schattenfuge","var_device_hue_einzel_farbe":"og_bz_hue_led_streifen_schattenfuge_1_farbe","var_device_hue_gesamtgruppe":"og_bz_licht_schattenfuge","var_device_lightscene":"ls_og_bz_schattenfuge_hue","var_device_hue_einzel_weiss":"og_bz_hue_led_streifen_schattenfuge_1_weiss","var_device_gruppe_farbe":"og_bz_hue_gr_led_streifen_decke_farbe","var_device_gruppe_weiss":"og_bz_hue_gr_led_streifen_decke_weiss"}'></div> -->
<!-- ============================================================================================================== -->


    <div class="top-space">
        <div data-type="switch"
             data-device="var_device_hm"
             data-get-on="on.*"
             data-set-on="on"
             data-icon="oa-light_diffused"
             data-on-background-color="var_device_hue_einzel_farbe:rgb"
             class="large">
        </div>
<div data-type="label" data-device="var_device_hue_einzel_farbe" data-get="pct" data-unit="%" data-pre-text="C:" data-hide="var_device_hue_gesamtgruppe:state" data-hide-on="off" class="inline small darker"></div>
<div data-type="label" data-device="var_device_hue_einzel_weiss" data-get="pct" data-unit="%" data-pre-text="W:" data-hide="var_device_hue_gesamtgruppe:state" data-hide-on="off" class="inline small darker"></div>
       
        <div class="">
            <div data-type="popup"
                 data-height="350px"
                 data-width="700px"
                 data-draggable="false"
                 class="">
                 
                <div data-type="push"
                     data-icon="fa-google-wallet"
                     data-on-color="var_device_hue_einzel_farbe:rgb"
                     data-on-background-color="var_device_hue_einzel_farbe:rgb"
                     data-off-background-color="var_device_hue_einzel_farbe:rgb"
                     data-off-color="var_device_hue_einzel_farbe:rgb"
                     data-hide="var_device_hue_gesamtgruppe:state"
      data-hide-on="off"                     
                     class="large invert">
                </div>
                <div data-type="label" data-hide="var_device_hue_gesamtgruppe:state" data-hide-on="off" class="darker">Farbe & Dimm</div>
                <div class="dialog dialogTransparent">
                    <header>Schattenfuge</header>
                    <div class="top-space">
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="var_device_lightscene"
                                 data-set="scene"
                                 data-set-on="Energietanken"
                                 data-off-color="#E8ECFF"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Energietanken</div></div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="var_device_lightscene"
                                 data-set="scene"
                                 data-set-on="Konzentrieren"
                                 data-off-color="#FFEAD8"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Konzentrieren</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="var_device_lightscene"
                                 data-set="scene"
                                 data-set-on="Lesen"
                                 data-off-color="#FFCBA1"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Lesen</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="var_device_lightscene"
                                 data-set="scene"
                                 data-set-on="Entspannen"
                                 data-off-color="#FFB97D"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Entspannen</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="var_device_lightscene"
                                 data-set="scene"
                                 data-set-on="Nachtlicht"
                                 data-off-color="#010100"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Nachtlicht</div>
                        </div>
                    </div>
                    <div class="row">
                    <div class="col-1-3">
             <div
              data-type="volume"
                  data-device="var_device_gruppe_farbe"
                  data-get="var_device_hue_einzel_farbe:pct"
                  data-set="pct"
                  data-min="0"
                  data-max="100"
                  data-tickstep="5"
                  class="dim-tick dim-back top-space-3x">
            </div>
            <div class="darker">Dimmen Farbe</div>
            </div>
                    <div class="col-1-3">
                    <div data-type="colorwheel"
      data-device="var_device_gruppe_farbe"
      data-get="var_device_hue_einzel_farbe:rgb"
      data-set="rgb"
      class="roundIndicator">
      </div>
      <div class="darker">individuelle Farbe</div>
      </div>
      <div class="col-1-3">
             <div
              data-type="volume"
                  data-device="var_device_gruppe_weiss"
                  data-get="var_device_hue_einzel_weiss:pct"
                  data-set="pct"
                  data-min="0"
                  data-max="100"
                  data-tickstep="5"
                  class="dim-tick dim-back top-space-3x">
            </div>
            <div class="darker">Dimmen Weiss</div>
            </div>
            </div>
            </div>
            </div>
        </div>
    </div>
    </li>   


Wenn ich darin einen der
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="var_device_lightscene"
                                 data-set="scene"
                                 data-set-on="Energietanken"
                                 data-off-color="#E8ECFF"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>

betätige kommt der Fehler.

Kopiere mal den Konsolenauszug hier rein:
jquery.min.js:2 Uncaught RangeError: Maximum call stack size exceeded
    at RegExp.[Symbol.match] (<anonymous>)
    at String.match (native)
    at L (http://192.168.0.22:8083/fhem/ftui10test2/lib/jquery.min.js:2:27768)
    at Function.r.Callbacks (http://192.168.0.22:8083/fhem/ftui10test2/lib/jquery.min.js:2:27852)
    at Function.Deferred (http://192.168.0.22:8083/fhem/ftui10test2/lib/jquery.min.js:2:29128)
    at hb (http://192.168.0.22:8083/fhem/ftui10test2/lib/jquery.min.js:3:27062)
    at HTMLDivElement.g (http://192.168.0.22:8083/fhem/ftui10test2/lib/jquery.min.js:3:29306)
    at Function.dequeue (http://192.168.0.22:8083/fhem/ftui10test2/lib/jquery.min.js:3:3171)
    at HTMLDivElement.e.complete (http://192.168.0.22:8083/fhem/ftui10test2/lib/jquery.min.js:3:29074)
    at i (http://192.168.0.22:8083/fhem/ftui10test2/lib/jquery.min.js:2:27983)
L @ jquery.min.js:2
r.Callbacks @ jquery.min.js:2
Deferred @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
add @ jquery.min.js:2
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
e.complete @ jquery.min.js:3
i @ jquery.min.js:2
requestAnimationFrame (async)
r.fx.start @ jquery.min.js:3
r.fx.timer @ jquery.min.js:3
hb @ jquery.min.js:3
g @ jquery.min.js:3
dequeue @ jquery.min.js:3
(anonymous) @ jquery.min.js:3
each @ jquery.min.js:2
each @ jquery.min.js:2
queue @ jquery.min.js:3
animate @ jquery.min.js:3
r.fn.(anonymous function) @ jquery.min.js:3
animate @ jquery.toast.min.js:1
process @ jquery.toast.min.js:1
init @ jquery.toast.min.js:1
t.toast @ jquery.toast.min.js:1
toast @ fhem-tablet-ui.js:1831
clicked @ widget_famultibutton.js:365
toggleOn @ widget_famultibutton.js:239
toggleOn @ widget_famultibutton.js:380
(anonymous) @ fa-multi-button.min.js:1
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3
fhem-tablet-ui.js:1844 call "plugins.update" done for "ls_og_bz_effektlicht:STATE"
fhem-tablet-ui.js:1844 call "plugins.update" done for "og_bz_hue_led_streifen_nachtlicht_weiss:STATE"
fhem-tablet-ui.js:1844 call "plugins.update" done for "og_bz_hue_led_streifen_nachtlicht_weiss:pct"
fhem-tablet-ui.js:1844 call "plugins.update" done for "og_bz_hue_led_streifen_nachtlicht_farbe:STATE"
fhem-tablet-ui.js:1844 call "plugins.update" done for "og_bz_hue_led_streifen_nachtlicht_farbe:pct"
fhem-tablet-ui.js:1844 call "plugins.update" done for "Verkehr_Bielefeld:eta"
fhem-tablet-ui.js:1844 call "plugins.update" done for "Verkehr_Bielefeld:distance"
fhem-tablet-ui.js:1844 call "plugins.update" done for "Verkehr_Bielefeld:delay"
fhem-tablet-ui.js:1844 call "plugins.update" done for "Verkehr_Bielefeld:duration_in_traffic"
fhem-tablet-ui.js:1466 --------- start healthCheck --------------
fhem-tablet-ui.js:1467 now: Sun Dec 10 2017 23:02:31 GMT+0100 (CET)
fhem-tablet-ui.js:1468 FTUI version: 2.6.32
fhem-tablet-ui.js:1469 Longpoll: true
fhem-tablet-ui.js:1470 Longpoll type: websocket
fhem-tablet-ui.js:1471 Longpoll objects there: true
fhem-tablet-ui.js:1473 Longpoll current line: 0
fhem-tablet-ui.js:1474 Longpoll last event before: 0 Sekunde(n)
fhem-tablet-ui.js:1475 Longpoll last reading update before: 4 Sekunde(n)
fhem-tablet-ui.js:1476 Shortpoll interval: 900
fhem-tablet-ui.js:1477 Shortpoll last run before: 15 Minute(n) 11 Sekunde(n)
fhem-tablet-ui.js:1478 FHEM dev/par count: 335
fhem-tablet-ui.js:1479 FTUI known devices count: 93
fhem-tablet-ui.js:1480 Page length: 607211
fhem-tablet-ui.js:1481 Widgets count: 692
fhem-tablet-ui.js:1482 --------- end healthCheck ---------------
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc1_low_c"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc1_high_c"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc1_condition"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc2_day_of_week"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc2_low_c"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc2_high_c"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc2_condition"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc3_day_of_week"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc3_low_c"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc3_high_c"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc3_condition"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc4_day_of_week"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc4_low_c"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc4_high_c"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc4_condition"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc5_day_of_week"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc5_low_c"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc5_high_c"
fhem-tablet-ui.js:1844 call "plugins.update" done for "MeinWetter:fc5_condition"
fhem-tablet-ui.js:1844 call "plugins.update" done for "eg_az_Wandthermostat_Climate:STATE"
fhem-tablet-ui.js:1844 call "plugins.update" done for "eg_az_Wandthermostat_Climate:measured-temp"
fhem-tablet-ui.js:1844 call "plugins.update" done for "og_gz_Wandthermostat_Climate:STATE"
fhem-tablet-ui.js:1844 call "plugins.update" done for "og_gz_Wandthermostat_Climate:humidity"
fhem-tablet-ui.js:1844 call "plugins.update" done for "eg_az_Wandthermostat:STATE"
fhem-tablet-ui.js:1466 --------- start healthCheck --------------
fhem-tablet-ui.js:1467 now: Sun Dec 10 2017 23:03:31 GMT+0100 (CET)
fhem-tablet-ui.js:1468 FTUI version: 2.6.32
fhem-tablet-ui.js:1469 Longpoll: true
fhem-tablet-ui.js:1470 Longpoll type: websocket
fhem-tablet-ui.js:1471 Longpoll objects there: true
fhem-tablet-ui.js:1473 Longpoll current line: 0
fhem-tablet-ui.js:1474 Longpoll last event before: 0 Sekunde(n)
fhem-tablet-ui.js:1475 Longpoll last reading update before: 19 Sekunde(n)
fhem-tablet-ui.js:1476 Shortpoll interval: 900
fhem-tablet-ui.js:1477 Shortpoll last run before: 16 Minute(n) 11 Sekunde(n)
fhem-tablet-ui.js:1478 FHEM dev/par count: 335
fhem-tablet-ui.js:1479 FTUI known devices count: 93
fhem-tablet-ui.js:1480 Page length: 607215
fhem-tablet-ui.js:1481 Widgets count: 692
fhem-tablet-ui.js:1482 --------- end healthCheck ---------------




Meine Badezimmerseite schaut so aus:
<html>
<title>FHEM</title>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * - Tablet Acer Iconia One 10 B3-A20: 10 Zoll 1280x800 1 GB Quad Core 1,3 GHz 16GB
* -   Breite: 30 Felder / Höhe: 18 Felder
* -    <meta name="widget_base_width" content="41">
* -    <meta name="widget_base_height" content="41">

* -   Schalter mit Label: Breite: 3 Felder / Höhe: 3 Felder

Ebene 4

wegen Pagebutton-Untermenü:
Ebene 1: Breite: 30 Felder / Höhe: 18 Felder
Ebene 2:    Breite: 28 Felder / Höhe: 18 Felder
Ebene 3:    Breite: 26 Felder / Höhe: 18 Felder
Ebene 4:    Breite: 24 Felder / Höhe: 18 Felder
     * -->
</head>
<body>
  <div class="page" id="rooms_og_badezimmer">
    <div class="gridster">
      <ul>
<!-- ============= Zeile 1 ================== -->
<!-- ======================================== Uhr ======================================== -->
            <li data-row="1" data-col="5" data-sizex="10" data-sizey="4">
        <div data-template="template_label_title.html" data-parameter='{"var_title":"Uhrzeit"}'></div>   
    <div data-template="template_uhr.html" data-parameter='{"var_groesse":"gigantic"}'></div>
    <div data-template="template_datum.html" data-parameter='{"var_groesse":"normal"}' class="top-space"></div>
    </li>
   
<!-- ======================================== Heizung ======================================== -->
<li data-row="1" data-col="15" data-sizex="6" data-sizey="4">
        <div data-template="template_label_title.html" data-parameter='{"var_title":"Heizung"}'></div> 
<div data-template="template_heizungsthermostate.html" data-parameter='{"var_wandtherostat_Climate":"og_bz_Wandthermostat_Climate","var_wandtherostat":"og_bz_Wandthermostat"}'></div>    
    </li>
   

<!-- ======================================== Verstärker ======================================== -->   
    <li data-row="1" data-col="21" data-sizex="4" data-sizey="4">
    <div data-template="template_label_title.html" data-parameter='{"var_title":"AV Verstärker"}'></div>
    <div data-type="switch"
data-device="og_bz_4erSchalter_Sw_01_Verstaerker"
data-set-on="on"
data-set-off="off"
data-icon="fs-rc_AUDIO"
class="big top-space">
</div>
<div  data-type="label"
data-device="og_bz_4erSchalter_Sw_01_Verstaerker"
data-get="state"
data-substitution='["on","an","off","aus"]'
class="darker">
</div>
    </li>

<!-- ======================================== Hausstatus ======================================== -->   
    <li data-row="1" data-col="25" data-sizex="4" data-sizey="4">
    <div data-template="template_label_title.html" data-parameter='{"var_title":"Tag/Nacht"}'></div>
    <div data-type="switch"
data-device="haus_Status"
data-set-states='["1","2"]'
data-icons='["fa-angellist", "fa-bed"]'
data-colors='["white", "white"]'
data-background-colors='["green", "red"]'
class="big top-space">
</div>
<div  data-type="label"
data-device="haus_Status"
data-get="state"
data-substitution='["1","Tag","2","Nacht"]'
class="darker">
</div>
    </li>

<!-- ============= Zeile 2 ================== -->

<!-- ============= Zeile 3 ================== -->

<!-- ============= Zeile 4 ================== -->
   
<!-- ============= Zeile 5 ================== -->
<!-- ======================================== Spiegellicht ======================================== --> 
<li data-row="5" data-col="5" data-sizex="3" data-sizey="3">
<div data-template="template_label_title.html" data-parameter='{"var_title":"Licht Spiegel"}'></div>
<div data-type="switch"
data-device="og_bz_licht_spiegel"
data-set-on="on"
data-set-off="off"
data-icon="oa-light_mirror"
class="large top-space">
</div>
</li>



<!-- ======================================== Schattenfuge (LED-Streifen Decke) ======================================== -->

<li data-row="5" data-col="8" data-sizex="3" data-sizey="5">
<div data-template="template_label_title.html" data-parameter='{"var_title":"Schattenfuge"}'></div>
<div data-template="template_led_streifen.html" data-parameter='{"var_device_hm":"og_bz_licht_schattenfuge","var_device_hue_einzel_farbe":"og_bz_hue_led_streifen_schattenfuge_1_farbe","var_device_hue_gesamtgruppe":"og_bz_licht_schattenfuge","var_device_lightscene":"ls_og_bz_schattenfuge_hue","var_device_hue_einzel_weiss":"og_bz_hue_led_streifen_schattenfuge_1_weiss","var_device_gruppe_farbe":"og_bz_hue_gr_led_streifen_decke_farbe","var_device_gruppe_weiss":"og_bz_hue_gr_led_streifen_decke_weiss"}'></div>
</li>

<!-- ======================================== Effektlichter (LED-Streifen Wanne) ======================================== -->

<li data-row="5" data-col="11" data-sizex="3" data-sizey="5">
<div data-template="template_label_title.html" data-parameter='{"var_title":"Effektlicht"}'></div>
<div data-template="template_led_streifen.html" data-parameter='{"var_device_hm":"og_bz_licht_wanne_nische_glaswand","var_device_hue_einzel_farbe":"og_bz_hue_led_streifen_nachtlicht_farbe","var_device_hue_gesamtgruppe":"og_bz_licht_wanne_nische_glaswand","var_device_lightscene":"ls_og_bz_effektlicht","var_device_hue_einzel_weiss":"og_bz_hue_led_streifen_nachtlicht_weiss","var_device_gruppe_farbe":"og_bz_hue_led_streifen_nachtlicht_farbe","var_device_gruppe_weiss":"og_bz_hue_led_streifen_nachtlicht_weiss"}'></div>
</li>
   
<!-- ============= Zeile 6 ================== -->

<!-- ============= Zeile 7 ================== -->

<!-- ============= Zeile 8 ================== -->
<!-- ======================================== Deckenspots ======================================== --> 
<li data-row="8" data-col="5" data-sizex="3" data-sizey="3">
<div data-template="template_label_title.html" data-parameter='{"var_title":"Deckenspots"}'></div>
<div data-template="template_licht_switch_dimmer.html" data-parameter='{"var_device":"og_bz_licht_deckenspots","var_icon":"fs-hue_filled_phoenix_recessed_spot"}'></div>
    </li>
   
   
    <li data-row="8" data-col="17" data-sizex="9" data-sizey="8"></li>

   
<!-- ======================================== leer ========================    -->
<li data-row="8" data-col="26" data-sizex="3" data-sizey="5"></li>
<!-- ============= Zeile 9 ================== -->

<!-- ============= Zeile 10 ================== -->
<!-- ======================================== Lautstärke ======================================== -->           
<li data-row="10" data-col="26" data-sizex="3" data-sizey="6">
        <div data-template="template_label_title.html" data-parameter='{"var_title":"Lautstärke"}'></div>
<div data-type="controller"
data-device="og_bz_Tablet10Zoll"
data-get="volume"
data-background-color="transparent"
data-set="volume"
data-icon="fa-volume-up"
data-color="#aa6900"
data-max="15"
class="fullsize">
</div>
    </li>

<!-- ============= Zeile 11 ================== -->
<!-- ======================================== Dimmen Deckenspots ======================================== -->       
    <li data-row="11" data-col="5" data-sizex="3" data-sizey="8">
        <div data-template="template_label_title.html" data-parameter='{"var_title":"Spots dimmen"}'></div>
<div data-type="controller"
data-device="og_bz_licht_deckenspots"
data-get="pct"
data-background-color="transparent"
data-set="pct"
data-icon="oa-message_light_intensity"
data-max="100"
data-height="25em"
data-color="#aa6900"
class="fullsize">
</div>
    </li>
   
<!-- ============= Zeile 12 ================== -->

<!-- ============= Zeile 13 ================== -->

<!-- ============= Zeile 14 ================== -->

<!-- ============= Zeile 15 ================== -->

<!-- ============= Zeile 16 ================== -->
<li data-row="16" data-col="26" data-sizex="3" data-sizey="3">
<div data-template="template_label_title.html" data-parameter='{"var_title":"Bad aus"}'></div>
</li>


<!-- ============= Zeile 17 ================== --> 

<!-- ============= Zeile 18 ================== -->
   


   
      </ul>
    </div>
   </div>
</body>
</html>
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3666
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Popup: Uncaught RangeError
« Antwort #7 am: 11 Dezember 2017, 07:06:17 »
Das passiert, weil sich die click Events rekursiv gegenseitig aufrufen bis der Stack überläuft.
Man müsste das interne DOM abwärts Propagieren unterbrechen und könnte mit IDs arbeiten, damit nicht alle Popups gleichzeitig reagieren

Schaue ich mir an ...


Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1350
Antw:Popup: Uncaught RangeError
« Antwort #8 am: 11 Dezember 2017, 07:34:41 »
Du bist super! Danke!
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3666
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Popup: Uncaught RangeError
« Antwort #9 am: 11 Dezember 2017, 19:40:05 »
Kannst du mal probierten, dem Popup die id="pop_var_device_lightscene" zuzuweisen.

und dann so: onclick="$('#pop_var_device_lightscene.dialog-close').trigger('click');"

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1350
Antw:Popup: Uncaught RangeError
« Antwort #10 am: 11 Dezember 2017, 20:10:29 »
Das ging ja fix.

Schaut so aus, als ob damit keine Fehlermeldung mehr kommt!

So habe ich das nun eingebunden:
<!-- ======================================== Template LED-HUE-Licht über Homematic-Schalter ======================================== -->
<!-- ======================================== Template Uhr ======================================== -->
<!-- ============================================================================================================== -->
<!-- ======================================== einfügen mit (Beispiel) ======================================== -->
<!-- <div data-template="template_led_streifen.html" data-parameter='{"var_device_hm":"og_bz_licht_schattenfuge","var_device_hue_einzel_farbe":"og_bz_hue_led_streifen_schattenfuge_1_farbe","var_device_hue_gesamtgruppe":"og_bz_licht_schattenfuge","var_device_lightscene":"ls_og_bz_schattenfuge_hue","var_device_hue_einzel_weiss":"og_bz_hue_led_streifen_schattenfuge_1_weiss","var_device_gruppe_farbe":"og_bz_hue_gr_led_streifen_decke_farbe","var_device_gruppe_weiss":"og_bz_hue_gr_led_streifen_decke_weiss"}'></div> -->
<!-- ============================================================================================================== -->


    <div class="top-space">
        <div data-type="switch"
             data-device="var_device_hm"
             data-get-on="on.*"
             data-set-on="on"
             data-icon="oa-light_diffused"
             data-on-background-color="var_device_hue_einzel_farbe:rgb"
             class="large">
        </div>
<div data-type="label" data-device="var_device_hue_einzel_farbe" data-get="pct" data-unit="%" data-pre-text="C:" data-hide="var_device_hue_gesamtgruppe:state" data-hide-on="off" class="inline small darker"></div>
<div data-type="label" data-device="var_device_hue_einzel_weiss" data-get="pct" data-unit="%" data-pre-text="W:" data-hide="var_device_hue_gesamtgruppe:state" data-hide-on="off" class="inline small darker"></div>
       
        <div class="">
            <div data-type="popup"
                 data-height="350px"
                 data-width="700px"
                 data-draggable="false"
                 id="pop_var_device_lightscene"
                 class="">
                 
                <div data-type="push"
                     data-icon="fa-google-wallet"
                     data-on-color="var_device_hue_einzel_farbe:rgb"
                     data-on-background-color="var_device_hue_einzel_farbe:rgb"
                     data-off-background-color="var_device_hue_einzel_farbe:rgb"
                     data-off-color="var_device_hue_einzel_farbe:rgb"
                     data-hide="var_device_hue_gesamtgruppe:state"
      data-hide-on="off"                     
                     class="large invert">
                </div>
                <div data-type="label" data-hide="var_device_hue_gesamtgruppe:state" data-hide-on="off" class="darker">Farbe & Dimm</div>
                <div class="dialog dialogTransparent">
                    <header>Schattenfuge</header>
                    <div class="top-space">
                        <div class="inline">
                            <div onclick="$('#pop_var_device_lightscene.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="var_device_lightscene"
                                 data-set="scene"
                                 data-set-on="Energietanken"
                                 data-off-color="#E8ECFF"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Energietanken</div></div>
                        <div class="inline">
                            <div onclick="$('#pop_var_device_lightscene.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="var_device_lightscene"
                                 data-set="scene"
                                 data-set-on="Konzentrieren"
                                 data-off-color="#FFEAD8"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Konzentrieren</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('#pop_var_device_lightscene.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="var_device_lightscene"
                                 data-set="scene"
                                 data-set-on="Lesen"
                                 data-off-color="#FFCBA1"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Lesen</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('#pop_var_device_lightscene.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="var_device_lightscene"
                                 data-set="scene"
                                 data-set-on="Entspannen"
                                 data-off-color="#FFB97D"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Entspannen</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('#pop_var_device_lightscene.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="var_device_lightscene"
                                 data-set="scene"
                                 data-set-on="Nachtlicht"
                                 data-off-color="#010100"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Nachtlicht</div>
                        </div>
                    </div>
                    <div class="row">
                    <div class="col-1-3">
             <div
              data-type="volume"
                  data-device="var_device_gruppe_farbe"
                  data-get="var_device_hue_einzel_farbe:pct"
                  data-set="pct"
                  data-min="0"
                  data-max="100"
                  data-tickstep="5"
                  class="dim-tick dim-back top-space-3x">
            </div>
            <div class="darker">Dimmen Farbe</div>
            </div>
                    <div class="col-1-3">
                    <div data-type="colorwheel"
      data-device="var_device_gruppe_farbe"
      data-get="var_device_hue_einzel_farbe:rgb"
      data-set="rgb"
      class="roundIndicator">
      </div>
      <div class="darker">individuelle Farbe</div>
      </div>
      <div class="col-1-3">
             <div
              data-type="volume"
                  data-device="var_device_gruppe_weiss"
                  data-get="var_device_hue_einzel_weiss:pct"
                  data-set="pct"
                  data-min="0"
                  data-max="100"
                  data-tickstep="5"
                  class="dim-tick dim-back top-space-3x">
            </div>
            <div class="darker">Dimmen Weiss</div>
            </div>
            </div>
            </div>
            </div>
        </div>
    </div>
    </li>   

Teste weiter.

Danke!!!
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden