load more button mit ajax/jquery

  • Hallo zusammen.


    Ich bin dabei mich in jquery einzuarbeiten möchte mir einen "load more" -button erstellen, der dynamisch Inhalte in div- containern via ajax aus einer html- datei in meine index.html lädt wenn man auf ihn klickt.

    Also ich habe eine index.html mit den containern <div id="loadcontent"></div><div id="loadmore">Load more</div>  und ich habe eine content.html die in etwa so aussieht:

    Beim Aufrufen der Seite sollen die ersten drei divs in #loadcontent geladen werden. Das funktioniert mit $('#loadcontent').load('content.html .content:lt(3)');

    Jetzt aber sollen beim Klick auf "load more" die nächsten drei divs, also 4, 5, und 6, nachgeladen werden, usw. Eigentlich ist es das gleiche wie in diesem Fiddle , bloß dass die divs hier nur aus- und eingeblendet werden...

    Kann mir vielleicht jemand einen Tipp geben wie ich das ganze hinbekomme? Ich weiss nicht wie ich es schaffe, dass er die Inhalte zählt und weiss wie viel bereits geladen wurde und wie viel noch geladen werden kann, das ganze natürlich mit ajax load. :/

    Für Hilfe wäre ich dankbar.

  • Wenn ich nicht zufällig und unbeabsichtigt den Vorschautext zu deinem Beitrag gesehen hätte, hätte ich das völlig ignoriert wegen deines Nicks, der sowas von an Spam-Bots erinnert. ;)

  • Wenn ich nicht zufällig und unbeabsichtigt den Vorschautext zu deinem Beitrag gesehen hätte, hätte ich das völlig ignoriert wegen deines Nicks, der sowas von an Spam-Bots erinnert. ;)

    Keine Sorge, ich bin ein Mensch. :) Diesen Nick benutze ich seit Jahren, sodass ich ihn schon auswendig kann.

  • Dann mal was Konstruktives (hoffentlich) : Brauchst du die Container 4 ... x, bevor sie per AJAX nachgeladen werden? Ansonsten reduziert sich das Problem ja auf "immer die ersten 3".

  • Jav leider verstehe ich deine frage nicht ganz.


    beim aufruf der seite sollen automatisch 1 bis 3 geladen werden.

    beim klick auf load more sollen 4-6 nachgeladen werden. (ingesamt sind jetzt 1 bis 6 zu sehen)

    beim weiteren klick auf load more sollen 7-9 nachgeladen werden. (ingesamt sind jetzt 1 bis 9 zu sehen)

    usw.


    somit ließe sich deine frage mit "nein, ich brauche sie nicht bevor sie nachgeladen werden" beantworten.


    :)

  • Also, ich bin einen Schritt weiter.

    Code
    var countItem = 0;
    
    $('#more').click(function(){
        countItem ++;
        $('<div/>').appendTo('#loadcontent').load('content.html #' + countItem).hide().fadeIn(1000);
    });

    Allerdings ist es jetzt so, dass er die Elemente jeweils einzeln lädt.

    Hat jemand vielleicht eine Idee wie ich das hinkriege, dass er jeweils beim Klick drei Elemente der Klasse ".content" reinlädt?

  • Was spricht dagegen, es mal mit zusätzlichen


    countItem ++;

    $('<div/>').appendTo('#loadcontent').load('content.html #' + countItem).hide().fadeIn(1000);

    countItem ++;

    $('<div/>').appendTo('#loadcontent').load('content.html #' + countItem).hide().fadeIn(1000);


    zu probieren?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!