[JS] problemen met .load() element

[T-!-M]

Beste tweakers,

Ik ben aan het spelen met jquery om er wegwijs mee te worden. Momenteel ben ik nog een leek op het gebied van javascript. Ik loop echter tegen een probleempje aan. Ik wil een soort menu-structuur bouwen met 3 kolommen.

<div id="wrapper">
<div id="column" class="column1"><a href="test.html">test</a></div>
<div id="column" class="column2">2 </div>
<div id="column" class="column3">3 </div>
</div>

test.html:
<a href="test2.html">test2</a>
test.html:
test

Ik wil een link die in kolom 1 geplaatst is open in kolom 2. En een link in kolom 2 openen in kolom 3. Hiervoor gebruik ik deze code;

<script>
$(function() {
$("#column.column1 a").click(function() {
$("#column.column2").load($(this).attr("href"));
return false;
});
$("#column.column2 a").click(function() {
$("#column.column3").load($(this).attr("href"));
return false;
});
});
</script>

Het lukt om inhoud in de tweede kolom te laden. De link die in kolom 2 geladen wordt werkt echter niet en kan ik dus niet in kolom 3 laden. Hoe kan dit?

My first guess; De html die ingeladen is staat niet in het native document waardoor de koppeling niet wordt 'gesnapt'. Hoe kan ik dit oplossen?

[chem]

https://api.jquery.com/on/

[Afvalzak]

T-!-M schreef op maandag 03 maart 2014 @ 10:04:
...
<div id="column" class="column1"><a href="test.html">test</a></div>
<div id="column" class="column2">2 </div>
....


$("#column.column2 a").click(function() {
$("#column.column3").load($(this).attr("href"));
return false;
});
});
</script>

Het lukt om inhoud in de tweede kolom te laden. De link die in kolom 2 geladen wordt werkt echter niet en kan ik dus niet in kolom 3 laden. Hoe kan dit?

My first guess; De html die ingeladen is staat niet in het native document waardoor de koppeling niet wordt 'gesnapt'. Hoe kan ik dit oplossen?

Kolom 2 is geen link en kan je dus niet aanroepen met $('#column2.column a') die 'a' bestaat immers niet.

[ Voor 36% gewijzigd door Afvalzak op 03-03-2014 10:12 ]

[T-!-M]

Afvalzak schreef op maandag 03 maart 2014 @ 10:10:
[...]

Kolom 2 is geen link en kan je dus niet aanroepen met $('#column2.column a') die 'a' bestaat immers niet.

In kolom 2 wordt test.hml ingeladen. In die test.html staat een 'a'. En die wil ik weer aanroepen om in kolom 3 in te laden.

chem schreef op maandag 03 maart 2014 @ 10:07:
https://api.jquery.com/on/

