[MooTools] AJAX request per div

[RangedNeedles]

Hallo iedereen,

ik ben tegen een probleem gelopen dat ik al de hele dag probeer op te lossen door zoveel mogelijk voorbeelden te zoeken, maar helaas..

Omdat code meer zegt dan 1000 woorden, staat hieronder wat ik al geprobeerd heb.

HTML:

<div id="container">
Grote container
    <div id="content1" style="border: solid 1px #f00; margin-bottom: 5px;">
    blaat 1<a href="./script.php" id="klik1">Klik!</a>
    </div>

    <div id="content2" style="border: solid 1px #00f; margin-bottom: 5px;">
    blaat 2<a href="./script.php" id="klik2">Klik!</a>
    </div>

    <div id="content3" style="border: solid 1px #0f0; margin-bottom: 5px;">
    blaat 3<a href="./script.php" id="klik3">Klik!</a>
    </div>
</div>

Zoals je kan zien heeft iedere div een uniek ID, net zoals de tekstlink.
Het is de bedoeling om via een AJAX request, externe info weer te geven dmv PHP.
Hiervoor gebruik ik MooTools en - ook al was het wat zoeken - is dat me gelukt.

De code voor de AJAX request met behulp van MooTools:

JavaScript:

window.addEvent('domready', function() {
    $("klik1").addEvent('click', function(event) {
        event.stop();
        var req = new Request.HTML({
        method: 'get',
        url: $("klik1").get('href'),
        data: { 'do' : '1' },
        onRequest: function() {},
        update: $('content1'),
        onComplete: function(response) {y}
        }).send();
    });
    $("klik2").addEvent('click', function(event) {
        event.stop();
        var req = new Request.HTML({
        method: 'get',
        url: $("klik2").get('href'),
        data: { 'do' : '1' },
        onRequest: function() {},
        update: $('content2'),
        onComplete: function(response) {y}
        }).send();
    });
    
    // ...
    // Onmogelijk om voor iedere div die in m'n HTML zou staan,
    // een event te moeten toevoegen.
    // Het aantal div's verandert trouwens: ze worden ge-echo't(?) via een stukje PHP dat een MySQL database uitleest.
});

Maar het probleem zit in het feit dat ik tientallen, honderden div's (worden ge-output door PHP vanuit 'n database) kan hebben op mijn pagina.

Het aantal div's is dus dynamisch, terwijl ze toch allemaal 'n uniek ID moeten hebben opdat het script blijft werken. Dáar zit ik in de knoop mee. Bovendien is een 'class' gebruiken ipv. een 'id' ook niet de oplossing, denk ik, aangezien er per link maar één div 'geüpdatet' mag worden.

Ik heb ook 'n zipje gemaakt van de hele zooi zodat jullie zelf eens kunnen kijken hoe en wat. (*snip*)

Het kan zijn dat ik nu iets enorm eenvoudig over het hoofd zie - zeer waarschijnlijk wel -, maar na 'n hele dag zoeken ben je van niets meer zeker

Of als jullie wat keywords zouden kunnen vinden hoe ik dit probleem kan 'zoeken', is dat uiteraard ook welkom. Ik ben momenteel wat inspiratieloos..

Alvast bedankt

[ Voor 0% gewijzigd door RobIII op 26-08-2011 18:15 ]

[RobIII]

Ik denk dat je je eerst eens af moet vragen of je wel de juiste weg ingeslagen bent. Als je "honderden divs" hebt en je gaat voor elk van die div's een HTTP request naar je server sturen dan is 't waarschijnlijk weinig efficiënt (los van de enorme bak aan JS die je op de huidige manier moet gaan uitpoepen; dat zul je ook efficiënter met een loop oid. (zie ook event delegation) moeten doen).
[edit]
Ik zie nu net wel dat je pas de AJAX request bij een click-event stuurt; dan heb je in ieder geval niet "honderden requests" na een pageload maar pas na een click van de gebruiker. Dat scheelt wel.

PixelShooter schreef op vrijdag 26 augustus 2011 @ 18:11:
Ik heb ook 'n zipje gemaakt van de hele zooi zodat jullie zelf eens kunnen kijken hoe en wat. (*snip*)

Euh; nee. Als je hulp met code wil mag je (relevante snippets) delen door ze in dit topic te zetten. We zitten hier niet om je code te debuggen; dat mag je zelf doen. Als je je probleem "werkend" wil demonstreren dan maak je een testcase (met enkel en alleen relevante zaken erin, dus geen complete site/pagina met alles erop-en-eraan) en geef je een linkje naar die online testcase (zie ook Kan iemand even...?)

[ Voor 61% gewijzigd door RobIII op 26-08-2011 18:23 ]

[RangedNeedles]

RobIII schreef op vrijdag 26 augustus 2011 @ 18:16:
Ik denk dat je je eerst eens af moet vragen of je wel de juiste weg ingeslagen bent. Als je "honderden divs" hebt en je gaat voor elk van die div's een HTTP request naar je server sturen dan is 't waarschijnlijk weinig efficiënt (log van de enorme bak aan JS die je op de huidige manier moet gaan uitpoepen; dat zul je ook efficiënter met een loop oid. moeten doen).

Dat is te begrijpen, maar het is niet de bedoeling om telkens alle requests uit te voeren. Er moet enkel één request worden uitgevoerd als de bezoeker op zo'n link klikt, wat ook al niet veel voorkomt in mijn geval nu.

