3

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?

Manuel Allenspach
  • 12,467
  • 14
  • 54
  • 76
ZolaKt
  • 4,683
  • 8
  • 43
  • 66

1 Answers1

1

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 ;)

Marek Tuchalski
  • 489
  • 2
  • 8
  • thanks. element animation is a big plus. although it can be done in nr 1. i always know the id of the order, so i can find it and animate after ajax reload. what about system load? i pretty sure that nr 2 is more expensive, could it present a problem or it is ignorable? – ZolaKt Jan 31 '11 at 17:43
  • maybe a combination? details div with option 1, and the orders divs with option 2 ? – ZolaKt Jan 31 '11 at 17:44
  • In most cases you can ignore user load, this shouldn't be to big load for system. It would be more problematic if you are planning to use sortable elements there or ordering via jquery. Then if you have many rows it might become problem. – Marek Tuchalski Jan 31 '11 at 17:47
  • Combination of those will work good as well. The most important thing is: how to design it, so user will be happy and it will be very easy for him. Try to watch at this from user point of view. What data he will see there, how many of it? Maybe use clors to distinguish each row (try to use at least odd elements with different color). – Marek Tuchalski Jan 31 '11 at 17:50
  • thanks marek. div 1 will have only a few records, and div 2 10-20. so it's not much. ill go with the combined approach. div1&2 with option 2 and div 3 with option 1. i really don't need any animation in details (except ajaxload) and i don't need to search whole dom to find the elements – ZolaKt Jan 31 '11 at 17:54
  • Good luck with your project ;) – Marek Tuchalski Jan 31 '11 at 17:57