AJAX: Pagina inladen en DIV met goede content laden
Ik ben bezig met een website waar ik AJAX gebruik om content in te laden.
Onderstaande code gebruik ik daarvoor. Heb deze als ik het goed heb ook via deze website gevonden.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!--BEGIN LOAD DIV-->
<script>
function loadContent(url)
{
var xmlRequest = null;
if(window.XMLHttpRequest)
xmlRequest = new XMLHttpRequest();
else if (window.ActiveXObject)
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
xmlRequest.onreadystatechange = function()
{
if(xmlRequest.readyState == 4)
{
if(xmlRequest.status == 200)
document.getElementById("leftcol").innerHTML = xmlRequest.responseText;
else
alert("Error: " + xmlRequest.status);
}
}
xmlRequest.open("GET", url, true);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlRequest.send(null);
}
<!--EINDE LAAD DIV-->
<script>
function loadContent(url)
{
var xmlRequest = null;
if(window.XMLHttpRequest)
xmlRequest = new XMLHttpRequest();
else if (window.ActiveXObject)
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
xmlRequest.onreadystatechange = function()
{
if(xmlRequest.readyState == 4)
{
if(xmlRequest.status == 200)
document.getElementById("leftcol").innerHTML = xmlRequest.responseText;
else
alert("Error: " + xmlRequest.status);
}
}
xmlRequest.open("GET", url, true);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlRequest.send(null);
}
<!--EINDE LAAD DIV-->
Zoals je ziet wordt de leftcol div gebruikt om de content in te laden.
Dit werkt naar behoren als je op de juiste pagina bent. Een voorbeeld:
Op de "over ons" pagina (overons_index.html) wordt in de leftcol een korte tekst geladen. Aan de rechterkant (rightcol) staan een viertal links naar een tekst over "De Branche" bijvoorbeeld. De juiste pagina wordt door bovenstaande code geladen. Ik roep deze aan via:
javascript:loadContent(branche.html')
Nu staat er echter op de producten pagina (producten_index.html) ook een link naar diezelfde branche pagina. Nu kan ik deze natuurlijk makkelijk inladen via bovenstaande code door te linken naar "overons/branche.html".
Echter dient hij juist de overons_index.html pagina te laden en dan direct de leftcol te vullen met branche.html.
Is dat met dezelfde code haalbaar? Zo ja hoe kan ik dat het beste aanpakken?
Mvg,
Gerben van Erkelens
EDIT: 19-2-09:
Ik heb eveneens geprobeerd om het via de url al door te geven. Echter heeft dit ook niet het gewenste effect. Kan iemand mij vertellen of het via javascript uberhaupt wel mogelijk is?
Gewijzigd op 01/01/1970 01:00:00 door Gerben van Erkelens
Gelieve Niet Bumpen::
Twee of meer keer achter elkaar in een topic posten heet bumpen. Bumpen is pas na 24 uur toegestaan en kan een reden zijn voor de admins en moderators om een topic te sluiten. Gebruik indien nodig de 
knop om je tekst aan te passen.
SanThe.
knop om je tekst aan te passen.SanThe.
Gewijzigd op 01/01/1970 01:00:00 door Gerben van Erkelens
Het is juist de bedoeling dat hij als het ware eerst pagina 1 laad en na het laden hierna meteen pagina 1b inlaadt.
even voor de duidelijkheid:
Normaal in PHP zou ik zoeits doen als, overons.php?page=punt1. Echter werkt de website die ik nu aan het wijzigen ben met javascript:loadContent. Ik kan hier echter niet voor zorgen dat hij dan meteen ook punt1 laad zonder PHP.
Gewijzigd op 01/01/1970 01:00:00 door Gerben van Erkelens
Gerben van Erkelens schreef op 06.03.2009 16:06:
Dan is het toch gewoon exact hetzelfde als op die van Nettuts? Als je de animatie er niet bij wilt kan je dat er nog eventueel vanaf slopen.Het is niet zo dat hij na het laden van pagina 1 even wacht en dan in 1 keer pagina 2 laad.
Het voorbeeld heeft een aantal links op de index pagina staan. Als je daar op klikt dan laadt hij pagina 1 in een div of iets dergelijks in. Echter stopt het daarna.
Ik wil nu juist dat nadat hij het laden van pagina 1 in de index pagina meteen pagina 2 inlaad in een div van pagina 1.