Problem mit JavaScript in HTML Box, Problem mit Laden von JS Dateien

Entweder liegt das Problem mal wieder bei mir oder halt bei der Ausgabe von Strings mit dem HTMLBox Profil

Das Problem tritt auf wenn man eine Seite mittels F5/Refresh neu lädt oder halt das erste mal diese Seite öffnet
Ändere ich danach dann den Wert der Variabel über den Objektbaum oder halt per Script dann funktioniert es wieder

Sprich der 1. Aufruf geht nicht, die Updates wenn sich eine Variabel ändert funktionieren.

Fehler über dem Inspektor beim FireFox

Der SourceMap Fehler sagt das die Datei

http://192.168.178.27:3777/hook/waffi/js/jquery.mobile-1.4.5.min.js

nicht erreichbar ist, sie ist es aber definitiv

Diese 3 JS werden in die Box eingebunden

		<script type="text/javascript" src="hook/waffi/js/jquery.js"></script>
		<script type="text/javascript" src="hook/waffi/js/jquery.mobile-1.4.5.min.js"></script>
		<script type="text/javascript" src="hook/waffi/js/jquery.ajax-ips-kanalliste.js"></script>

manchmal wird auch die 3. Datei als nicht vorhanden angezeigt

und wie man sieht meckert der auch wegen der

http://192.168.178.27:3777/js/webfront.js

################

Der andere Fehler liegt wohl bei der Registrierung im Dom
Zeile 12

