jQuery UI Interfaces

A series of mini-projects on how to build various styles of instantly-updating, AJAX-powered jQuery user interfaces

   Watch Introductory Video

This series of mini-project tutorials shows how to build various styles of jQuery user interfaces, each of which updates a database in the background using an AJAX call.

In my Ultimate Web Development Course, I show all the steps needed to build from scratch a user interface like Youtube’s “add to favourites” feature. This course shows how to build more jQuery interfaces like this, using draggable(), sortable(), connectWith(), click(), and serialize().

Here are live demos of all the interfaces we build in this course.

In the first, we drag items from one list to another – we have a list of available fruits on the left and out-of-stock fruits on the right, and we can drag an item from one list to the other to change its availability. Refresh the page and the items remain in their new position because we’ve updated their details in the database in the background. This is done using “sortable” and “connect with” in jQuery to connect the two lists.

The second project is the same but with more than two lists – we can drag items from any list to any of the others and their new positions are saved. The code for this is is very similar to the first one, and again uses “sortable” and “connect with”.

Third is a ‘click’ interface where the user just clicks on an item and it is immediately added to the opposite list. Because it’s not so obvious to the user how this works, we’ll have instructions appear as the mouse moves over each of the lists.

The fourth mini-project reorders list items using a drag-and-drop interface – again, this is done with jquery sortable, this time using the serialize function to send the data to the AJAX file.

In an add-on lesson to the original course, I combine lesson 2, in whch items are dragged between multiple lists, and lesson 4, in which items are reordered in a list. In this lesson, you can drag between lists and the position of the items in the lists is also stored in the database.

The last of the mini-projects is another drag and drop interface – this time with multiple boxes as containers – using jquery draggable and droppable interactions.

As with all my tutorials, these provide everything you need to get your project working – including the database connection and AJAX files – and all the code is available as a zip file to download.

So if you’ve been searching around here and there and only found bits of code which are hard to put together, this series of tutorials may be just what you’ve been looking for – let’s get going!

Frequently Asked Questions

When does the course start and finish?
The course starts now and never ends! It is a completely self-paced online course - you decide when you start and when you finish.
How long do I have access to the course?
How does lifetime access sound? After enrolling, you have unlimited access to this course for as long as you like - across any and all devices you own. In the unlikely event of Web in Action closing, I will give 6 months' notice to give you plenty of time to complete your courses.
What if I am unhappy with the course?
We would never want you to be unhappy! If you are unsatisfied with your purchase, contact us in the first 30 days and we will give you a full refund.

Get started now!