Als ik .on( "click", function() { gebruik wordt nog steeds kolom 2 ingeladen, maar kolom 3 niet. Dit is dus nog niet de oplossing. (wel interessant om de verschillende wegen naar Rome te zien)

[ Voor 100% gewijzigd door T-!-M op 03-03-2014 10:18 ]

[Afvalzak]

T-!-M schreef op maandag 03 maart 2014 @ 10:13:
[...]


In kolom 2 wordt test.hml ingeladen. In die test.html staat een 'a'. En die wil ik weer aanroepen om in kolom 3 in te laden.


[...]

Ah, beetje te snel gelezen

[chem]

T-!-M schreef op maandag 03 maart 2014 @ 10:13:

Als ik .on( "click", function() { gebruik wordt nog steeds kolom 2 ingeladen, maar kolom 3 niet. Dit is dus nog niet de oplossing. (wel interessant om de verschillende wegen naar Rome te zien)

En toch zou het de juiste oplossing moeten zijn.

Probeer eens:

JavaScript:

$(document).on('click', 'a', function() { alert(this.href);});

[gitaarwerk]

Misschien moet je return false sowieso even weghalen.

daarnaast wat je zou kunnen doen is je script iets anders neerzetten.

code:

$("#column.column1").on("click", "a", function(event) {
event.preventDefault(); 
$("#column.column2").load($(this).attr("href"));
});

Wat chem zegt misschien nog beter.. op window zetten (toch?? niet op document? iirc).
Je kan dan je event bubbeling beter afhandelen op hoger niveau, en als je wat nieuws laad, hoef je niet opnieuw je events erop te zetten.

Op lager niveau werkt wat ietjes sneller, maar dan krijg je dat dus

[ Voor 34% gewijzigd door gitaarwerk op 03-03-2014 10:38 ]

[T-!-M]

chem schreef op maandag 03 maart 2014 @ 10:35:
[...]

En toch zou het de juiste oplossing moeten zijn.

Probeer eens:

JavaScript:

$(document).on('click', 'a', function() { alert(this.href);});

Interessant, ik krijg bij beide kolommen een 'alert'. Ik heb alles dubbel gecontroleerd op spellingsfouten maar deze heb ik niet gevonden. Ook bij het wisselen van kolommen blijft het probleem bestaan, alleen dan in een andere volgorde.

gitaarwerk schreef op maandag 03 maart 2014 @ 10:36:
Misschien moet je return false sowieso even weghalen.

daarnaast wat je zou kunnen doen is je script iets anders neerzetten.

code:

$("#column.column1").on("click", "a", function(event) {
event.preventDefault(); 
$("#column.column2").load($(this).attr("href"));
});

Wat chem zegt misschien nog beter.. op window zetten (toch?? niet op document? iirc).
Je kan dan je event bubbeling beter afhandelen op hoger niveau, en als je wat nieuws laad, hoef je niet opnieuw je events erop te zetten.

Op lager niveau werkt wat ietjes sneller, maar dan krijg je dat dus

Ha, dit werkt! Mooimooi. Waar lag dit nou aan? Had ik het beter moeten uitsplitsen?

[gitaarwerk]

Persoonlijk denk ik (niet geprobeerd) dat het aan return false lag. Ook als je een href erin zet, dat je al gelijk naar de url misschien gaat... ik weet niet hoe je daadwerkelijke html eruit ziet, maar met click events is het altijd wel handig om preventDefault(); mee te geven.

Ik weet niet wat je ambities zijn met bouwen verder, maar als je wilt snappen wat je doet, start misschien met javascript zelf. Jquery is prima als je goed cross-browser wilt werken, maar de basis even leren is beter. Sowieso hoe events werken en basiskennis objecten / functies is handig. Hoeft ook niet zo enorm uitgebreid te zijn om te leren

[8088]

Valideer je HTML ook, je huidige opzet is ongeldig.

[gitaarwerk]

Overigens kleine opmerking met html validatie. 't is leuk,... maar gebruik het niet meer als richtlijn ipv keiharde waarheid.

[Bosmonster]

T-!-M schreef op maandag 03 maart 2014 @ 10:51:
[...]

Ha, dit werkt! Mooimooi. Waar lag dit nou aan? Had ik het beter moeten uitsplitsen?

Wat jij nodig had was event delegation (en dat is wat die on-method op deze manier doet). Als je daar wat op Google't dan snap je waarschijnlijk ook wel waar je probleem zat

[C0rnelis]

chem schreef op maandag 03 maart 2014 @ 10:35:
[...]

En toch zou het de juiste oplossing moeten zijn.

Probeer eens:

JavaScript:

$(document).on('click', 'a', function() { alert(this.href);});

Hierop inhakend: http://jsfiddle.net/64TUQ/

Er zijn simpelweg een aantal methodes om hier 'a' te binden aan het 'click'-event

JavaScript:

// (1)
$('body a').click(function(event) { });

// (2)
$('body a').on('click', function(event) { });

// (3)
$('body').on('click', 'a', function(event) { });

In situatie (1) bind jQuery het 'click'-event aan alle a-elementen in de body tag die het op dit moment kan vinden in de DOM (dit zijn alle a-elementen die vóór dit script in de DOM staan, of ook die a-elementen ná dit script wanneer je bijvoorbeeld plaatst in een $(document).ready-constructie.

Situatie (2) is hier gelijk aan situatie (1). Lees ook de gelinkte documentatie:

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.

Ongeacht het gebruik van 'on' in (2) omvat 'body a' niet de elementen die later worden injecteert met 'load' en daarom heeft het op deze manier geen meerwaarde.

In situatie (3) bind jQuery het 'click'-event aan het body-element en wanneer een click-event 'propagate' vanuit een willekeurig element (later geinjecteerd of al direct aanwezig in de DOM) wordt gekeken om het origin-element overeenkomt met de selector die je hebt opgegeven met: $('body').on('click', 'a', ....

Als je bijvoorbeeld deze propagation voorkomt, zal je zien dat het event niet meer aankomt bij het body-element: http://jsfiddle.net/64TUQ/1/

[AvAars]

.load() voert een AJAX Request uit... en je kan pas dingen uitvoeren op de inhoud van die request als de HTML is ingeladen, terwijl jouw .click op kolom twee al gelijk wordt toegepast (als de HTML dus nog wordt geladen)
Om iets uit te voeren zodra de request is ingeladen heb je de 'complete' callback dus zoiets zou moeten werken:

JavaScript:

$(function() {
    $("#column.column1 a").click(function() {
        $("#column.column2").load($(this).attr("href"), function() {
            $("#column.column2 a").click(function() {
                $("#column.column3").load($(this).attr("href"));
                return false;
            });
        });
        return false;
    });
});

[ Voor 2% gewijzigd door AvAars op 09-03-2014 00:54 . Reden: return false; toegevoegd ]

[_Thanatos_]

@AvAars
Aah, de callback-manier, voor iedereen makkelijk begrijpbaar... Totdat je 73 niveau's diep gaat, dan zijn die promises en event delegations opeens een stuk fijner

[KoenvE]

In je html gebruik je hetzelfde ID voor iedere column die je hebt. ID's moeten uniek zijn en zijn bedoeld om een specifiek element aan te duiden. Gebruik de class voor elementen die je wilt groeperen. Je moet dus de id's met de classes wisselen.

HTML:

<div id="wrapper">
<div id="column" class="column1"><a href="test.html">test</a></div>
<div id="column" class="column2">2 </div>
<div id="column" class="column3">3 </div>
</div>

Moet zijn:

HTML:

<div id="wrapper">
<div id="column1" class="column"><a href="test.html">test</a></div>
<div id="column2" class="column">2 </div>
<div id="column3" class="column">3 </div>
</div>

[ Voor 19% gewijzigd door KoenvE op 12-03-2014 22:58 ]

[gitaarwerk]

Events hoger in de dom neerzetten. Hoe dan ook bubbelt je event in een circle (vandaar dat ze het een event loop noemen ). Zo hoef je ook geen callback te geven en zo 'n hell te creeren.

[R4gnax]

gitaarwerk schreef op zondag 16 maart 2014 @ 09:43:
Events hoger in de dom neerzetten. Hoe dan ook bubbelt je event in een circle (vandaar dat ze het een event loop noemen ). Zo hoef je ook geen callback te geven en zo 'n hell te creeren.

Jouw uitleg van de terminologie raakt kant noch wel.

Een event baant zich eerst een weg naar beneden van de document root naar het getroffen element. Dat heeft de capturing phase. Daarna baant het zich een weg terug naar boven en dat heet de bubbling phase.

Het phenomeen "event loop" heeft helemaal niets te maken met een 'lus' of 'cirkel' die gevormd zou worden door de capturing/bubbling phase van een DOM event.

De naam slaat op het feit dat event-driven programma's in de basis gestoeld zijn op een simpele oneindige lus in de programma code waarbinnen feitelijk niets anders wordt gedaan dan kijken of er een nieuw event is, dat afhandelen en vervolgens een paar milliseconden yielden aan het OS alvorens opnieuw te kijken of er een nieuw event is aangekomen. (Het is in de realiteit vaak meer complex, maar dat is het basis-idee.) Zie ook daarop lijkende termen zoals "main game loop" voor video games.