treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Ajax article posts

  • Hey, guys. To start off, I really didn't want anyone to see the new version of my site just yet so I removed a bunch of content to show you my issue.

    I have a News page that shows the latest 3 posts. If I have more than 3 posts, an arrow shows for you to click to see the older posts. Overall, I'm looking to use Ajax to slide in those posts when clicking the arrow instead jumping to site.com/news/page:2. Basically I want it to act like a slideshow when clicking the arrow. However, would it be possible to have a similar pagination like that so it's linkable?

    Does this make sense?

    Link Removed

    Note: There may be some alignment issues due to not loading the webfonts in.

  • Do you mean you want the URL to change when clicking on the arrow? That would then make it linkable.

  • Yes & no. Realistically you'd have to use hashbang urls - but you could use HTAccess to rewrite urls.

  • I would use history.pushState rather than hashbangs. That would work better with JS disabled and with linking.

  • @rosspenman @AndyHowells You're referring to history.js?

    I'm using Kirby and saw this post on their forum (see first repy) in response to your second article on this topic.

    http://getkirby.com/forum/general/topic:155

    What I'm concerned about is it Ajaxing my other pages. Would I have to write an if statement to only load the script on a certain page?

  • Yup. You'd use an if statement to make sure it only AJAXed certain links. Or, alternatively, make your entire site AJAX!

  • history.js isn't necessary, but if you want better browser support, you can use it.

  • @rosspenman I actually tried Ajaxing my site initially but didn't want to go that route. I used this plugin but somehow completely forgot about it. I think I'll try it first since it's quite easy to implement.

    Thanks for your help. I'll post back if I get it working.

  • What the... http://chrisburton.me/dev

    Why is it loading my other pages instead of just the articles? I wrapped the articles with a div (.ajax) and called that in the jQuery but it's acting as an iframe.

  • I believe what I have to do is use .load() instead. I assume I just use the arrow link for the URL.

    http://stackoverflow.com/a/6506947/938664

  • I'm not sure to understand your problem. If you're simply looking for a pagination system which doesn't bloat the URL, there are plenty of them. I personally use jQuery Pajinate.

    However I might be off topic.

  • @HugoGiraudel I am trying to use Ajax for my blog posts. I'd like them to slide across the page (like a slideshow) when clicking the pagination arrows. I hope that makes it clearer.

  • It looks like you've got it working now?

  • @TheDoc above I posted that if you go to the News page and then try to go to a different page, it acts as an iframe loading the entire site in that little section.

  • What if I wrapped the content I need to load within a div .ajax

    e.g.

      <div class="ajax">
          <article>
              <p>some content</p>
          </article>
    
          <article>
              <p>some content</p>
          </article>
    
          <article>
              <p>some content</p>
          </article>
      </div>
    

    From there, I just call to .load() the children of .ajax or perhaps .ajax altogether on a click event.

    I'm not sure if this will work. I've never worked with Ajax from scratch before.

  • If you want to load the article without affecting anything other than <div class='ajax'>, I would suggest to use JSON:

    var startIndex = 0;
    $('button').on("click", function() {
        startIndex++;
        $.ajax({
            url: 'json-feed-url?start-index=' + (startIndex*3),
            type: 'get',
            dataType: 'jsonp',
            success: function(data) {
               var skeleton = "";
    
                // proccess...
    
               $('.ajax').append(skeleton); // append the processed data
    
            },
            error: function() {
                alert('Error loading feed!');
            }
        });
    }).trigger("click");

    There's should be some JSON index parameters that can be used to load the data gradually.

    It's just, I don't know about the JSON in Wordpress (or Kirby?). I used to handle Blogger JSON.

    Edit: Sorry, so it's already working. Just ignore this answer.
  • @Hompimpa Correct, Ajax is technically working. However, the functionality is not correct. Above I stated that when you go to the homepage (/dev), click on one of the arrows and then click on About or Find at the top, those pages will load into that section where my articles are.

  • I believe the problem is that Ajax is targeting ALL anchor links instead of my pagination links.