Creating new item with ajax

Question

If I have a form which is used for creating data which will be displayed on the same page, I'm unsure how I should present the new item upon creation.

The scenario; an item is created, post data sent through API and item is supposed to be displayed by default. Usually I'd just have an ajax run and append html result, but I've started using angular and am looking for more ideal approaches.

There are many ways to do this, and I'd like your opinions on which one is most ideal.

---

Solution #1 - Preview in html, then create on server

Take the data, generate it in the html app, post same data to the server, try to create item in database and delete generated html if form validation on server side denies the post request.

Pros:

• The user gets instant and correct result (most of the time)
• The client doesn't need to care about success message from server, only error

Cons:

• If process fails, the box will appear half a second then pop away. This will most likely look ugly.
• Maybe the data will generate something advanced, and would require a function in both php and javascript, thus duplicating code somewhat

---

Solution #2 - Same as 1st, but added client validation

Basically this would in most cases remove the fast appearing and disappearing item upon error, because error will be dealt with before reaching the server.

Pros:

• Same as above

Cons:

• Might require 2 almost identical function in js and php, as mentioned
• Requires extra work to validate both on client side and server side. I usually prefer only server side validation.

---

Solution #3 - Delay visual item and parse upon successful post request

Go back to basics; parse the item with returned data instead of parsing the item first.

Pros:

• Easy to maintain codewise

Cons:

• Can have delay with adding item, thus slowing down user experience

---

Do you have your own solution or additional points regarding my solutions, please let me know! :)

What I try to balance here is:

Code complexity and User Experience

Answer 1

Solution 2 is a bad idea because it could happen that you have slightly different validation on client and server side. This could lead to the loss of the user's data and that is probably the worst thing that can happen to the user's experience!

A combination of solution 1 and 3 would be the best. Show the input in real time with the message that it is "being processed".

Ask yourself how bad that delay will be. It will at least let the user know what is actually going on. It is definitely better than let the user think he is done and can close the browser for instance. If the server then decides that the data is invalid it will be the same worst case scenario as I mentioned for solution 2.

Answer 2

From the solutions you proposed, I'd go with #2, as it's contributing a lot to how usable and friendly your interface will be in the end.

However, I would suggest going with a slightly different approach. That is, instead of creating a number of ajax request and handling whether they succeeded or not, make use of html5's local storage (or even better a library to handle browsers without one).

What you would be doing is just modifying data locally (stored in, for example, JSON), and make ajax requests when a certain criteria is met, or user requests saving of the data.

This way even if user navigates accidentally outside your app, closes the window, or otherwise leaves the form without saving it, the data will not be lost, and could be easily recovered, and re-sent upon re-opening of the form.