1

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>
Graeme
  • 467
  • 7
  • 15
  • 1
    Can you add some sample markup so I can better understand what you're working with? Does the markup sent back from the server contain new `DATE` elements? – RoccoC5 Aug 16 '11 at 03:25
  • You are right I totally forgot to put my `` into the code sent back from the server. Still have the issue of the next button failing to generate new entries after a while. Added markup above, Thanks!! – Graeme Aug 16 '11 at 03:59
  • try `$(".week .entry:last-child .date")` and see if that works – James Khoury Aug 16 '11 at 04:31
  • Thanks, That also works but I still run out of entries if I click next enough... – Graeme Aug 16 '11 at 05:06

1 Answers1

0

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.

culebrón
  • 34,265
  • 20
  • 72
  • 110
  • This cleans it up but I still am running out of entries when I go far enough. Thanks for the code! Any ideas as to why it would stop loading new entries? Is there a maximum size of a list I am not aware about or somthing? – Graeme Aug 16 '11 at 15:23
  • No, there is none. I have no idea what goes wrong, this is a debugging job. Use Chrome Developer Tools, put breakpoints and see what events happen, what do not, whether the server sends the correct data, whether the event handlers run correctly. If you post that data, someone will be able to help you here. – culebrón Aug 16 '11 at 16:06
  • Okay using the developer tools I was able to find, looking at the network tab, that when calls get to the point where it stops adding entries the status/text column changes from 304/not modified too 200/OK This must be part of the issue but Im not sure why. What is weird is as I continue to click the next button the date continues to increase, meaning it must be seeing a `Date` element that I am not seeing, but the status has changed to 200 / OK – Graeme Aug 16 '11 at 17:21
  • Then the dates are added, but the CSS hides them. Analyze the source of the document. At this point, I think I've given you enough advice and it's your job to debug your application. Please accept the answer since I've given you the correct advice on jQuery. Thanks. – culebrón Aug 16 '11 at 18:05
  • Sweet, thanks man! Ill post back if I figure out why it is hidden, I dont really understand how to view the source of the dynamically loaded content, when I view source all I see are the entries that are loaded initially in the html. – Graeme Aug 16 '11 at 18:15
  • Click through the developer tools, they can show the ajax responses. – culebrón Aug 16 '11 at 18:24
  • It was a problem with the css! Fixed now, thanks so much for your help everyone! – Graeme Aug 17 '11 at 04:40