[jQuery] dynamische inhoud div

[Verwijderd]

Ik wil op mijn website een div hebben met een dynamische inhoud. In de div wordt een html pagina weergegeven, en met 'next' en 'previous' knoppen kan er dan als het ware in de tijd gebladerd worden zoals je dat vaak ziet bij bijvoorbeeld blogs.

Misschien heeft iemand hier een beter idee, maar hoe ik dit zelf had bedacht was het geven van een bepaald opvolgnummer aan de html pagina's die in de div weer worden gegeven.
Dus bijvoorbeeld de posts uit week 1 worden w1.html, de posts uit week 2 worden w2.html, et cetera.
Ik dacht dan een jQuery script te laten checken welke html er op dit moment geladen is, om vervolgens afhankelijk van de knop waarop geklikt wordt een pagina verder of pagina terug te gaan.

Dus wat mij lijkt is dat er dan een string teruggekoppeld moet worden met de src van de html in de div, daarvan moet een substring gemaakt worden met alleen de naam van het document. Het volgummer zet je om in een int, je telt er 1 bi jop of trekt er 1 vanaf (afhankelijk van de knop waarop gedrukt is), je zet het terug om in een string, en gebruikt die string vervolgens om de nieuwe html in te laden.

Ik heb alleen werkelijk geen idee welke methoden er precies hiervoor beschikbaar zijn. Ik kan het gewoon nergens vinden. Ik ben C# gewend, en ben wellicht een beetje verwend met alle code suggestions. Ik weet niet waar ik moet beginnen met zoeken.
Allereerst wil ik dus graag weten of dit uberhaupt de beste manier is om dit te doen, en zo ja, hoe dan Dus welke methoden e.d.

[Jey]

