Grow your CSS skills. Land your dream job.

output data returned from ajax call in groups?

  • # June 21, 2013 at 6:40 pm

    Hi,

    I’m using jQuery 1.5.x

    I have a server-side query that I run on my page and it returns a list of 28 records in json format with a few fields in each row. I need to output 4 records from this query at a time within a div and maybe use an un-ordered list with some of the field values showing in each li tag. Then fade/transition to show the next 4 records. When it reaches the end, just cycle back around.

    I’ve found libraries that can show one link, one image or whatever at a time and there are fade effects, but I need to be able to show 4 records at a time and then show the next 4, etc. The effect are secondary for me right now I’d like to just start with something that does what I need and then I can work on transitions and other effects.

    How can I do this using jQuery’s $.ajax methods. I can get the data, but it’s the onSucess/callback handler where I’d like to output the json-formatted data in groups of 4

    Hope that makes sense.

    # June 22, 2013 at 6:09 am

    Look at the samples here http://api.jquery.com/jQuery.getJSON/ to generate elements from AJAX+JSON.

    I’d make a list with 7 items, each with a list with 4 items (28 total) and then use jQuery to fadeIn/Out the first list’s items like a carousel slider.

    I don’t have time today but if you need more help tomorrow I’m in.

    # June 24, 2013 at 3:38 pm

    The problem I’m having is total number of items varies. Maybe I should have mentioned that. The number of items in each group should always be 4, but the number of records will grow for sure. So in some cases during the cycle, the last list may have only 3 items if that makes sense.

    I get what you’re saying about grouping them so each time the next slide comes up it contains all the necessary “li” tags or whatever, just not sure how to do that piece.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".