html elements comparison

views:

answers:

html elements comparison

Hi folks,

I have a query and I just want to know if its possible to do or not. If yes, then it would be real helpful if you can guide me to a sample or an example.

So what I am trying to do is, do a comparison on HTML (or DOM elements). So lets take this scenario:

I have 5 rows on my page (5 <tr>'s or 5 <div>'s), and I make an ajax call to fetch more data, this time server returns me 8 rows (only 3 rows are new, 5 are still the old rows), So instead of showing all 8 rows again, I just want to append these 3 new rows to already present 5 rows.

I know one solution is to do it on my server side, sending one row at a time, but server side code is more or less frozen and all the changes need to be done on the client side only.

Your inputs are highly valuable.

+1 A:

If you can only process this on the client side, I would recommend storing a data object (associative array) on the client, and constructing your HTML from that.

Robusto 2010-09-20 15:56:39

Thanks for reply Robusto.

t3ch 2010-09-20 16:09:54

+1 A:

When you receive the AJAX data you should try to parse the retrieved IDs (or some identifying object, like a date/time) and keep them in an array. Each time you get AJAX data, parse the ID, check your array to see if it's new, and if it is, display it.

The IDEAL way to do this is to pass the highest retrieved id to the ajax call, and have your server return only items with a higher id than that one. That's very much like how Facebook does the live feed.

Dutchie432 2010-09-20 15:56:42

Hi Dutchie, Thanks for the reply. Really liked your idea

t3ch 2010-09-20 16:05:06

See my comment on ErikB's answer. It further explains both of our posts.

Dutchie432 2010-09-20 17:07:02

Why not simply use a JS variable, that keeps track of your already existing elements? I think everything else is too complex, because it needs some complex comparing. Otherwise just delete all your rows and put them in completely new.

So either-or:

Cache in your JS Code what you already displayed
Redraw the complete set of rows

erikb 2010-09-20 15:59:22

Hi Erik, Is there any thing special needed to do caching on JS code

t3ch 2010-09-20 16:30:18

I think erikb is basically saying what I'm saying. I think when he says "cache what you already displayed" he is referring to keeping track of which items have already been displayed, so you can compare incoming items against that 'cache' to determine what gets displayed. In your JS Code, you can keep track of A) an int array of the ids of the displayed items or B) a single int with the highest Id (if your items are in ID order, of course).

Dutchie432 2010-09-20 17:06:09

Yes, how to store that information most meaningful should be decided by the programmer at hand. Sometimes it is also meaningful to store the whole data objects, not just an ID. For example in a situation where you never have too many data objects, or when the data is also changed a lot using AJAX. Or if there is no ID it maybe makes sense to calculate a hash-code that will be stored. The case with the highest ID is also very nice, because you have to store just one value. But in some situations that is also a problem like first you get [2,4,6] and then [2,3,4,6].

erikb 2010-09-20 23:21:40

All of your points are taken and valid, but most ID's are auto-incrementing. If it wasn't clear, I was implying that by saying "If your ids are in order". For all I know facebook doesn't use an id, but keeps a "lastAjaxTime" variable, and only retrieves posts newer than the stored date, regardless of their ID. I really can't see any reason to store the ajax'd objects for the OP's question. It seems the items will remain static (as far as AJAX is concerned) and only new items will be added. Regardless, I think we are saying the same basic thing and giving OP a good place to start.

Dutchie432 2010-09-21 12:27:53

ansaurus

tags:

views:

answers:

html elements comparison

related questions