Twitter Style Load More Results with jQuery and Ajax. Create a Twitter-Like “Load More” Widget. Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script. Assumptions There are a few assumptions and notes that we're going into this system with: The server needs to be running PHP5 so that we can use PHP5's JSON functions.We'll be pulling database records from a WordPress "posts" MySQL table.
What's great about the code provided is that you may use it with any database system; all you'll need to do is modify the MySQL query and the JSON properties used by jQuery or MooTools.The client must support javascript.We're using MooTools 1.2.3 Core and More 1.2.3.1. This tutorial will feature an explanation of the MooTools javascript. The Plot Here's the sequence of events that will take place in our slick widget: Auto-saving with jQuery. Form Cloning jQuery Plugin.
How to setup Plugin Inclusion In order to use the plugin, you'll need to include the jQuery library, and the plugin file. This plugin being very small, you might prefer to copy its code inside one of your existing js file (it will save you the need to load an external file). Otherwise, just include the files as shown: /** jQuery Inclusion **/<script type="text/javascript" src="Path_to/jQuery.js"></script>/** Plugin Inclusion **/<script type="text/javascript" src="Path_to/jquery.formclone.js"></script> The Form Markup Then you can prepare your form markup.
The jQuery Setup As we have just said, we want to clone our form when the user hits a specific button or link, which in our case, is the button #clonetrigger. Extra: Generated Code If you are wondering what the code the plugin generates looks like then you should know that it is really simple. As you can see it automatically increments the number of every input name. Extra: How to get the data on the server side? If(! Conclusion.