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
Du kannst jquery auch statisch im Header angeben.
Danach sollten auch die Jquery-Plugins ladbar sein.
Aja, das könnte man natürlich... ::)
Funktioniert, danke!
Alternative wäre, man baut sich ein FTUI-Plugin, wo die Lib unter Depends angegeben wird.
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:
$('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?
Zitat von: drhirn am 31 Januar 2018, 13:44:58Folgender Code:
$('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
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.
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
$('.vibrate').each(function() {
console.log('vibrierendes Element');
$(this).click(function(){
console.log('geklickt');
window.navigator.vibrate(200);
})
})
Die index.html
<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:
<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.
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.
Hi,
manchmal hilft auch sowas:
$(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
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
Genau, das wollte ich noch raussuchen
$(document).on('changedSelection', function () {
... // do here things to be done after Pagetab changes
});
Danke setstate. Ich sag's nur ungern, aber
$(document).on('changedSelection', function () {
console.log('irgendwas');
});
bleibt ziemlich ruhig. Egal, wie oft ich die Seiten wechsle.
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 :D
Ich hab in der widget_famultibutton.js folgendes ergänzt:
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:
if (elem.hasClass('vibrate')){
me.vibrateElement(elem);
};
Wäre das ein richtiger Ansatz? Irgendwas sagt mir, das gehört anders gelöst.
Aber ein
<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.
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!
Hi,
hast Du mal versucht, das ganze einfach in die Unterseiten einzubauen? ...zumindest nur mal so als Testballon.
Gruß,
Thorsten
Wenn ich mich recht erinnern kann, hatte ich meine user.js mal direkt in der Unterseite eingebunden gehabt. Hatte aber auch nichts verändert. Das war allerdings bevor eure Vorschläge kamen. Kann also gut sein, dass es mit denen funktioniert hätte.
Die Lösung wäre, den Zusatz defer beim manuellen Einbinden von jQuery weg zu lassen. Den hatte ich drin. Danach funktioniert folgendes einwandfrei:
$(document).on('changedSelection', function() {
...
});