> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/11-ajax-met-server-side-scripting/master-detailrelatie-met-load.md).

# Master/detailrelatie met load()

{% hint style="success" %}
★ 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.
{% endhint %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAY3DdnSSyV4U5lyxsl%2F-L9sHudqDsH2qtyjnDST%2Fbloemen1.png?generation=1524228004474822\&alt=media)

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:

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAY3DdnSSyV4U5lyxsl%2F-L9sHv-4A9et_fri_b5l%2Fbloemen2.png?generation=1524228004240440\&alt=media)

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.

{% hint style="success" %}
★ Bekijk vanuit de browser de broncode van de detailpagina.\
★ Bijvoorbeeld: <http://jquery3.test/ajaxServer/bloemenDetail.php?id=1>
{% endhint %}

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

{% hint style="success" %}
★ Open **ajaxServer/bloemenMaster1.html** en bekijk de broncode.
{% endhint %}

```javascript
$('#_ 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!

{% hint style="success" %}
★ 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>
{% endhint %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAY3DdnSSyV4U5lyxsl%2F-L9sHwHNemZyRnpCzTZv%2Fbloemen3.png?generation=1524228004505097\&alt=media)

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

{% hint style="success" %}
★ Voeg de code `$('#bloemInfo p:first').remove()` toe en test de pagina opnieuw.
{% endhint %}

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

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAY3DdnSSyV4U5lyxsl%2F-L9sHwnJ56bRXMbhJlFf%2Fbloemen4.png?generation=1524228004569862\&alt=media)