CODEWITHSUNDEEP
jqueryhtmlcss
t0mcat
t0mcat

Reputation: 5679

html elements comparison

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.

Upvotes: 0

Views: 288

Answers (3)

erikbstack
erikbstack

Reputation: 13254

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

Upvotes: 0

Dutchie432
Dutchie432

Reputation: 29160

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.

Upvotes: 1

Robusto
Robusto

Reputation: 31883

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.

Upvotes: 1

Related Questions