PDA

Volledige versie bekijken : externe html-content in pagina laden


vyaene
%Europe/Berlin %609 %2010, 14:37
Hoi iedereen,

Ik ben eens wat bezig aan het experimenteren met jquery. Maar ik ben plots op een probleempje gestoten waar ik nu toch al een paar uurtjes op aant zoeken ben.

Ik probeer gewoon een statische (test)website wat aan te passen zodat deze dynamischer wordt, en ik bepaalde tags kan hergebruiken.

Ik heb dus één index.htm aangemaakt, en enkel de content leeggelaten. Deze probeer ik dan in te laden via een externe htm-pagina. vb. over mij.
Dit lukt goed, en alles wordt weergegeven. Echter zie je in de uitgevoerde broncode deze html-tags nog niet staan, waardoor dat hij mijn css stijl natuurlijk ook niet uitvoerd.

Weet er iemand wat je kan doen zodat hij de html-tags ook effectief in je pagina zet (zoals bij php het geval is).

Dus dit is mijn index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles/screen.css" type="text/css" rel="stylesheet" media="screen"/>
<script type="text/javascript" src="lib/jquery/jquery-1.4.2.js"/>
<title>Stagewebsite - Sebastian Vyaene</title>
<script type="text/javascript">
$(document).ready(function(){
$("#content").load("includes/pages/student.htm");
$("a").click(function(){
/*alert($(this).attr("name"));*/
$("#content").load("includes/pages/" + $(this).attr("name") + ".htm");
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li><a href="#" name="student" title="Persoonlijke gegevens">Sebastian</a></li>
<li><a href="#" name="bedrijf" title="Bedrijfsgegevens">bedrijfgegevens</a></li>
<li><a href="#" name="projectomschrijving" title="Projectomschrijving">Project</a></li>
<li><a href="#" name="planning" title="Planning">Planning</a></li>
<li><a href="#" name="verslag" title="Verslaggeving">Verslag</a></li>
</ul>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>


En dit is zo een externe pagina die ik aangemaakt, en inlaad wnnr op de link is geklikt. vb. student.htm

<h1>Personalia</h1>
<p>Naam: naam</p>
<p>Geboortedatum: datum</p>
<p>Adres: adres</p>
<p>GSM:gsm</p>
<p>Geslacht: geslacht</p>
<p>Emailadres:
<ul>
<li>School: email</li>
<li>Privé: email</li>
</ul></p>
<h1>Curriculum Vitae</h1>


Edit:
Wanneer ik dus mijn website test, dan zie ik de inhoud wel enzo, maar gn css toegepast op de dynamisch toegevoegd content. Als ik dan mijn broncode bekijk zie ik dat hij zelf de html-code nt in de pagina heeft gezet. Dus hij voert blijkbaar dat scriptje uit, en toont het, maar zet het nt in die pagina, waardoor er ook gn css op uitgevoerd kan worden.
Iemand die dus weet hoe ik wel css kan uitvoeren op die dynamische inhoud?

Terror-web
%Europe/Berlin %676 %2010, 16:13
<link href="styles/screen.css" type="text/css" rel="stylesheet" media="screen"/>

Bovenstaande toevoegen aan je externe bestand..
Of je moet geen PHP kunnen gebruiken, anders zie ik geen reden om geen PHP Include te doen..

vyaene
%Europe/Berlin %629 %2010, 15:06
ik kan idd gn php gebruiken. Server ondersteunt het nt.
Vandaar dat'k het eens wou doen met jquery.

'k heb nu echter een ander probleempje:
Wnnr ik dus op een link klik, dan voert ie die load-methode uit, en laad zo'n externe pagina in.
Dit werkt allemaal perfect in chrome, safari, opera.
Maar in Internet Explorer en Firefox, nu net de 2 meest gebruikte browsers, werkt het niet...
Ik zij mijn webpagina, maar zonder de ingeladen externe pagina.
Wss dus die load die nt werkt... Maar wrm? of hoe kan je dat oplossen?

Tom.
%Europe/Berlin %466 %2010, 11:11
Kun je niet gewoon net als iedereen in zo'n situatie doet een AJAX scriptje pakken? JQuery heeft kant en klare stukjes AJAX uiteraard. :)

vyaene
%Europe/Berlin %609 %2010, 14:37
Het is ondertussen opgelost, twas iets zeer stoms die ik vergeten was.
Blijkbaar moest ik, om het te doen werken in Firefox en Internet explorer de close-tag volledig typen, en niet enkel afsluiten in de eerste tag.

Dus 't moest zo:

<script type="text/javascript" src="lib/jquery/jquery-1.4.2.js"></script>


en niet zo, zoals ik eerst had gedaan:

<script type="text/javascript" src="lib/jquery/jquery-1.4.2.js"/>