✔ Javascript load content IN ANDERE html

N

neewby

Grünschnabel
Hallo ich habe ein Problem bei dem ich nicht weiterkomme und hoffe, dass mir hier vielleicht jemand weiterhelfen kann.

Zuerst einmal eine kurze Erklärung

Ich habe eine Haupthtml (index.html)

in dieser index.html sind Bereiche definiert zb
<dynamic></dynamic>

in diesen Bereich kann ich mittels eigenen zentralen Javascripts (load_content.js)
dynamic.load("home.html");
den Inhalt der home.html hineinladen in den bereich "dynamic" hineinladen

das klappt auch wunderbar.

Jetzt aber zu dem Problem:

In der home.html habe ich selbst auch Bereiche definiert
zb
<news></news>
Ich kann aber mittels des Javascript file nicht das in die index.html hineingeladene home.html - Bereich <news> befüllen.

Sprich: ich möchte den bereich "dynamic" in index.html durch home.html ersetzen & gleichzeitig in home.html den bereich "news" durch eine news.html ersetzen.
der erste teil klappt - der zweite leider nicht.

Wie kann ich das machen?

Was mache ich falsch bzw ist das garnicht möglich?
geht es nur indem ich im head von home.html ein eigenes javascriptfile angebe welches den bereich in home befüllt?
ich hätte halt am liebsten ein zentrales load_content.js wo alle zu ersetzenden Bereiche definiert sind. Sowohl in dem Hauptfile (index.html) als auch in den in index hineingelandenen unterfiles (home.html)

Ich hoffe ich habe es so niedergeschrieben, dass ihr auch versteht was ich meine

Danke, lg neewby
 
geht es nur indem ich im head von home.html ein eigenes javascriptfile angebe welches den bereich in home befüllt?
Zum Vergrößern anklicken....
...vielleicht ginge es auch irgendwie anders, das wäre aber auf jeden Fall der sauberste Weg. Vielleicht ruft ja auch mal jemand home.html direkt auf oder es soll noch wo anders eingebunden werden...

Gruß javaDeveloper2011
 
naja nur wie anders?

hätte halt am liebsten schon die sauberste variante aber komme einfach nicht weiter ...
 
Hi nochmal,

schreib doch einfach ein Script das so ähnlich ist wie load_content.js.
Das lädst du dann im header von home.html und es füllt <news></news> statt <dynamic></dynamic>.

Oder versuchst du das schon und hast probleme beim umschreiben?
 
Hallo JavaDeveloper ... nunja leider klappt es nicht so ganz ich weiß leider auch nciht woran es liegt

in der Index.html funtioniert es einwandfrei - wenn ich aber das fast gleiche script in die home.html einbaue dann funktionert es einfach nciht ...

hier mal die details - (vielleicht bin ich einfach zu blöd oder ich hab irgendwas vergessen aber ich komm einfach nicht drauf)


ich hoffe ich hab es hier leicht verständlich aufgeschrieben - wollte am liebsten die files anhängen aber wusste nicht wie.

Leider geht dir die Formatierung mit den Abständen flöten ... darum nicht so übersichtlich
mit den Ordnern/Dateiorten gibt es keine probleme!

index.html:
==================================================================
<html lang="en">
<head>
<meta charset="utf-8">
<title>bla bla ...</title>
<meta name="description" content="blabla ...">
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/load_content.js"></script>
</head>

<body>
<header>
</header>
<nav>
</nav>
<div id="lang_select">
</div>
<section>
<dynamic>
</dynamic>
</section>
<div id="footer_container">
<footer>
</footer>
</div>
</body>
</html>
############################################################
js/loadcontent.js:
==================================================================
$(function() {
var language = "en";
var dynamic = $("dynamic")
dynamic.load( language + "/" + "content/home.html");
});

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

home.html:
==================================================================
<html lang="en">
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="home_load.js"></script>
</head>
<body>
<div id="news">
</div>
<div id="newest_pics">
</div>
</body>
</html>
############################################################
homeload.js:
==================================================================
$(function() {
var news = $("#news");
news.load("news.html");
});
############################################################
 
