Question

I am trying to create a carousel that contains 7 days with items under each day. When the next button is pressed jquery looks for the last span element of the form <span class="date">DATE</span>, grabs the value and passes it to the server to grab the next 3 entries. Those entries are then appended to the <ul class="week"> element and the whole 7 days slides to the right by 3 increments. My first problem is after the first click jquery doesnt seem to see the dynamically generated content and just sends the initial date value to the server, making it repeat those 3 dates over and over. Second problem is after clicking for long enough it just stops generating new content and fails to add content to the end, even though the server will still spit out html for those days.. I am a beginner at this and may not have the best practice figured out. Here is my relavant code:

        $('.next').click( function() {
    var date = $(".date").filter(':last').text()  //grab the last date class and parse into url to send to server 
    $.get('/log_entries/ajaxdate/'+date, function(data) {
      $('.week').append(data);
    });
    $('.test').animate({left: '-=272px'}, 500);

});

Okay first problem solved, the data sent back from the server did not contain the span element around the date, the dates now increase correctly thanks @RoccoC5

I still end up running out of entries randomly once I get high enough, in this case 2011-10-26 when starting at 2011-08-15.

Here is the code sent back from server when log_entries/ajaxdate/2011-09-12 is loaded:

<li class = "entry"><span class="date">2011-09-13</span> 
</li> 
<li class = "entry"><span class="date">2011-09-14</span> 
</li> 
<li class = "entry"><span class="date">2011-09-15</span> 
</li>

Answer 1

If the response is pure HTML, you should convert it to DOM elements, using $(data):

$.get('/log_entries/ajaxdate/'+date, function(data) {
    $('.week').append($(data));
});

or work with innerHTML, just an example:

var jweek = $('.week');
jweek.html(jweek.html() + data);

You should also use .closest() and .find() to make sure you work with one carousel and do not select the other .data or .next elements from the page:

<div class="carousel">
    <ul class="week">
        <li class="entry"><span class="date">2011-08-16</span></li>
    </ul>
    <a href="..." class="next">Next</a>
</div>

$('.carousel .next').click( function() {
    // find the parent .week and then .date inside of it
    var date = $(this).closest('.week').find('.date:last').text();
    ...
 });

Note that .filter(':last') can be compressed into the previous selector.