Search code examples
javascripthtmlajaxmaster-detailhtml-manipulation

Ajax page echo vs background Ajax/direct HTML manipulation?

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.

  1. Waiting orders div - contains a table with unprocessed orders
  2. Last orders div - contains a table with last processed orders (10-20 rows)
  3. 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 ;)