As a user of the Internet, I enjoy slick looking features that help make my experience look cool and seem fast or seamless. A nice trick to include this type of functionality is to perform a transition of new content using jQuery’s $.animate() function.
Category: AJAX
-
jQuery: Global AJAX Events for Start, Stop, Complete, or Error
When your website contains a lot of AJAX requests using jQuery template and you want to add a global event at the start or finish of the AJAX request, e.g. add a spinning icon, or handle all AJAX errors in a particular fashion.
The jQuery library provides multiple events for ajax event handlers. This article will focus on ajaxStart and ajaxError.
-
Node.js – Ajax Pagination without the Pages
With my recent endeavours into Node, I thought that taking a fun article like this one – CakePHP 2-0 Ajax Pagination WITHOUT The Pages – would be a really fun experiment to see how difficult it would be to accomplish in Node.
At the end of the day, the logic is still the exact same, retrieve the items, determine the max length, calculate the number of pages, and then perform AJAX as well scroll down to fill in more content as-needed.
Leveraging the Express API and Jade templates, this is quite painless to implement into Node with jQuery template.
-
CakePHP 2-0 Ajax Pagination WITHOUT The Pages
As I promised in Creating AJAX Pagination WITHOUT The Pages, I have created a full CakePHP example of performing AJAX pagination without the pages. The goal of this article is to display news articles to a user. As the user scrolls down, we will dynamically load in additional content so they can continue to scroll and read. This example focuses on PHP but if you’re looking for Node.js tutorial I’ve also implemented this exact feature with Node.js as the server-side code.
One of our challenges is to not load too much or too little content. For more details on this, please review the Creating AJAX Pagination WITHOUT The Pages. Let’s begin. (more…)
-
Creating AJAX Pagination WITHOUT The Pages
You may have noticed some changes in the way a few websites work. For example, if you go to Google Images and do a search, there is no pagination (1, 2, 3, Next, Previous) anymore. Instead Google loads the images as you need them, e.g. when you scroll down. If you’re looking for more Node.js tutorial I’ve compiled an incredible list that will take you from a Node.js beginner to expert.
Another example is Facebook’s newsfeed. I read an excellent article a few months back on their developer blog about this design decision. By default, Facebook will only load a “full screen” of information with minimal scrolling which triggers a Javascript event. However, as soon as you start scrolling they begin to fetch and display more content. In the article, Facebook described this decision as a bandwidth saver. They found that a lot of people would navigate away from the newsfeed before ever scrolling down or only looking at the top content. By only showing 10-15 posts, they can keep the size of their newsfeed down oppose to loading 30+ posts that are never going to be read! File size can easily go down 100s of KBs per page view and when you’re talking about millions of page views per second, that’s a significant number. (more…)