Content veranderen dmv jquery/ajax

[macuz]

Hallo,

Ik ben bezig de programmering van een website waarbij ik tegen een probleem aanloop waarvan ik het antwoord na uren googlen en experimenteren niet kan vinden.

Ik heb bij de ontwikkeling van een website een header waar diverse content in wordt weergeven. Wat ik code-technisch nodig heb, is een manier om de content van div-a te veranderen in bijvoorbeeld een verborgen div-b op het moment dat ik op een link in deze div-a klik. Daarna moet je ook weer terug kunnen door binnen de content van div-b op een link te klikken welke content van div-b weer vervangt naar die van div-a.

Ter illustratie:


Ik heb gekeken naar diverse ajax/jquery mogelijkheden zoals hier en hier, maar waar ik dan tegenaan loop is dat de links om de content te laden niet in de content zelf geplaatst kunnen worden, ivm gekoppelde id's (vermoed ik).

Kan iemand mij adviseren in hoe ik dit op kan lossen?

Bedankt.

[Anoniem: 26306]

Dit is echt een no-go. Maak gewoon losse pagina's. Mensen zijn het gewend, het is eenvoudiger, beter voor zoekmachines, bookmarken, deeplinken, etcetera. Je zit op een verkeerd spoor.

[Anoniem: 327097]

Dan twijfel ik toch aan je zoekkunsten, je kunt gewoon met $(selector).html('html'); de innerHTML wijzigen, je kunt dit nog evt combineren met ajax.

Als dit teveel is zou je eens kunnen google op jQuery Tools en dan op de 1e website kijken naar: Scrolling Tabs

[macuz]

Bedankt voor je reactie!

Door je advies over de selector ben ik terecht gekomen bij {$('#target').load('extern.html #content');} welke prima lijkt te werken! Ik ga het proberen te implementeren en hoop dat het hiermee goed komt.

Ik post een update als het lukt. (voor toekomstige gebruikers)

[jw_moonshine]

met Ajax gaat dat niet zo 1,2,3 lukken, want als je nieuwe content inlaad dan staat deze niet in de dom dus kun je niet zomaar een click event koppelen aan een ingeladen element. Wat je dus kan doen is "gewoon" een simpele .hide() en .show() mbv jquery. Wat wel een nadeel is dat je bij de page load gelijk alles inlaad.
bijv:

JavaScript:

$(document).load( function() {
 $("a.volgende").click(function(){
  this.hide();
  volgendeId = this.attr("id")+1;
  $("div#"+volgendeId).show(); 
 });
});

ff uit de losse pols geschreven. Gaat ervan uit dat je x aantal divs hebt met een genummerd id. Als je dus op de link met het id volgende klikt dan laat die de volgende zien.

[ Voor 12% gewijzigd door jw_moonshine op 14-05-2011 15:17 ]

[Anoniem: 26306]

Oogkleppen op en gaan!

[macuz]

@Cheatah

Het effect wordt alleen toegepast op korte, eenzijdige content welke voornamelijk bestaat uit afbeeldingen. Deep-linking is dus niet heel belangrijk en vanuit de optiek van de dienstverlening is beleving (dus met effecten), vandaar dus deze keuze. Ik ben het met je eens dat SEO en linking een belangrijke rol spelen, maar deze krijgen genoeg aandacht op andere (content rijkere) onderdelen van de site.

@jwkanjer

Bedankt, maar het lijkt me inderdaad wel storend als alle content eerst een moment zichtbaar is. Bovendien lijkt deze oplossing te werken? http://tinyurl.com/6xbul5t (nog zonder effect)

[Manuel]

jwkanjer schreef op zaterdag 14 mei 2011 @ 15:13:
met Ajax gaat dat niet zo 1,2,3 lukken, want als je nieuwe content inlaad dan staat deze niet in de dom dus kun je niet zomaar een click event koppelen aan een ingeladen element.

Je kunt gewoon live events gebruiken met jQuery, zie ook:
http://api.jquery.com/live/
http://api.jquery.com/delegate/

Zolang je de events maar vooraf een waarde geeft is er niets loos en zal het gewoon werken.

Ik heb gekeken naar diverse ajax/jquery mogelijkheden zoals hier en hier, maar waar ik dan tegenaan loop is dat de links om de content te laden niet in de content zelf geplaatst kunnen worden, ivm gekoppelde id's (vermoed ik).

Doet mij denken aan een quote die hier ook wel eens wordt gezegd 'Assumption is the mother of all fuck-ups'. Niet vermoeden maar echt zeker weten waar het probleem zit.

[MueR]

Goed, ik denk dat je nu wel vooruit kan. Wanneer je tegen een concreet probleem op loopt zien we daar graag een topic over, maar dan met wat code. Dit is feitelijk een scriptrequest. Lees ook onze Quickstart nog eens door.