$(document).ready(function(){

EDIT: ich habe die jquery.mobile-1.4.5.min.js mal raus genommen da ich die nicht wirklich brauchte, gemeckert wird aber weiterhin wegen der webfront.js und das DOM Problem besteht auch weiterhin

Bestätigt, ja, nein, vielleicht?

Der Fehler sagt, dass die SourceMap nicht erreichbar ist. Das ist etwas anderes. Wir liefern für das WebFront auch keine SourceMap aus (die benötigen nur wir intern zum Debuggen). Ebenso brauchst du die SourceMap für JQuery nicht.

Schau doch mal im Netzwerk Reiter ob deine JQuery Datei korrekt geladen wurde. Du musst in deiner HTMLBox die JQuery Sachen laden bevor du die JQuery Funktionen nutzen kannst. Ich glaube nicht, dass hier ein Problem mit dem WebFront vorliegt.

paresy

Das SourceMap Problem (mit meiner Datei) ist weg nachdem ich die „jquery.mobile-1.4.5.min.js“ welche ich nicht mehr brauchte raus genommen hatte (siehe edit) warum auch immer das aufgetreten ist denn die Datei war zu 100% erreichbar, wie alle Dateien (copy & paste der URL aus der Fehlermeldung in die Browserzeile)

Das tritt aber weiterhin auf

Source-Map-Fehler: request failed with status 404
Ressourcen-Adresse: http://192.168.178.27:3777/js/webfront.js
Source-Map-Adresse: webfront.dart.js.map

Und auch diese Datei ist erreichbar

Was mich aber wundert ist das die lokale JS Datei im Verzeichnis Data\webfront\js eine andere Datei (noch von IPS 5.0) ist

Fängt der IPS Server Zugriffe auf diese Datei ab und leitet sie intern um und die lokale Datei ist somit nur ein Relikt ?

Das Problem was noch weiterhin besteht ist
ReferenceError: $ is not defined

Ich binde in der HMTLBox als erstes die CSS ein (unwichtig für den Fall) und dann die „jquery.js“ und danach erst die „jquery.ajax-ips-kanalliste.js“ welche den eigenen Code enthält. Danach komm dann die „sichtbare“ Ausgabe.

Das hier ist der Code der HTMLBox, habe ihn nur formatiert da sonst alles in einer Zeile stehen würde.
Also wie man sieht ist der Code als erstes in der Box.

<link type="text/css" href="/hook/waffi/css/waffi.css" rel="stylesheet">		
<script type="text/javascript" src="/hook/waffi/js/jquery.js"></script>		
<script type="text/javascript" src="/hook/waffi/js/jquery.ajax-ips-kanalliste.js"></script>				
<div id="wrapper">			
	<div class="navleft">				
		<section class="zapbuttons">					
			<div class="zapbutton buttonMouseOver zaptab" id="ARDZap"><img class="zapimage" src="user/waffi/images/1_HD.png" id="Kanal_1_1_1_Select_38378" alt="ARD"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="ZDFZap"><img class="zapimage" src="user/waffi/images/ZDF_HD.png" id="Kanal_2_1_1_Select_38378" alt="ZDF"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="RTLZap"><img class="zapimage" src="user/waffi/images/RTL.png" id="Kanal_3_1_1_Select_38378" alt="RTL"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="Sat1Zap"><img class="zapimage" src="user/waffi/images/Sat1.png" id="Kanal_4_1_1_Select_38378" alt="Sat1"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="PRO7Zap"><img class="zapimage" src="user/waffi/images/Pro7.png" id="Kanal_5_1_1_Select_38378" alt="PRO7"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="VoxZap"><img class="zapimage" src="user/waffi/images/Vox.png" id="Kanal_6_1_1_Select_38378" alt="Vox"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="Kabel1Zap"><img class="zapimage" src="user/waffi/images/kabel1.png" id="Kanal_7_1_1_Select_38378" alt="Kabel1"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="RTL2Zap"><img class="zapimage" src="user/waffi/images/RTL2.png" id="Kanal_8_1_1_Select_38378" alt="RTL2"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="SuperRTLZap"><img class="zapimage" src="user/waffi/images/Super_RTL.png" id="Kanal_9_1_1_Select_38378" alt="SuperRTL"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="3SatZap"><img class="zapimage" src="user/waffi/images/3sat_HD.png" id="Kanal_12_1_1_Select_38378" alt="3Sat"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="WeltZap"><div class="noImageAvailable"><br /><a id="Kanal_13_1_1_Select_38378" >Welt</a></div></div>
			<div class="zapbutton buttonMouseOver zaptab" id="NTVZap"><img class="zapimage" src="user/waffi/images/NTV.png" id="Kanal_14_1_1_Select_38378" alt="NTV"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="PhoenixZap"><img class="zapimage" src="user/waffi/images/phoenix_HD.png" id="Kanal_15_1_1_Select_38378" alt="Phoenix"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="Tele5Zap"><img class="zapimage" src="user/waffi/images/Tele5.png" id="Kanal_16_1_1_Select_38378" alt="Tele5"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="NeoHDZap"><img class="zapimage" src="user/waffi/images/neo_HD.png" id="Kanal_17_1_1_Select_38378" alt="NeoHD"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="EurosportZap"><img class="zapimage" src="user/waffi/images/Eurosport-HD.png" id="Kanal_50_1_1_Select_38378" alt="Eurosport"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="Sport1Zap"><img class="zapimage" src="user/waffi/images/Sport1-HD.png" id="Kanal_51_1_1_Select_38378" alt="Sport1"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="DMaxZap"><img class="zapimage" src="user/waffi/images/DMAX-HD.png" id="Kanal_64_1_1_Select_38378" alt="DMax"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="7MaxxZap"><div class="noImageAvailable"><br /><a id="Kanal_69_1_1_Select_38378" >7Maxx</a></div></div>
			<div class="zapbutton buttonMouseOver zaptab" id="SixxZap"><img class="zapimage" src="user/waffi/images/SIXX.png" id="Kanal_75_1_1_Select_38378" alt="Sixx"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="K1DokuZap"><img class="zapimage" src="user/waffi/images/kabel_eins_doku.png" id="Kanal_89_1_1_Select_38378" alt="K1Doku"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="N24DokuZap"><div class="noImageAvailable"><br /><a id="Kanal_90_1_1_Select_38378" >N24Doku</a></div></div>
			<div class="zapbutton buttonMouseOver zaptab" id="ZDFInfoZap"><img class="zapimage" src="user/waffi/images/zdfinfo_HD.png" id="Kanal_93_1_1_Select_38378" alt="ZDFInfo"></div>
			<div class="zapbutton buttonMouseOver zaptab" id="MTVZap"><img class="zapimage" src="user/waffi/images/MTV.png" id="Kanal_99_1_1_Select_38378" alt="MTV"></div>					
			<div class="zaptabbottom"></div>				
		</section>			
	</div>			
	<div class="navright">				
		<section class="navigationbuttons">					
			<div class="zapbutton buttonMouseOver zaptab" id="volumeUp"><img class="zapimage"       src="hook/waffi/images/volumeUp.png"    id="Button_VolumeUp_33950"       alt="volumeUp"></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="volumeMute"><img class="zapimage"     src="hook/waffi/images/volumeMute.png"  id="Button_Mute_33950"     alt="volumeMute"></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="volumeDown"><img class="zapimage"     src="hook/waffi/images/volumeDown.png"  id="Button_VolumeDown_33950"     alt="volumeDown"></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="channelUp"><img class="zapimage"      src="hook/waffi/images/channelUp.png"   id="Button_ChannelUp_38378"     alt="channelUp"></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="channelDown"><img class="zapimage"    src="hook/waffi/images/channelDown.png" id="Button_ChannelDown_38378"   alt="channelDown"></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="buttonBack"><img class="zapimage"     src="hook/waffi/images/ButtonBack.png"  id="Button_Back_38378"    alt="ButtonBack"></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="buttonLeft"><img class="zapimage"     src="hook/waffi/images/ButtonLeft.png"   id="Button_DirectionLeft_38378"    alt="left"/></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="buttonUp"><img class="zapimage"       src="hook/waffi/images/ButtonUp.png"     id="Button_DirectionUp_38378"      alt="up"/></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="buttonRight"><img class="zapimage"    src="hook/waffi/images/ButtonRight.png"  id="Button_DirectionRight_38378"   alt="right"/></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="buttonOK"><img class="zapimage"       src="hook/waffi/images/ButtonOK.png"     id="Button_Select_38378"         alt="enter"/></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="buttonDown"><img class="zapimage"     src="hook/waffi/images/ButtonDown.png"   id="Button_DirectionDown_38378"    alt="down"/></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="buttonRed"><img class="zapimage"      src="hook/waffi/images/ButtonRed.png"    id="Button_Red_38378"       alt="red"/></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="buttonYellow"><img class="zapimage"   src="hook/waffi/images/ButtonYellow.png" id="Button_Yellow_38378"    alt="yellow"/></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="buttonGreen"><img class="zapimage"    src="hook/waffi/images/ButtonGreen.png"  id="Button_Green_38378"     alt="green"/></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="buttonBlue"><img class="zapimage"     src="hook/waffi/images/ButtonBlue.png"   id="Button_Blue_38378"      alt="blue"/></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="buttonOn"><img class="zapimage"       src="hook/waffi/images/ButtonOn.png"     id="ButtonOO_35726175_33139"  alt="On"/></div>					
			<div class="zapbutton buttonMouseOver zaptab" id="buttonOff"><img class="zapimage"      src="hook/waffi/images/ButtonOff.png"    id="ButtonOO_-1_33139" alt="Off"/></div>				
		</section>			
	</div>		
</div>

Und das hier der JS Code (jquery.ajax-ips-kanalliste.js), habe hier nur die führenden Kommentarzeilen weg gelassen

$(document).ready(function(){
	$('.zapbuttons').on('click', 'img', function (){
		//alert('click!' + $(event.target).attr('id'));
		//alert('click!');
		sendToReceiver($(event.target).attr('id'));
	});

	// there is no logo available, click on an A tag
	$('.noImageAvailable').on('click', function (){
		sendToReceiver($(event.target).attr('id'));
	});


	$('.navigationbuttons').on('click', 'img', function (){
		sendToReceiverButton($(event.target).attr('id'));
	});


	function sendToReceiver(channel){
		$.ajax({
			type: "GET",
			url: "hook/waffi/php/WafFiRequest.php",
			data: "kanal=" + channel,
			success: function () {
				//alert("Test " + channel);
			}
		});
	}

	function sendToReceiverButton(buttonCode){
		$.ajax({
			type: "GET",
			url: "hook/waffi/php/WafFiRequest.php",
			data: "button=" + buttonCode,
			success: function () {
				//alert("Test " + buttonCode);
			}
		});
	}
});

Hier mal der Aufbau wo die HTML Box bei mir eingebunden ist

Drücke ich jetzt hier F5 bzw klicke auf Seite neu laden dann sehe ich wie IPS die Verbindung verliert und das WebFront neu lädt, optisch schaut es OK aus nur werden keine Klicks auf die Buttons registriert. In der Konsole bekomme ich diese Meldungen

wobei nur die rote für mich relevant ist, die Zeile 12,1 ist hier als Zeile 1,1 gepostet da davor nur die Kommentare waren.
Hier siehst Du auch nochmal das mit der SourceMap von oben.

Klicke ich jetzt (FF und Chrome jeweils aktuelle Version auf Win10, IPS 5.1.3130 Docker) einmal auf einen anderen Raum wie z.B. „Bad“ (rechts daneben im WebFront) und dann wieder zurück auf „Arbeitszimmer“ dann funktioniert alles. Auch wenn ich die Variabel der HMTLBox im Objektbaum aktualisiere und somit das Webfront aktualisiert wird.

Ich hoffe das war jetzt etwas verständlicher erklärt von mir dem kleiner „Nervi“ :D:D:D

Du nutzt zum Einbinden ja nicht das /user/ Verzeichnis, sondern einen Webhook.
Funktioniert es, wenn du alles im User Verzeichnis platzierst?
Bei einen Webhook muss sich ja ein Script um die Auslieferung der Datei kümmern; inkl. Content/MIME-Type usw…
Michael

Fängt der IPS Server Zugriffe auf diese Datei ab und leitet sie intern um und die lokale Datei ist somit nur ein Relikt ?

Ja. Du hast irgendwann beim „Backup“ erstellen nicht aufgepasst und interne Dateien vom WebFront mitkopiert :wink:

Es wäre tatsächlich spannend, ob die JS Datei im Reiter „Netzwerk“ geladen wird beim initialen Laden.

paresy

Wo befindet sich denn diese Datei jetzt ?

Ja wird sie

Nall-chan

Du nutzt zum Einbinden ja nicht das /user/ Verzeichnis, sondern einen Webhook.
Funktioniert es, wenn du alles im User Verzeichnis platzierst?
Bei einen Webhook muss sich ja ein Script um die Auslieferung der Datei kümmern; inkl. Content/MIME-Type usw...
Michael 

Ja bewusst den Hook da es ja ein Modul werden soll.
Hatte es zuerst im User Verzeichnis, selbes Verhalten

Hast du Testweise mal ein console.log in die Dateien geworfen um zu sehen ob und in welcher Reihenfolge die geladen werden?

paresy

Na hoffentlich in der Reihenfolge wie im Quellcode angegeben :smiley:
Ansonsten sage mal bitte wie man das macht dann teste ich mal

Na einfach mal hinzufügen und gucken wann der Browser es ausspuckt: HTML DOM console.log() Method

paresy

Da sich ein Webhook und Dateien im User-Verzeichnis komplett anders verhalten, empfehle ich dir es zuerst alles mit dem User-Verzeichnis zu testen.
Damit du nicht eventuell an mehreren Fronten das Problem suchen musst.

Wird dann später alles sauber geladen; nachdem du die anderen Probleme gefunden hast; Stückweise umbauen.
Also z.B. das Modul hier nutzen um die Dateien auszuliefern:
IPSNetwork/module.php at master · Nall-chan/IPSNetwork · GitHub
Funktioniert es damit, dann in dein Modul einbauen usw…

Michael

Ah OK da ich dachte in IPS
Dafür hat mir das Modul Update jetzt mal wieder IPS abgeschossen :smiley:

Hier wird die falsche Datei zuerst geladen obwohl die Kanalliste als 2. im Quellcode steht.
Oder sagen wir es mal so die Ausgabe vom console.log("… geladen"); der 2. Datei erfolgt vor dem der 1. Datei.

Das ist ja fast so als wenn da was den Code einliest und die Dateien welche eingebunden werden in der Reihenfolge sortiert :smiley:

Die (falsche) Reihenfolge passiert aber auch wenn ich den Raum wechsel und wieder zurück komme wo es dann funktioniert.

Der Unterschied ist, dass dann schon JQuery geladen ist und somit verfügbar ist :wink:

Schau mal: Deep dive into the murky waters of script loading - HTML5 Rocks

Auf jeden Fall ist das die Ursache… Du musst mal mit ein wenig JavaScript Magic schauen, dass du die Nacheinander geladen bekommst.

paresy

Ich schau gleich mal … weißt Du was richtig „P*rno“ wäre ? Wenn IPS per Default jquery mit ausliefern und in den Header einbinden würde :smiley:

… wobei das aber vermutlich trotzdem zu Problemen führen könnte.

Dank Deines Links wurde das Problem gelöst mittels

<script>		
[
  '/hook/waffi/js/jquery.js',
  '/hook/waffi/js/jquery.ajax-ips-kanalliste.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});		
</script>	

Vielen Dank, darfst Dir jetzt ein Bier aus dem Kühlschrank nehmen :smiley: :stuck_out_tongue:

Sehr schön. Wann kommt dein Modul? :rolleyes::smiley:

paresy

Da das Problem jetzt ja gelöst ist kann ich jetzt ja weiter machen ^^
Jetzt muss dann noch die Lust dazu kommen. :stuck_out_tongue:

Problem sind halt die Icons der Senderlogos und dessen Urheberrecht, die muss sich der User wohl wie es ausschaut selbst irgendwo besorgen und ggf die Größe anpassen.

Das macht das Modul natürlich etwas umständlicher in der Benutzung bzw in der Installation da Dateien besorgt und in den User Ordner kopiert werden müssen.

Du kannst ja einen Designer beauftragen die Icons standardmäßig für IPS zu erstellen so das sie direkt verfügbar sind :smiley: :smiley: :smiley:

Die Grafiken kannst du ja mit dem Modul skalieren das sollte nicht das Problem sein. Ansonsten würde ich vorschlagen das Du einfach nach der sRef gehst und diese nutzt, dann kann jeder ein Picon Set seiner Wahl nutzten die sRef ist immer gleich.

z.B. 1_0_19_2B66_3F3_1_C00000_0_0_0.png

1_0_19_2B66_3F3_1_C00000_0_0_0.png

Die Senderlogos findest du unter anderem bei Wikipedia

Da hat Fonzo recht. Wenn es so machbar ist nach der sRef zu gehen, hätte man freie Wahl und jeder könnte seine Lieblings Picons nutzen. Es gibt ja genug Auswahl.