jQuery UI tutorial - Introduction

Enrol on the course at https://www.webinaction.co.uk/p/jquery-ui-interfaces to download the Working Files.

This is Richard Stibbard from webinaction.co.uk, bringing you a series of mini-project tutorials on 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 is how it works – you select a fictitious movie-goer and then click the heart icon for any of the movie titles to add them to that movie-goer’s favourites list.

To remove movies from favourites, you drag their titles to the trashcan.

So that’s a one-way drag and drop interface, dragging from here to the trashcan to delete favourites combined with a one-way click interface, clicking here to add favourites.

I thought it would be useful to show how to build some more jQuery interfaces like this. They’re all very simple to do – once you know how to do them. They can be a bit of a struggle if you don’t.
I’ll demonstrate them all before we begin.

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”.

Thirdly 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.

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 from webinaction.co.uk/coding-tutorials/jquery-ui-tutorial/.

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!