Erbitte Hilfe bei Javascript-Funktion mit 3 Parametern, in HTML an beliebiger Stelle aufrufbar

Zitat von Tamaleus

Ich wende mich an die Fachleute, da das nicht mein Fachgebiet ist. Ich suche nach einer Lösung, um in verschiedenen HTML-Dateien individuell eine Javascript-Funktion (mit 3 Parametern) aufrufen zu können, womit ein ganz bestimmter Ausschnitt (fetch; definiert durch eine "div-id") zurückgegeben werden soll. Grundgedanke ist, in einer HTML-Datei verschiedene, durch div-id ausgezeichnete Abschnitte in anderen html-Dateien einfügen zu müssen, um so redundante Daten zu vermeiden.

Und warum baust du die HTML-Teile nicht schon auf dem Server mit PHP zusammen? PHP scheint doch ohnehin im Spiel zu sein, mir erschließt sich der Sinn nicht warum man das mit Javascript zusammenpfuschen möchte.

Zitat von Tamaleus

Ich glaube, mich bisher redlich bemüht zu haben, schaffe es aber nicht, bis zum gewünschten Ziel zu kommen. Ich stelle auch gerne zur Verfügung, was ich soweit habe.

Mir ist nicht so ganz klar was du da eigentlich vor hast: warum gibt es die sowohl in der Datei selbst als auch in der separaten js-Datei jeweils eine Funktion mit identischem Namen? Du musst schon etwas konkreter werden woran es genau scheitert.

Deine Funktion in der externen Datei braucht vermutlich auch noch Parameter über die angegeben kann welches Element der geladenen Inhalte verwendet werden soll und in welches Ziel-Element der Inhalt eingefügt werden soll. Sinnvoll wäre wohl auch noch die Angabe des zu landenden Inhalts an den Server mit zu übergeben damit der nur den benötigten Inhalt liefert und nicht einfach alles …

Zitat von Tamaleus

Womit mir nicht wirklich gedient ist, sind Grundsatz-Belehrungen. Ich bin IV-Rentner und arbeite mit Leidenschaft an einer Familien-Homepage. Ich bin mir bewusst, dass es fachlich sinnvoll wäre, mir zuerst das nötige Basis-Wissen anzueignen. Aber gerade das möchte ich (aus verschiedenen Gründen) nicht.

Ich weiß ja nicht was deine Gründe dafür sind dich nicht mit den Grundlagen zu beschäftigen - im Grunde hast du aber zwei Möglichkeiten: entweder eignest du dir die Grundlagen selbst an oder du bezahlst jemanden dafür dass er das gewünschte für dich programmiert. Ein Forum ist aber kein Codelieferservice sondern sollte eher als Hilfe zur Selbsthilfe verstanden werden (ja, es gibt meist welche die ständig fertige Lösungen hinknallen das bringt dem Fragenden aber exakt nichts - und wäre hier ohnehin wohl nur sehr eingeschränkt bis garnicht möglich, dafür müsste man das Problem überhaupt erstmal verstehen). Und ja, das gilt für alle, völlig egal wie alt und mit welchem Vorwissen/Ausbildung usw..

Hallo Tamaleus willkommen zurück!

Ich habe einen Blick auf deine Dateien geworfen und offenbar sollen diese Abschnitte statisch und sofort beim Laden der Seite eingefügt werden. In dem Fall wäre es einfacher, das auf der Serverseite mit PHP zu erledigen.

Beste grüße, Ulrich

Hallo Tamaleus

wenn ich das richtig verstehe, müsste das variabel mit Parametern so aussehen:

// Inhalt von script.js
async function ladeAusschnitt(
	url, // Die URL der Quellseite
	srcID, // Die ID des Abschnitts auf der Quellseite
	dstID // die ID des Abschnitts auf der Zielseite
) {
	try {
		// 1. Datei abrufen
		const response = await fetch(url);

		// 2. Antwort in Text umwandeln
		const text = await response.text();

		// 3. Optional: Nur einen bestimmten Teil extrahieren (Ausschnitt)
		const parser = new DOMParser();
		const doc = parser.parseFromString(text, 'text/html');
		const ausschnitt = doc.querySelector(srcID).innerHTML;

		// 4. In das Ziel-Element einfügen
		document.getElementById(dstID).innerHTML = ausschnitt;
	} catch (error) {
		console.error('Fehler beim Laden:', error);
	}
}

// Funktion beim Seitenstart ausführen
ladeAusschnitt('mnu2-arturs-docs-archiv-div15.php', '#ada-id15', 'ziel-container15');

Ungetestet, versuche ob es funktioniert und melde dich wieder, wenn nicht.

Das ist jetzt ein wenig ineffizient weil Du bei jedem Aufruf die komplette Quellseite laden musst. Besser wäre es eigentlich, gleich auf der Serverseite das Filtern zu erledigen. Aber Du schreibst ja, dass Du schon glücklich wärst, wenn es auf diese Weise funktioniert.

Beste Grüße, Ulrich

Tamaleus Ah ja, ich mache so etwas Ähnliches auf meiner eigenen kleinen Website. Was du machen willst, ist irgendwie wie ein kleines “Reservoir” von HTML-Abschnitten zu haben, die man benutzen kann, ohne alles kopieren zu müssen. Ich habe die Abschnitte einfach in separate Dateien gelegt und dann nur die gewünschte div-id per JS geholt, das klappt ziemlich gut. Man muss nur darauf achten, dass die Seite fertig geladen ist, bevor man den Inhalt einfügt, sonst zeigt er sich nicht. Und ein kleiner Tipp: wenn du die Abschnitte oft änderst, kann man auch Mini-Inhalte wie Text oder Bilder als Module machen, die man leicht wiederverwenden kann. Ja, es braucht ein bisschen Geduld, aber wenn es einmal läuft, spart man eine Menge Zeit und vermeidet überall Doppelungen.

Seit dem letzten Mal, als ich mein HTML-Modulsystem gebastelt habe, habe ich mich ein bisschen damit beschäftigt, wie man “lebendigere” Inhalte für Kinder einbinden kann. Ich bin auf einen Artikel gestoßen, der zeigt, wie man einfache Ideen präsentiert, damit die Kleinen Familienbeziehungen und Zugehörigkeitsgefühl besser verstehen, ähnlich wie kleine pädagogische Mini-Projekte, die man in dynamische Divs einfügt. Es ist ziemlich cool, um Kontext in wiederverwendbare Abschnitte zu bringen, besonders wenn man etwas Pädagogisches oder Kreatives einbauen möchte, ohne alles neu zu schreiben. Du kannst dir mal diese Idee für eine pädagogische Aktivität über Beziehungen und familiären Zusammenhalt für Kinder anschauen – das hat mir ein paar Ideen gegeben, meine Module interaktiver und menschlicher zu gestalten.