Monatsrückblick Januar/Februar 2026 ist online!

[bommel_030]

Moin,
ich versuche ein Widget von handball.net in meine VIS einzubinden und scheitere...
Ich möchte das Widget wie hier beschrieben einbinden:
https://www.handball.net/widgets/mannschaften/handball4all.schleswig-holstein.1402661/spielplan

1. Der Teil soll das eigentliche Widget laden

<script>
(function(e,t,n,r,i,s,o){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)}, e[i].l=1*new Date;s=t.createElement(n),o=t.getElementsByTagName(n)[0];s.async=1; s.src=r;o.parentNode.insertBefore(s,o)})(window,document,"script", 'https://www.handball.net/widgets/embed/v1.js',"_hb");
</script>

2. Der Teil soll die Mannschaft auswählen

<script>
_hb({
widget: 'spielplan',
teamId: 'handball4all.schleswig-holstein.1402661',
container: 'handball-spielplan'
})
</script>

3. Der Teil stellt das eigentliche Widget dar

<div id='handball-spielplan'></div>

Teil 1 und 2 im Vis-Editor in die Skript-Sektion gepackt:

//<script>
(function(e,t,n,r,i,s,o){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)}, e[i].l=1*new Date;s=t.createElement(n),o=t.getElementsByTagName(n)[0];s.async=1; s.src=r;o.parentNode.insertBefore(s,o)})(window,document,"script", 'https://www.handball.net/widgets/embed/v1.js',"_hb");
//</script>
    
//<script>
_hb({
widget: 'spielplan',
teamId: 'handball4all.schleswig-holstein.1402661',
container: 'handball-spielplan'
})
//</script>

Hier sagt mir der Editor für den ersten Teil

Missing '( )' invoking a constructor.

Den 3. Teil habe ich mit einem HTML Widget so eingebunden:

Leider wird auf der Seite nichts angezeigt. Fehlt jetzt der Funktion ein Klammerpaar, oder ist die Einbindung mit HTML-Widget falsch?
Hab mehrere Versionen zusätzlicher Klammern probiert und auch unterschiedliche HTML Widgets genutzt, leider ohne Erfolg.

Die Entwicklerkonsole gibt mir nur einen Fehler zurück, bei dem ich allerdings nicht weiß ob der direkt im Zusammenhang mit dem Widget steht.

Uncaught Error: createRoot(...): Target container is not a DOM element.

[OliverIO]

@bommel_030

Im Script Reiter benötigt man die scriptags nicht.
Generelles Problem ist aber ein anderes.
Der scriptreiter wird sehr früh im ladeprozess geladen, die Widgets dann erst dynamisch.
Wenn der scriptreiter läuft existiert der html id noch nicht und schlägt deswegen fehl.

Packe bitte alle Teile in ein html Widget. Wenn die Teile dann von vis dem DOM hinzugefügt wird, sollte es klappen. Es kann aber noch andere fallstricke geben.

[bommel_030]

@OliverIO
Zumindest der Teil war mir auch schon bekannt, deshalb waren sie auskommentiert.
Ich habe jetzt alles aus dem Skriptreiter gelöscht, und in ein einzelnes HTML Widget gepackt.

<script>
(function(e,t,n,r,i,s,o){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)}, e[i].l=1*new Date;s=t.createElement(n),o=t.getElementsByTagName(n)[0];s.async=1; s.src=r;o.parentNode.insertBefore(s,o)})(window,document,"script", 'https://www.handball.net/widgets/embed/v1.js',"_hb");
</script>
<script>
_hb({
widget: 'spielplan',
teamId: 'handball4all.schleswig-holstein.1402661',
container: 'handball-spielplan'
})
</script>
<div id='handball-spielplan'></div>

Das entfernt einerseits den DOM-Fehler in der Entwicklerkonsole, und ich sehe im Editor das Widget.

In der Runtime ist das Widget aber leider nicht zu sehen. Wenn ich mir in der Entwicklerkonsole den container handball-spielplan suche erscheint oben links auf der Seite nur obwohl die Abmessungen so angegeben sind.

[OliverIO]

@bommel_030

Was steht in der Browser Konsole für Fehlermeldungen?
Gibt es im networktab requests mit Fehlern?

[OliverIO]

@bommel_030

so funktioniert es.
problem war der binding mechanismus von vis. dieser hat ein teil des scripts als binding konstrukt erkannt und überschrieben.
wenn man das script umformatiert, klappt es

<script>
(function (e, t, n, r, i, s, o) {
    e[i] = e[i] || function () {
        (e[i].q = e[i].q || []).push(arguments)
    },
    e[i].l = 1 * new Date;
    s = t.createElement(n),
    o = t.getElementsByTagName(n)[0];
    s.async = 1;
    s.src = r;
    o.parentNode.insertBefore(s, o)
})(window, document, "script", 'https://www.handball.net/widgets/embed/v1.js', "_hb");</script>
<script>
_hb({
widget: 'spielplan',
teamId: 'handball4all.schleswig-holstein.1402661',
container: 'handball-spielplan'
})
</script>
<div id='handball-spielplan'></div>

[bommel_030]

Vielen Dank, das klappt!
Ich kann sogar nachvollziehen was das Problem war. Das umformatieren hätte ich aber nicht hinbekommen.
Mal schauen ob ich dem Widget noch ein paar Bindings zum switchen zwischen den Vereinen und den Typen beibringen kann.

[OliverIO]

@bommel_030 sagte in [gelöst] VIS-1 - externes Widget einbinden:

Das umformatieren hätte ich aber nicht hinbekommen.

Ich mach das mit notepad++ und Plugin jstools
Zum formatieren