Als je de html dynamisch aanmaakt (php?) dan: $( '#next' ).on( 'click', function () { $( 'div' ).load( 'w2.html' ); } of iets in die trand.

Ik reageer wel erg snel zonder duidelijk antwoord, maar ik zou het zo aanpakken.

[ Voor 23% gewijzigd door Jey op 03-05-2012 19:50 ]

[Verwijderd]

nee wordt niet dynamisch aangemaakt, de html's zijn reeds aanwezig en gewoon statisch.
Het moeilijke of in ieder geval hetgeen dat ik niet kan vinden, is hoe ik 'uit kan lezen' welke html op dat moment actief is in de div, zodat ik van daaruit +1 of -1 kan gaan. Ik moet dus een soort $('div').html.src achtig iets hebben dat ik uit kan lezen.

[azerty]

je kunt geen volledige pagina in een div laden zonder een iframe*. van een Iframe kun je wel de src aflezen, dus op die manier kan het wel lukken. dan moet je gewoon de uitgelezen waarde van je src bewerken (de .html en 'w' vanvoor weghalen bijvoorbeeld) en dan heb je je waarde die je kunt ophogen.

* andere optie is bijvoorbeeld ajax request, maar dan plaats je de responsetext in de div.innerHTML. In dat geval zul je ergens op je html pagina een verborgen element moeten maken om de huidige waarde (2 voor w2 bijv.) op te slaan, en deze elke keer bij het opvragen/inladen van een nieuwe pagina per ajax request uit te lezen.

[ Voor 35% gewijzigd door azerty op 03-05-2012 22:08 ]

[HitDyl]

Ik zou het zo wie zo niet met jquery/javascript doen voor iets als een blog, want alles wat je laat inladen met javascript zal niet vind baar zijn op google. Google gebruikt namelijk (schamelijk) nog geen Javascript met hun zoekbots.
Wat betekent dat google een lege of vrijwel lege pagina krijgt en dat ook zo verwerkt in de zoek resultaten.

Maar de functies die jij zoekt zijn:

JavaScript:

$(selector).html('Vervangt alles in geselecteerd object');
$(selector).prepand('Zet data voor al het andere in geselecteerd object');
$(selector).append('Zet data na al het andere in geselecteerd object');

Eventueel kan je AJAX gebruiken om die paginas op te halen.

JavaScript:

function getPage(){ 
    $.ajax({ 
        url: "page.php?pagina=week1", 
        cache: false 
    }).done(function(data) { 
         $('#inlaaddiv').html(data);
    }); 
}

[Verwijderd]

@wsltedesign: jawel hoor, dat kan prima. Dat doe ik op dit moment namelijk al. Het enige dat nog niet lukt is het uitlezen van de url van de html pagina in de div.

@Hltdyl: Ik snap je code niet helemaal. Volgens mij is dit nog niet een code die uitleest welke html pagina er op dit moment open is, toch?
Het invoeren van een html in een div doe ik nu als volgt:

code:

$(document).ready(function() {
    $('#overzicht').load('articles/2012/w19.html', function(response, status, xhr) {
        if (status == 'error') {
            var msg = "Sorry but there was an error: ";
             $("#overzicht").html(msg + xhr.status + " " + xhr.statusText);
        }
    });
});

Het dynamisch maken van welke pagina er ingevoegd wordt, wil ik dus doen door in plaats van statisch daar een url naar een pagina te zetten, gewoon een var in te voeren bij de 'load' functie, en die var is dan weer gebaseerd op wat er uitgelezen is + 1 of -1.

ps. als je dit niet met javascript zou doen, waarmee dan wel?

[ Voor 19% gewijzigd door Verwijderd op 03-05-2012 22:21 ]

[azerty]

Verwijderd schreef op donderdag 03 mei 2012 @ 22:19:
@wsltedesign: jawel hoor, dat kan prima. Dat doe ik op dit moment namelijk al. Het enige dat nog niet lukt is het uitlezen van de url van de html pagina in de div.

*snip*

Je huidige code is niets anders dan een ajax request, maar dan op de manier van jquery, meer afgehandeld dan als je het zelf schrijft. Op de huidige manier is (zoals daarnet gezegd door mezelf) niet mogelijk om te weten wat er nu ingeladen is of niet.

En verder heeft HitDyl wel gelijk, als het voor een blog is ofzo, en de div waar je het in plaatst is standaard leeg, zal dit voor Google niet overdreven interessant zijn.

[Verwijderd]

Oke. Kortom, gewoon een iFrame gebruiken, probleem opgelost? Dan gaan we het maar niet moeilijker maken dan het is. Bedankt voor de feedback

[Barryvdh]

Waarom een iFrame?
En waarom uberhaupt ajax? Als je statische html pagina's hebt, waarom zet je er niet gewoon een link in naar de volgende/vorige pagina? Of is dat weer te simpel?

Verder zoek je dit denk ik? http://stackoverflow.com/...the-current-url-in-jquery (Eerste hit op google voor "jquery get url")
Is met jQuery, maar window.location.pathname kan natuurlijk altijd gewoon.

code:

$(document).ready(function() {
    var pathname = window.location.pathname;
});

[R4gnax]

HitDyl schreef op donderdag 03 mei 2012 @ 22:12:
Google gebruikt namelijk (schamelijk) nog geen Javascript met hun zoekbots.

*KUCH*

http://searchenginewatch....d-AJAXJavaScript-Comments

http://www.danclarkie.co....ascript-ajax-cookies.html
http://www.danclarkie.co....kies-its-complicated.html

Ze parsen dus wel degelijk stukken JavaScript en in het geval van de page preview functionaliteit wordt het ook uitgevoerd. Inclusief AJAX functionaliteit. Ook bepaalde bekende patronen (zoals Facebook comments) worden herkend.

[ Voor 20% gewijzigd door R4gnax op 04-05-2012 09:12 ]

[Jey]

Mijn antwoord geldt trouwens ook bij niet dynamisch aangemaakte html, het is nog steeds de beste oplossing naar mijn mening.

Google indexeert al jaren door JavaScript ingeladen content. Dus een iframe is ook vanuit seo standpunt gezien niet van toepassing.

[HitDyl]

R4gnax schreef op vrijdag 04 mei 2012 @ 09:06:
[...]


*KUCH*

http://searchenginewatch....d-AJAXJavaScript-Comments

http://www.danclarkie.co....ascript-ajax-cookies.html
http://www.danclarkie.co....kies-its-complicated.html

Ze parsen dus wel degelijk stukken JavaScript en in het geval van de page preview functionaliteit wordt het ook uitgevoerd. Inclusief AJAX functionaliteit. Ook bepaalde bekende patronen (zoals Facebook comments) worden herkend.

Ik heb een website die via AJAX zijn content ophaalt, en als ik die site op google zoek dan toont hij helemaal niks onder de titel enkel de hele kleine beetjes content die er statisch op staan.