Using AJAX to mimic content slider?

[chrisburton]

Can anyone point me to some decent articles on using AJAX? Specifically for content that already uses pagination.

I’m trying to mimic the following jQuery slider that I believe Crocodillon made for me a while back: http://codepen.io/chrisburton/full/eEwoD

Dev site: http://chrisburton.me/dev

I’d like to do the above with AJAX instead of having to load all the articles on one page. Then use jQuery to create the slide effect. I’m thinking I would be beneficial to use the History API as well.

[dyr]

I’ve got some thoughts on this and some time this afternoon, would you care to chat? E-mail me at shawkdsn at gmail dot com.

[chrisburton]

Please share them here. I’d like to keep it here for reference if you wouldn’t mind.

[dyr]

The reason I didn’t want to paste here is because firstly I’m not an AJAX expert and the reply I had started was poorly organized and contained a mixture of pseudo-code and “real” code along with a bunch of questions.

There are a variety of ways you could accomplish this. A few questions for you:

1. What are you AJAXing against? With Kirby it’s likely to be a flat .html file, yes?

2. What is the exact behavior you desire? Do you want to AJAX load 3 articles at a time, or do you want to return all articles with 1 AJAXcall? Are you going to be using AJAX for all loaded data including pages, or just to load the articles? Knowing this will help me determine whether using the History API is overkill or not. You certainly CAN use it but might not need to.

3. How is your data paginated?

I’d think about passing the page number and returning a JSON object that represents the articles for the given page. Perhaps you already knew that, great!

Just found this link : http://getkirby.com/blog/json

EDIT: it appears you’re already using the Kirby blog api and you just need the proper AJAX call in order to get that data from blogapi.php

EDIT2: the link above has an example of Better Pagination by returning the current page and total pages from blogapi.php. also I think $.getJSON is deprecated in jQuery 1.10+ and you should use $.ajax({type: get}) or $.get to make the AJAX request.

E-mail me if you want to see my pseudo code or long-winded explanations of some approaches you might take.

[chrisburton]

The reason I didn’t want to paste here is because firstly I’m not an AJAX expert and the reply I had started was poorly organized and contained a mixture of pseudo-code and “real” code along with a bunch of questions.

The whole purpose of the forum is for others to comment and learn from, including yourself!

What are you AJAXing against? With Kirby it’s likely to be a flat .html file, yes?

Nope. Content is generated through PHP.

What is the exact behavior you desire? Do you want to AJAX load 3 articles at a time, or do you want to return all articles with 1 AJAXcall? Are you going to be using AJAX for all loaded data including pages, or just to load the articles? Knowing this will help me determine whether using the History API is overkill or not. You certainly CAN use it but might not need to.

I have pagination setup for my articles to show only 3 per page. What I’d like to do is use AJAX to load in the next set of articles (mimicking a slider) and update the URL in the address bar and the arrow URLs.

This will be the only AJAX calls on the site. Although, I wouldn’t care if only the main content area is AJAXed — leaving the header and footer the same.

How is your data paginated?

Content is paginated by showing 3 articles per page. The code is:

<?php if($articles->pagination()->hasPages()): ?>

    <nav class="pagination">  
      <?php if($articles->pagination()->hasPrevPage()): ?>

      <a class="l-arrow" href="<?php echo $articles->pagination()->prevPageURL() ?>">l</a>
      <?php endif ?>
      <?php if($articles->pagination()->hasNextPage()): ?>

      <a class="r-arrow" href="<?php echo $articles->pagination()->nextPageURL() ?>">r</a>
      <?php endif ?>

    </nav>
<?php endif ?>

I’d think about passing the page number and returning a JSON object that represents the articles for the given page. Perhaps you already knew that, great!

I’m not familiar with json to be honest with you. Also, that article you provided is very very old. Kirby has come a long way since then.

[dyr]

Good point.

Short of me actually downloading and setting up a Kirby site locally, is there anything you can do to educate me (briefly) on the Kirby bits that pertain to this particular problem?

In your php I would build up a results array and use json_encode before echo’ing it to the page (and thus the returned data from the ajax call.)

Is any of the info on http://getkirby.com/blog/json current? I don’t see any newer info regarding Kirby and json. I understand the pagination php snippet. Can you also show us the .php that gets the articles? It is there that we will want to build our return array before encoding as JSON.

The basic idea here is to write some JavaScript that will issue a GET request to your PHP file passing in a page number to fetch. Then your PHP will take that page number and go grab the articles and put them in an array. We also want to store the “next page URL” and “prev page URL” in the array before we encode it as JSON. We encode and return the data, then in our JavaScript we inject that data into the DOM where we want it and update the URL. In addition we will show/hide and update the hrefs of the next/prev buttons based on whether or not we returned a “next page URL” and/or “prev page URL.”

It seems that the data we need to return for each article is:

An ID (the article number)
Title
Pub Date

And the metadata we need with each request is:

Next Page URL
Prev Page URL

The JSON object might resemble:

{
"articles": [
    {
        "id": "1",
        "title": "SomeArticle",
        "date": "01152013"
    },
    {
        "id": "2",
        "title": "SomeOtherArticle",
        "date": "01232013"
    }
],
"pagination": {
    "currentPage": "/dev/page: 2",
    "nextPageURL": "/dev/page: 3",
    "prevPageURL": "/dev/page: 1"
}

}

Also if you’re like me and you’re unsure about nailing that perfect JSON syntax then by all means use a service like http://jsonlint.com/ !

Ramble ramble…. more thoughts to come.

[chrisburton]

Because I don’t really know that much about JSON, can you tell me the purpose of using it in this case rather than sticking with PHP? I apologize, I’m just a little confused as to why it is necessary.

[dyr]

To clarify: it’s not necessary, it’s just nice when working with Javascript / AJAX. It is by no means required. You could accomplish this without using JSON but not without using PHP in this case.

Returning JSON makes your life easier when you “handle” the response of the AJAX request because it is like a native format and requires no interpretation. In this case you want to return some data but you don’t want your PHP to be ‘opinionated’ about how to structure (mark up) the content. In addition you also want to request the metadata (current page, next page url, last page url) which does not need any markup.

In your AJAX you’ll have a ‘success’ or ‘done’ method that gets called when data is returned. Inside this method you would parse the JSON and build the next slide of the menu, inject the new URLs into the next/prev buttons, update the page URL, and trigger your animation.

Was that explanation helpful? I’m here to chat too if you change your mind :)

[chrisburton]

Can you give me some time? I’d like to do a bit of research on JSON to see if this is the route I’d like to take (pros vs cons). I do appreciate you sticking around to explain all the information above.

[dyr]

Sure, no problem.

I’d recommend just jumping in and seeing if you can’t get something working. Use your browser’s dev tools to see what’s being sent and returned in the AJAX requests/responses. AJAX/JSON is a great combo – really fun to use.

[dyr]

Also for anyone who finds this page at a later time: I mentioned above thinking that $.getJSON was deprecated in jQuery 1.10 but it is not.

http://api.jquery.com/jquery.getjson/

[shaneisme]

Just a side note to the conversation, you could always use json_encode in PHP to pass an array over to the front-end.

[Author]

Posts