Ik had ook al gedacht aan 'n loop om dan telkens met 'n countervariabele dat id eentje te verhogen, maar dan zou ik op één of ander manier nog moeten te weten komen tot hoeveel ik moet loopen. En inderdaad, JavaScript is nu niet één van de snelste.

[RobIII]

Zie mijn edit/wijzigingen in voorgaande post

PixelShooter schreef op vrijdag 26 augustus 2011 @ 18:21:
Ik had ook al gedacht aan 'n loop om dan telkens met 'n countervariabele dat id eentje te verhogen

Mits de ID's altijd oplopend zijn that is. Maar je zou natuurlijk ook gewoon de DOM kunnen gebruiken om te bepalen welke ID's er zijn.

PixelShooter schreef op vrijdag 26 augustus 2011 @ 18:21:
maar dan zou ik op één of ander manier nog moeten te weten komen tot hoeveel ik moet loopen

Behalve de DOM gebruiken kun je ook nog iet doen als:

HTML:

<html>
...
...
<script type="text/javascript">
...
...
var lastid = <?php echo $myid ?>;
...

... Of je haalt 't laatste ID ook op met AJAX Of 1 van de andere wegen die naar Rome leiden; het zijn er duizenden

PixelShooter schreef op vrijdag 26 augustus 2011 @ 18:21:
En inderdaad, JavaScript is nu niet één van de snelste.

In dit geval gaat JS echt het probleem niet zijn, eerder de HTTP requests en roundtrips naar de server.

[ Voor 87% gewijzigd door RobIII op 26-08-2011 18:30 ]

[NMe]

JavaScript:

$('container').getChildren('div').each(function(el) {
    el.getFirst('a').addEvent('click', function(event) {
        event.stop();
        var req = new Request.HTML({
        method: 'get',
        url: event.target.get('href'),
        data: { 'do' : '1' },
        onRequest: function() {},
        update: event.target.getParent('div'),
        onComplete: function(response) {y}
        }).send();
    });
});

Niet getest, maar dat voegt in theorie dus een event toe voor elk van de divs in je container.

[RobIII]

NMe schreef op vrijdag 26 augustus 2011 @ 18:30:
Niet getest, maar dat voegt in theorie dus een event toe voor elk van de divs in je container.

Give a man a fish...

Anyway; ik zou eerder voor een fatsoenlijke event delegation gaan.

[NMe]

RobIII schreef op vrijdag 26 augustus 2011 @ 18:31:
[...]

Give a man a fish...

Soms krijg je dingen makkelijker verwoord in code dan in woorden.

Anyway; ik zou eerder voor een fatsoenlijke event delegation gaan.

Of op zijn minst de HTML herschrijven zodat de javascipt ook wat makkelijker kan, want ik heb nogal wat aannames in die code staan.

[RangedNeedles]

RobIII schreef op vrijdag 26 augustus 2011 @ 18:23:
Zie mijn edit/wijzigingen in voorgaande post


[...]

Mits de ID's altijd oplopend zijn that is. Maar je zou natuurlijk ook gewoon de DOM kunnen gebruiken om te bepalen welke ID's er zijn.

Hmm, had ik inderdaad nog niet aan gedacht..
Feit blijft dat ik met heel wat regels code zit

NMe schreef op vrijdag 26 augustus 2011 @ 18:32:
[...]

Soms krijg je dingen makkelijker verwoord in code dan in woorden.

[...]

Of op zijn minst de HTML herschrijven zodat de javascipt ook wat makkelijker kan, want ik heb nogal wat aannames in die code staan.

Dit werkt inderdaad zoals ik had gehoopt! Waarom was ik daar nu niet op gekomen? Misschien dat hele MooTools en AJAX eens wat beter bekijken. Ik hoopte dat ik zo'n zaken nooit ging nodig hebben omdat ik voornamelijk toch maar wat zit te prutsen voor mezelf, maar nu blijkt toch het nut ervan. Ik ga zeer zeker is kijken naar hoe de oplossing nu werkt, want dat 'give a man a fish...' story, is inderdaad de pure werkelijkheid.

Heel erg bedankt beiden! Ik ga maar eens het een en het ander opzoeken en de coderommel die ik heb gemaakt, opkuisen

[RobIII]

Ik wil je nogmaals wijzen op de event delegate; zeker op 't moment dat je "honderden div's" hebt is 't een stuk efficiënter om 1 "catch all" event te zetten dan op elke div een event (= honderden events). Dat is in ieder geval 1 ding waar ik me zeker even op zou concentreren.

Goed, als 't werkt werkt 't, maar toch...

[ Voor 8% gewijzigd door RobIII op 26-08-2011 18:51 ]

[RangedNeedles]

RobIII schreef op vrijdag 26 augustus 2011 @ 18:50:
Ik wil je nogmaals wijzen op de event delegate; zeker op 't moment dat je "honderden div's" hebt is 't een stuk efficiënter om 1 "catch all" event te zetten dan op elke div een event (= honderden events). Dat is in ieder geval 1 ding waar ik me zeker even op zou concentreren.

Goed, als 't werkt werkt 't, maar toch...

OK, is inderdaad misschien toch niet zo'n slecht idee. Gelukkig heb ik er ook al wat over gevonden, van MooTools zelf (http://mootools.net/docs/more/Element/Element.Delegation). Ik wist anders niet zelf waar te beginnen