Many episodes ago we created a frontend form that would [add actors to our database](watch-learn.com/video-tutorials/making-websites-october-cms-part-26-uploading-images-frontend). In this episode we are going to Ajaxify that form and upload our image with Ajax. 

You will see that is nothing special. So I'm also going to show you how to create image previews on that form so that the user gets nice feedback of what's going on. 

Remember this will only work on the latest build of October, so if you don't have that build [please check out this video](http://watch-learn.com/video-tutorials/update-october-cms-laravel-55-valet).

In this episode I'm going to show you how to upload images from the October CMS frontend with Ajax and also show image previews.

Ajax Image Upload

Now that we have done [filtering](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-41-ajax-frontend-filters) and [sorting](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-42-ajax-frontend-sorting) with Octobers Ajax framework, we will add one more feature that will make our UI more approachable. This feature is pagination, because we are showing a lot of items and we don't want to show them all at once.

To do this we are going to use Ajax framework and it's `form update` option to refresh our pages list once the query has changed. As you will see this will be pretty simple once you know how to do it.

In this episode we are going to extend our Ajax filtering system with one more feature, and that is going to be Ajax Pagination, using the October CMS Ajax framework.

Ajax Pagination

To follow along with this episode you should definitely check the episode
where we created [Ajax Frontend Filters](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-41-ajax-frontend-filters) because most of the setup is in that episode. That is why this episode is relativley short. 

We are going to use Ajax framework that comes with October and a bit of php to sort our movies. Pretty simple stuff :).

In this episode I'm going to show you how to use October CMSs Ajax framework to sort the items you are listing.

Ajax Frontend Sorting

This episode is going to serve as a starting point for next few episodes where we will be doing sorting, searching and pagination. That is why this episode is so long. I promise the next few episodes will be much shorter.

As you know we already did [Frontend Filters](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-39-frontend-filters) two episodes ago, and now we are doing the same thing, but this time we will be using Octobers Ajax framework so that our page does not need to refresh every time we want to filter out some data.

To achieve this we will be using HTML, CSS and of course PHP and just a pinch of JavaScript and jQuery.

In this episode we are going to use Octobers Ajax framework to filter our movies by genre and year.

Ajax Frontend Filters

Few episodes ago I was talking about [Ajax form validation](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-22-ajax-form-validation) and I said that it was not the most elegant solution, but I didn't know how to do it better. [Samuel Georges](https://twitter.com/daftspunk) - the creator of October CMS -  saw that video and thought it wasn't very good to say the least. So he created new feature in October that does Ajax form validation much better - so, you're welcome :) .

In this episode I'm going to show you how to do Ajax form validation the right way.

In this video we are going to learn about new Ajax form validation that just came to October CMS few days ago.

NEW! Ajax Form Validation

### UPDATE: [There is a much better way to do Ajax Form Validation](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-25-new-ajax-form-validation)

Although I planned to continue doing what we did in the [last episode](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-21-users), I decided to make this quick video about validating our forms with Ajax.

Our previous version of validation, validated our form by refreshing the page and displaying errors. And this had a nasty side effect - it would clear all the forms input fields, which is not good from the UX perspective, as that would aggravate the user.

So in this episode I'm going to show you how to validate your form without page refresh and that way keep the data in our fields. This is good for the users, but it's also cool that the page doesn't refresh.

We are going to do that by using Octobers Ajax framework and a bit of jQuery.

In this episode we are quickly going back to forms and validation, but this time we are going to do it with Ajax na October CMSs Ajax framework.

Tutorials tagged with: ajax framework

Get in touch