JQuery Bei Scrollen Datensätze nachladen

Hallol, ich möchte gerne Datensätze in einem DIV mit overflow: auto und einer festen Höhe nachladen über AJAX. Bisher ist es mit dem nachfolgenden Code so, dass nur nachgeladen wird wenn man auf der Seite nach unten scrollt.

Wie muss man den Code verändern, dass wenn man in dem DIV runterscrollt, die Datensätzte geladen werden?

    $(document).ready(function() {
    start = 0;
    count = 5;
    for (var i = 0; i < 1; i++){
        loadcontent(); 
    }
});
 
function loadcontent() {
    $("div.loader").show();    
     
    $.ajax({
        type: 'get',
        url: '/includes/ajax.php',
        async: false,
        data: { start : start, count : count },
        success: function (html){
            if(html){
                $('.container').append(html);
                start = start + 5;
            }else{
                $('.end').html('<p>Keine weiteren Posts!</p>');
            }
        }
         
    }) 
 
    $("div.loader").fadeOut('normal');     
}
 
$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){       
            loadcontent();         
    }
});

Vielen Dank.

Answer 1

[GustavAT]

Es ist auch logisch, dass nur neu geladen wird, wenn du die Seite scrollst, da du den Eventhandler auch zum window hinzufügst. Stattdessen solltest du ihn aber zum div hinzufügen. Danach sollte scrollen im div das Event auslösen. So wie's jetzt ist wird wirklich nur auf scrollen im Fenster reagiert, da kannst du im div noch so viel scrollen, wie du willst.

Comments

[Dragon970]

Das ist mir schon bewusst, habe auch schon rumprobiert und z.B. windows durch #id ersetzt aber dann passierte gar nichts mehr.... wie muss ich das jetzt umändern?

Answer 2

[yerooke]

Hat dein DIV nun eine ID oder eine CLASS ???? Fehlerquelle bei dir?

Schau doch mal hier: http://jsfiddle.net/8D6xw/

Comments

[Dragon970]

Das DIV hat eine ID. Muss ich nicht einfach window durch #div ersetzen?

$('#div').scroll(function(){
    if ($('#div').scrollTop() == $(document).height() - $('#div').height()){       
            loadcontent();         
    }

[yerooke]

@Dragon970

Prüfe das doch einfach: An Stelle von deiner Funktion setzt du ein:

     console.log( $(this).scrollTop() );

Und schau in deiner Browserkonsole ob er was anzeigt!

[Dragon970]

@yerooke

In der Konsole wird 0 angezeigt...

[yerooke]

@Dragon970

Setze doch deinen Code auf http://jsfiddle.net/ speicher dort das ganze ab und poste mal den Link.

[Dragon970]

@yerooke

http://jsfiddle.net/3FkV3/

[yerooke]

@Dragon970

http://jasminko.de/gutefrage/

[Dragon970]

@yerooke

Vielen Dank!

Answer 3

[HorstSergio]

    type: 'get',
    dataType: 'html', //<-- dataType hinzugefügt
    url: '/includes/ajax.php',