Hi,

puh!

Ich habs jetzt mal irgendwie hingebastelt, hoffe das passt so.

Erstmal meine Verzeichnis-Struktur:
Code: 
|--css
|  `--main.css
|--en
|  `--content
|     |--home.html
|     `--news.html
|--js
|  `--jquery-1.3.2.min.js
`--index.html

index.html
HTML: 
<html lang="en">
<html>
	<head>
		<meta charset="utf-8">
		<title>bla bla ...</title>
		<meta name="description" content="blabla ...">
		<link rel="stylesheet" href="css/main.css">
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	</head>
	<body>
		<header>
		</header>
		<nav>
		</nav>
		<div id="lang_select">
		</div>
		<section>
			<div id="home">
			</div>
		</section>
		<div id="footer_container">
			<footer>
			</footer>
		</div>
		<script>
			var language = "en";
			var home = $("#home");
			home.load(language + "/content/home.html");		
		</script>
	</body>
</html>

home.html
HTML: 
<html lang="en">
<html>
	<head>
		<meta charset="utf-8">
		<title>bla bla ...</title>
		<meta name="description" content="blabla ...">
		<link rel="stylesheet" href="css/main.css">
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	</head>
	<body>
		<div id="news">
		</div>
		<div id="newest_pics">
		</div>
		<script>
			var language = "en";	
			var news = $("#news");
			news.load(language + "/content/news.html");
		</script>
	</body>
</html>

news.html
HTML: 
Ganz wichtige News...

PS: die Formatierung hebe ich mit
[code][/code]
bzw.
[code=html][/code]
gemacht.
 
ok es scheint jetzt so zu klappen - ich werde jetzt mal alles herumprobieren möchte mich aber wirklich herzlichst für deine mühe bedanken!

weißt du nur was ich falsch gemacht hatte?

wieso hatte es nicht geklappt wenn ich die scrips als *.js datei eingebunden hatte?
lg neewby
 
Hi neewby,

du hattest keinen Denkfehler, es ist einfach nur wahnsinnig mühsam alles zu testen und zu schauen ob es überhaupt aufgerufen bzw. referenziert wird.

Das Hauptproblem war das oft nicht klar ist wie die Pfade sein müssen.
("index.html" oder "../../index.html", "en/content/news.html" oder "news.html" und so weiter)

Außerdem werden Scripte, die über den header eingebunden sind, leider vor dem laden des Dokuments ausgeführt!
Also kennt der Browser zu dem Zeitpunkt ein div mit id="news" und ähnliches noch gar nicht.
Wenn du trotzdem externe Scripte machen willst, pack deinen Code einfach in:
Javascript: 
$(document).ready(function() {
    // ...
});

Wenn es ein bisschen einfacher/logischer/robuster werden soll würde ich PHP empfehlern.
Kannst du das?
Kann dein Server das?

Egal ob jQuery oder PHP, ich kann dir die Video-Tutorials von thenewboston nur empfehlen.

Gruß javaDeveloper2011
 
Ja mein Server kann PHP ( das ist gerade das andere Projekt an dem ich arbeite ... aber naja eines nach dem anderen - bzw als ich bei dem einen nicht weitergekommen bin hab ich mal das andere zwischendurch gemacht ...)

mit dem Code javascript:
1
2
3
$(document).ready(function() {
// ...
});


hab ich es noch nicht getestet aber ich habs jetzt ein bisschen umgebaut - habe es auch geschafft die javascripts aus der html rauszunehmen und als eigene *.js files in den ordner js gepackt und richtig referenziert ...

ja anscheinend sollte man wenn man nicht mehr weiterkommt wirklich von vorne nach dem baukastenprinzip das ganze neu machen und nciht zeile für zeile neu testen aber bereich für bereich ...und wenn es ganz problematisch ist auch zeile für zeile ....


die page ist noch am anfang aber wenn sie fertig ist (was noch ein bisschen dauern wird) dann werde ich es auch hier mal publik machen incl den ganzen problem und lösungen die während des aufbaus entstanden sind ..
danke lg neewby
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück