[gelöst] Eigene jQuery Funktionen - Wo einbinden

drhirn · 31 Januar 2018, 12:52:16

Hallo,

ich würde gerne einige Javascript/jQuery-Funktionen in einer extra Datei einbinden. Ich weiß aber nicht wie, weil egal, wo ich den <script>-tag hinbaue, jQuery wird von FTUI immer erst danach geladen. Was dann immer zu einem Reference Error führt ($ is not defined).

Hat da jemand einen Tipp für mich?

Danke!
Stefan

setstate · 31 Januar 2018, 13:15:14

Du kannst jquery auch statisch im Header angeben.
Danach sollten auch die Jquery-Plugins ladbar sein.

drhirn · 31 Januar 2018, 13:23:59

Aja, das könnte man natürlich...

Funktioniert, danke!

setstate · 31 Januar 2018, 13:37:38

Alternative wäre, man baut sich ein FTUI-Plugin, wo die Lib unter Depends angegeben wird.

drhirn · 31 Januar 2018, 13:44:58

Uh, Plugins. Stimmt, da war mal was. Muss ich mir dann ansehen.

Ich scheitere aber momentan irgendwie daran, auf DOM-Elemente auf "pagebutton"-Unterseiten zuzugreifen.

Folgender Code:

Code Auswählen


$('myClass').each(function() {
    console.log('Hier ist die Klasse');
})

funktioniert mit Elementen, die auf der index.html sind und die CSS-Klasse myClass haben, aber bei allen Elementen, die auf einer "Unterseite" sind, nicht.
Gibt's da einen Trick?

Thorsten Pferdekaemper · 31 Januar 2018, 15:55:22

Zitat von: drhirn am 31 Januar 2018, 13:44:58Folgender Code:
Code Auswählen Erweitern
$('myClass').each(function() { console.log('Hier ist die Klasse'); })
funktioniert mit Elementen, die auf der index.html sind und die CSS-Klasse myClass haben, aber bei allen Elementen, die auf einer "Unterseite" sind, nicht.

Ich glaube, dass die Unterseiten komplett eigene Seiten sind. D.h. die Dinger haben jeweils einen unabhängigen DOM Tree. Schau am Besten mal über die Entwicklertools nach, wie die Unterseiten zur Laufzeit in die DIVs eingebunden sind.
Gruß,
Thorsten

setstate · 31 Januar 2018, 16:32:24

Bei Benutzung von Pagebutton sind die Unterseiten mit im DOM (wenn sie class="prefetch" haben oder mindestens einmal geöffnet wurden)
Bei Pagetab werden sie erst beim Klick geladen.

drhirn · 01 Februar 2018, 11:50:30

Dann sollte mein Plan ja eigentlich funktionieren. Tut er aber nicht

Ich werde etwas konkreter. Und zwar möchte ich, dass Schaltflächen vibrieren, wenn man drauf drückt.

Dazu habe ich folgenden Code in der, auf der index.html, eingebundenen fhem-tablet-user.js

Code Auswählen


$('.vibrate').each(function() {
    console.log('vibrierendes Element');
    $(this).click(function(){
        console.log('geklickt');
        window.navigator.vibrate(200);
    })
})

Die index.html

Code Auswählen


<DOCTYPE html>
<html>
<head>
...
    <script src="../js/fhem-tablet.ui.js" defer></script>
    <script src="../lib/jquery.min.js" defer></script>
...
</head>
<body>
...
    <div data-typ="pagebutton" data-url="#index_1.html" data-load="#1" class="default vibrate"></div>
    <div data-typ="pagebutton" data-url="#index_2.html" data-load="#2" class="prefetch vibrate"></div>
...
    <div class="page" id="1"></div>
    <div class="page" id="2"></div>
...
    <script src="fhem-tablet-user.js" defer></script>
</body>
</html>

Und schließlich eine Test-Unterseite index_1.html:

Code Auswählen


<html>
...
<body>
<div class="page" id="1">
...
    <div data-type="symbol" class="vibrate"></div>
    <div data-type="symbol" class="vibrate"></div>
    <div data-type="symbol" class="vibrate"></div>
...
</div>
</body>
</html>

Beim einem Reload der ganzen Seite meldet die Konsole jetzt 2x vibrierendes Element (die "pagebutton"-Widgets) und nach jedem Klick auf eines davon auch "geklickt".
Die drei "symbol"-Widgets werden aber vollständig ignoriert.

setstate · 01 Februar 2018, 12:03:05

Weil zu dem Zeitpunkt, wo dein Script läuft, die Widgets noch nicht vollständig initialisiert wurden und damit auch die pagebuttons noch keine Unterseiten geladen haben.

Du musst also warten, bis die Pagebuttons Vollzug melden.
Also einen Listener auf das entsprechende Event anlegen.

Thorsten Pferdekaemper · 01 Februar 2018, 13:43:59

Hi,
manchmal hilft auch sowas:

Code Auswählen


$(function(){
    $('.vibrate').each(function() {
        console.log('vibrierendes Element');
        $(this).click(function(){
            console.log('geklickt');
            window.navigator.vibrate(200);
        })
    })
})

Damit wird die Ausführung nach "später" verschoben, wenn zumindest mal die Seite fertig geladen ist. Ob das reicht weiß ich nicht.
Gruß,
Thorsten

drhirn · 01 Februar 2018, 13:48:21

Witzig, meine Recherchen haben mich in dem Augenblick genau dahin geführt

Reicht aber leider nicht, keine Änderung.

Somit beschäftige ich mich weiter damit, herauszufinden, was setstate mit "Vollzug" gemeint hat

setstate · 01 Februar 2018, 14:38:37

Genau, das wollte ich noch raussuchen

Code Auswählen


 $(document).on('changedSelection', function () {
        ... // do here things to be done after Pagetab changes
    });

drhirn · 01 Februar 2018, 15:36:07

Danke setstate. Ich sag's nur ungern, aber

Code Auswählen


$(document).on('changedSelection', function () {
    console.log('irgendwas');
});

bleibt ziemlich ruhig. Egal, wie oft ich die Seiten wechsle.

drhirn · 01 Februar 2018, 16:09:53

Ist aber egal. Ich hab mir irgendwann gedacht, eigentlich wäre das viel besser in der widget_famultibutton.js aufgehoben. Und habe parallel daran gearbeitet. Dort kam ich zum Ziel. Und bin gerade etwas erschrocken darüber

Ich hab in der widget_famultibutton.js folgendes ergänzt:

Code Auswählen


	function vibrateElement(elem) {
		navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate
		if (navigator.vibrate){
			elem.on("click", function(){
				window.navigator.vibrate(200);
			});
		};
	}
[...]
var me = $.extend(new Modul_widget(), {
[...]
vibrateElement: vibrateElement
});

Und beispielhaft in der widget_symbol.js in der Funktion init:

Code Auswählen


if (elem.hasClass('vibrate')){
	me.vibrateElement(elem);
};

Wäre das ein richtiger Ansatz? Irgendwas sagt mir, das gehört anders gelöst.

Aber ein

Code Auswählen


<div data-type="symbol" class="vibrate"></div>

vibriert brav, wenn ich drauf drücke.

P.S.: Bzw. das if(elem.hasClass... überhaupt auch gleich in der widget_famultibutton.js unterbringen ginge auch.

drhirn · 02 Februar 2018, 08:44:09

Funktioniert nicht ganz richtig. Wäre aber eigentlich auch ein Fall für ein Plugin. Ich schau mir das mal an und erlaube mir, mich bei Bedarf in einem Thread mit passenderer Überschrift wieder zu melden.

Danke euch für die Unterstützung!