Ajax page echo vs background Ajax/direct HTML manipulation?
-
27-10-2019 - |
Question
I have a dilemma, and I could really use some advice. I am building an ordering system with PHP/Smarty/HTML/jQuery. Currently working on the site where the seller will confirm orders.
I need to have 3 divs.
- Waiting orders div - contains a table with unprocessed orders
- Last orders div - contains a table with last processed orders (10-20 rows)
- Details div - contains information about the order, and buttons to confirm/decline
It's a typical master-detail situation, only the master is split into 2 parts (1,2) and details is in div 3. Naturally everything is connected with javascript/Ajax so the user can get the "real-time" feeling. Waiting orders div is filled via comet (long-polling) technique.
My dilemma is how to connect the divs with javascript/ajax. Should I make echo pages which correspond to the db state and load the completely in divs. Or should I manipulate just the table rows and use ajax only for background db calls?
To make myself more clear:
Option 1 (Ajax complete pages):
- when the user selects the waiting order, new page (echoed table) is fetched with ajax and loaded into details div
- when the user confirms/declines the order in div 3, divs 1 and 2 are refreshed with ajax (echo pages with tables which correspond to the state in db)
Option 2 (html manipulation/background Ajax):
- when the user selects the waiting order, elements of div 3 are filled with new value.
- when the user confirms/declines in the order in div3, tr from table in div 1 is removed (background ajax to del from db) and the same tr is added in div 2 (background ajax to insert to db)
So which way to go?
Solution
Both ways are acceptabale, but nr 1 is less user friendly, because of reload div 1&2. When you load something into div 3, you have its id so it should be a problem to copy / append tr (and add color, so user know what happened).
If you choose 2 remember to unbind / bind new actions to your tr elements, because when you move your tr to another place it will not trigger actions you binded earlier.
I would probably go with 2 myself ;)
PS. Add overlay with ajax loader (http://ajaxload.info/), to be on the safe side from user interuptions, while you are loading data into div 3. User will be happier as well, because he will know that something is going on ;)