Master/detailrelatie met load()

★ Open http://jquery3.test/ajaxServer/bloemenMaster1.html in een browser. (Indien u de pagina's op een externe server host, vervang dan localhost door uw eigen domein.) ★ Klik op één van de afbeeldingen.

Elke afbeelding op de hoofdpagina verwijst naar dezelfde detailpagina, enkel de parameter id=x is verschillend.

Het bestand ajaxServer/bloemenDetail.php bevat een PHP-script dat in functie van het id een bepaald gedeelte van de pagina toont. Voor alle id's groter dan 5 (of kleiner dan 1) verschijnt een foutboodschap. Bijvoorbeeld http://jquery3.test/ajaxServer/bloemenDetail.php?id=100 geeft:

We gaan de hoofdpagina zodanig aanpassen dat een deel van de detailpagina rechtstreeks op de hoofdpagina verschijnt. Een browser die geen JavaScript ondersteunt zal nog steeds de site op de klassieke manier kunnen bekijken. Ook zoekrobots, zoals Google, ondersteunen geen JavaScript, maar kunnen de site op deze manier nog volledig indexeren.

★ Bekijk vanuit de browser de broncode van de detailpagina. ★ Bijvoorbeeld: http://jquery3.test/ajaxServer/bloemenDetail.php?id=1

Het deel van de pagina dat we dadelijk op de hoofdpagina integreren, staat binnen <section id="bloemInfo">

★ Open ajaxServer/bloemenMaster1.html en bekijk de broncode.

$('#_ a').click(function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    $('#detail').load(url + ' #bloemInfo', function(){
        ...
    });
});

Het script werkt voorlopig niet omdat de selector op het click-event nog niet in orde is. Dit passen we dadelijk aan.

Binnen het click-event zorgt e.preventDefault() ervoor dat de echte links op de afbeeldingen niet meer werken. Op de derde lijn wordt de link van de detailpagina uitgelezen en vervolgens in de methode load() verwerkt. Vergeet niet het id #bloeminfo in de uiteindelijke link te verwerken, anders gaan we de volledige pagina inbedden!

★ Wijzig de selector $('#_ a').click(...) in $('#master a').click(...) en test het resultaat in een browser. ★ Let op: de pagina openen vanaf de webserver: http://jquery3.test/ajaxServer/bloemenMaster1.html

Enkel de link "Vorige pagina" is nog storend. Deze kunnen we makkelijk binnen de callback van load() verwijderen.

★ Voeg de code $('#bloemInfo p:first').remove() toe en test de pagina opnieuw.

$('#detail').load(url + ' #bloemInfo', function(){
    $('#bloemInfo p:first').remove();
});