Tuesday, September 1, 2009

[jQuery] Is there a more efficient Method.

Hello, I use Jquery on a web page that serves constant updates to the
User. I'm wondering if there is a more efficient method for updating
the content divs.

A simplified view of the layout I use is this.
<DIV ID = "C1" class="content">
<DIV Class="A"></DIV>
<DIV Class="B"></DIV
<DIV Class="C"></DIV
<DIV Class="D"></DIV
<DIV Class="E"></DIV
<DIV Class="F"></DIV
</DIV>
<DIV ID = "C2" class="content">
<DIV Class="A"></DIV>
<DIV Class="B"></DIV
<DIV Class="C"></DIV
<DIV Class="D"></DIV
<DIV Class="E"></DIV
<DIV Class="F"></DIV
</DIV>
<DIV ID = "C3" class="content">
<DIV Class="A"></DIV>
<DIV Class="B"></DIV
<DIV Class="C"></DIV
<DIV Class="D"></DIV
<DIV Class="E"></DIV
<DIV Class="F"></DIV
</DIV>

and so on..

Right now I have the server send back data via getJSON.
The data coming back can contain updates for any of the Divs. But if a
div is being updated, I update all of the children divs.

The basic steps I follow are.
I set a variable to the content div being updated.
Then do individual finds to update the child div.

Example to update content div 2 would be like.
wrkDiv = $("#C2");
wrkDiv.find(".A").html(data.DataA);
wrkDiv.find(".B").html(data.DataB);
wrkDiv.find(".C").html(data.DataC);
wrkDiv.find(".D").html(data.DataD);
wrkDiv.find(".E").html(data.DataE);
wrkDiv.find(".F").html(data.DataF);

I know it may be faster to pre_build a string of all the childern divs
and then just replace the content div's HTML like this ($("#C2").html
("<div class="A ... and so on;
but there may be more items under the content div than listed.

Just wondering if there was an easier way. Thanks.

No comments: