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.
- 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
- If process fails, the box will appear half a second then pop away. This will most likely look ugly.
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.
- Same as above
- 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.
- Easy to maintain codewise
- 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