Youth academy screen changes

The youth academy page is the first thing I have attempted to alter so that it uses client side script functionality.

By that, I mean that the browser will do most of the work, meaning it should be much quicker to process requests.

There are 2 aspects to the Youth Academy page. There is a whole section to manage the players in a youth academy and there is a section to update the expenditure on youth development.

The latter is the completed bit at this moment in time with the former to be worked on next.

Whilst doing this work, I'm also attempting to improve the look of the pages to make them more user friendly.

Without trying to get too technical, this is my explanation of what I've changed....the previous way of working is actually for the user to hit a button and that then submits the whole page to the server, in order to get a result back. So in the case of the youth academy page, even though only expenditure may be changing, all the youth players are submitted along with the new expenditure value and then they are ignored. The new way of working just submits the relevant expenditure value to the server and it does this by linking to a new system that I have built (called an API).

Using script that runs in the browser means that the whole page doesn't need to be sent to the server and I can cherry pick the relevant information - in the case of expenditure - just the new value.

The API can then return a result as to whether it was successful or not, and, if not, why.

Hopefully that makes sense but for people that aren't interested in the technical specifics, below are the images of how the page has changed.

So this is the current screen:

and when the 'Change expenditure' button is clicked, it becomes this:


Clicking cancel or update then sends the whole page to the server and the page goes back to looking like the first image.

It's slow due to the server receiving the whole page - including player data (which isn't in this screenshot) and not immediately obvious that updating the expenditure value it has worked - the value does update but it's not very fancy.

The new way of doing it is to start off with the first screen, click 'Change expenditure' and get this: 
If an error is made when entering then it will show this:

and then on a successful update, this:


It looks much nicer and is much more obvious. The best part as far as I am concerned is that the whole thing happens without as much delay. Obviously I can't demonstrate this part but I hope to do similar functionality with player management and then launch it for all to use.

It's taken me a while to build the basic API aspects but now they are complete, I should be able to progress through the site, removing full server posts for small aspects, far more quickly.