How to prevent DIV from reloading

[Steve Dyke]

I have three DIV tags on my page each populated with JSP.
A header DIV, detail DIV and list DIV.

The header displays a selected record name.
The detail holds detail data of the record selected.
The list is a table of a list of records.

When the page is initialy loaded the header shows a generic string.
The deatil is empty.
The list is populated and the first column contains hyperlinks of record index.

When a hyperlink is clicked the detail gets loaded using $.load.
Then the header gets loaded using $.load.

This process gets slower the more records that are in the list.

What I think is happening is when the link is clicked:
the list reloads
the detail loads
the list reloads again
the header loads
the list reloads again

How can I keep the list DIV static and not be reloaded every time something on the page changes?

[Eric Pascarello]

If you are adding elements to the page, elements need to redraw. The more elements, the longer the redraw.

It could also be a memory leak in your application. Without seeing your application, we can only speculate.

Eric

[Steve Dyke]

Eric Pascarello wrote:If you are adding elements to the page, elements need to redraw. The more elements, the longer the redraw.

It could also be a memory leak in your application. Without seeing your application, we can only speculate.

Eric

Does adding elements to one DIV tag cause the entire page to be redrawn? And does a redraw re-execute the page HTML?

Note: After everything loads I can do a list.innerHTML = ""(remove the contents of the list div) and then type in a number to lookup(simulating the list link) and the detail and header loads very fast. So it has somthing to do with the list being regenerated.

The table is being built using JSTL for each loop. Is there a better way to build this table?

[Bear Bibeault]

I'm not really understanding the issue.

Does adding elements to one DIV tag cause the entire page to be redrawn?

No.

And does a redraw re-execute the page HTML?

What's a "redraw"? And HTML doesn't execute in the first place.

The table is being built using JSTL for each loop. Is there a better way to build this table?

Completely moot as that happens on the server long before the page is sent to the browser. How the HTML is built is irrelevant/

[Steve Dyke]

Bear Bibeault wrote:I'm not really understanding the issue.

Does adding elements to one DIV tag cause the entire page to be redrawn?

No.

And does a redraw re-execute the page HTML?

What's a "redraw"? And HTML doesn't execute in the first place.

The table is being built using JSTL for each loop. Is there a better way to build this table?

Completely moot as that happens on the server long before the page is sent to the browser. How the HTML is built is irrelevant/

Can you please look at my first post again? If there is something else I need to explain I will be more than happy to do so.
I beleive I have a relevent page for my users. It displays a lot of good data and is interactive, it's just too slow and when I take out the table portion it flies.
However, the table is necessary for navigation.

[Eric Pascarello]

The performance of adding elements to the page really depends on how the page is structured. I deal with some large pages at my jobs and had to figure out this stuff and it was a lot of manual playing and seeing what happens.

Floats and percenages play havoc with tables.

If the table is for navigation, does it really need to be a table? Does it look like a list?

Again without seeing anything, we are just taking stabs in the dark.

Eric

[salvin francis]

Steve Dyke wrote:It displays a lot of good data and is interactive, it's just too slow

Slow meaning ?
1. data takes time to come from the server
Ans: you want to optimize your server code, check out the portions that are slowing it down, main areas of optimization are
DB query optimization, code loops, etc. If all opt for a better server.

2. data takes time to process @ client
Ans: you want to optimize your javascript, do all calculations @ server instead of the client.

[Steve Dyke]

salvin francis wrote:

Steve Dyke wrote:It displays a lot of good data and is interactive, it's just too slow

Slow meaning ?
1. data takes time to come from the server
Ans: you want to optimize your server code, check out the portions that are slowing it down, main areas of optimization are
DB query optimization, code loops, etc. If all opt for a better server.

2. data takes time to process @ client
Ans: you want to optimize your javascript, do all calculations @ server instead of the client.

The data retreival takes less that 2 seconds. It is the process of populating the table using the JSTL forEach loop. There are no calculations but many conditional checks.
Here is my JSP code for the table part:

<TABLE border="2" width="900">
		<TBODY>
			<TR>
				<TH class="ddmainAqua" width="70">Drawing No</TH>
				<TH class="ddmainAqua" width="50">Pndg Rev</TH>
				<TH class="ddmainAqua" width="200">Title</TH>
				<TH class="ddmainAqua" width="50">Job No</TH>
				<TH class="ddmainAqua" width="50">Locked By</TH>
				<TH class="ddmainAqua" width="50">Model No</TH>
				<TH class="ddmainAqua" width="50">Dwg Type</TH>
				<TH class="ddmainAqua" width="60">Recevd Date</TH>
				<TH class="ddmainAqua" width="200">Effectivity</TH>
				<TH class="ddmainAqua" width="70">Drawing Number</TH>
			</TR>
			<c:forEach var="itemName" varStatus="status" items="${qitemList}">
				<c:choose>
					<c:when test="${itemName[10] == '1'}">
						<c:forEach var="itemArrayList" varStatus="status2" items="${itemName}">
							<c:choose>
								<c:when test="${status2.count == '1'}">
									<c:set var="ialValue" value="${fn:split(itemArrayList, ',')}" />
							
									<TD class="ddmainRedWhite" width="70">
										<A id="${ialValue[0]}" href="#" onclick="javascript:accessEDCNForm(this.id);return false;">${ialValue[1]}</A>
									</TD>
								
								</c:when>
								<c:when test="${status2.count == '2'}">
									<TD class="ddmainRedWhite" width="50">${itemArrayList}
									</TD>
								</c:when>
								<c:when test="${status2.count == '3'}">
									<TD class="ddmainRedWhite" width="200">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '4'}">
									<TD class="ddmainRedWhite" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '5'}">
									<TD class="ddmainRedWhite" width="50">
										<A id="${ialValue[0]}" href="#" onclick="javascript:specialDisplayDialog(this.id,'LockedBy');return false;">${itemArrayList}</A>
									</TD>
								</c:when>
								<c:when test="${status2.count == '6'}">
									<TD class="ddmainRedWhite" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '7'}">
									<TD class="ddmainRedWhite" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '8'}">
									<TD class="ddmainRedWhite" width="60">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '9'}">
									<TD class="ddmainRedWhite" width="200">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '10'}">
									<c:set var="ialValue" value="${fn:split(itemArrayList, ',')}" />
									<TD class="ddmainRedWhite" width="70">
										<A id="${ialValue[0]}" href="#" onclick="javascript:accessEDCNForm(this.id);return false;">${ialValue[1]}</A>
									</TD>
								</c:when>
								<c:when test="${status2.count == '11'}">
									<TD style="display:none" class="ddmainRedWhite" width="2">${itemArrayList}</TD>
								</c:when>
								<c:otherwise>
									<TD class="ddmainRedWhite">${itemArrayList}</TD>
								</c:otherwise>
							</c:choose>
						</c:forEach>
					</c:when>
					<c:when test="${itemName[10] == '2'}">
						<c:forEach var="itemArrayList" varStatus="status2" items="${itemName}">
							<c:choose>
								<c:when test="${status2.count == '1'}">
									<c:set var="ialValue" value="${fn:split(itemArrayList, ',')}" />
							
									<TD class="cRed" width="70">
										<A id="${ialValue[0]}" href="#" onclick="javascript:accessEDCNForm(this.id);return false;">${ialValue[1]}</A>
									</TD>
								
								</c:when>
								<c:when test="${status2.count == '2'}">
									<TD class="cRed" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '3'}">
									<TD class="cRed" width="200">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '4'}">
									<TD class="cRed" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '5'}">
									<TD class="cRed" width="50">
										<A id="${ialValue[0]}" href="#" onclick="javascript:specialDisplayDialog(this.id,'LockedBy');return false;">${itemArrayList}</A>
									</TD>
								</c:when>
								<c:when test="${status2.count == '6'}">
									<TD class="cRed" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '7'}">
									<TD class="cRed" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '8'}">
									<TD class="cRed" width="60">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '9'}">
									<TD class="cRed" width="200">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '10'}">
									<c:set var="ialValue" value="${fn:split(itemArrayList, ',')}" />
									<TD class="cRed" width="70">
										<A id="${ialValue[0]}" href="#" onclick="javascript:accessEDCNForm(this.id);return false;">${ialValue[1]}</A>
									</TD>
								</c:when>
								<c:when test="${status2.count == '11'}">
									<TD style="display:none" class="cRed" width="2">${itemArrayList}</TD>
								</c:when>
								<c:otherwise>
									<TD class="cRed">${itemArrayList}</TD>
								</c:otherwise>
							</c:choose>
						</c:forEach>
					</c:when>
					<c:when test="${itemName[10] == '3'}">
						<c:forEach var="itemArrayList" varStatus="status2" items="${itemName}">
							<c:choose>
								<c:when test="${status2.count == '1'}">
									<c:set var="ialValue" value="${fn:split(itemArrayList, ',')}" />
							
									<TD class="cBlue" width="70">
										<A id="${ialValue[0]}" href="#" onclick="javascript:accessEDCNForm(this.id);return false;">${ialValue[1]}</A>
									</TD>
								
								</c:when>
								<c:when test="${status2.count == '2'}">
									<TD class="cBlue" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '3'}">
									<TD class="cBlue" width="200">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '4'}">
									<TD class="cBlue" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '5'}">
									<TD class="cBlue" width="50">
										<A id="${ialValue[0]}" href="#" onclick="javascript:specialDisplayDialog(this.id,'LockedBy');return false;">${itemArrayList}</A>
									</TD>
								</c:when>
								<c:when test="${status2.count == '6'}">
									<TD class="cBlue" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '7'}">
									<TD class="cBlue" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '8'}">
									<TD class="cBlue" width="60">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '9'}">
									<TD class="cBlue" width="200">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '10'}">
									<c:set var="ialValue" value="${fn:split(itemArrayList, ',')}" />
									<TD class="cBlue" width="70">
										<A id="${ialValue[0]}" href="#" onclick="javascript:accessEDCNForm(this.id);return false;">${ialValue[1]}</A>
									</TD>
								</c:when>
								<c:when test="${status2.count == '11'}">
									<TD style="display:none" class="cBlue" width="2">${itemArrayList}</TD>
								</c:when>
								<c:otherwise>
									<TD class="cBlue">${itemArrayList}</TD>
								</c:otherwise>
							</c:choose>
						</c:forEach>
					</c:when>
					<c:otherwise>
						<c:forEach var="itemArrayList" varStatus="status2" items="${itemName}">
							<c:choose>
								<c:when test="${status2.count == '1'}">
									<c:set var="ialValue" value="${fn:split(itemArrayList, ',')}" />
							
									<TD class="ddmainWhite" width="70">
										<A class="cWhite" id="${ialValue[0]}" href="#" onclick="javascript:accessEDCNForm(this.id);return false;">${ialValue[1]}</A>
									</TD>
								
								</c:when>
								<c:when test="${status2.count == '2'}">
									<TD class="ddmainWhite" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '3'}">
									<TD class="ddmainWhite" width="200">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '4'}">
									<TD class="ddmainWhite" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '5'}">
									<TD class="ddmainWhite" width="50">
										<A class="cWhite" id="${ialValue[0]}" href="#" onclick="javascript:specialDisplayDialog(this.id,'LockedBy');return false;">${itemArrayList}</A>
									</TD>
								</c:when>
								<c:when test="${status2.count == '6'}">
									<TD class="ddmainWhite" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '7'}">
									<TD class="ddmainWhite" width="50">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '8'}">
									<TD class="ddmainWhite" width="60">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '9'}">
									<TD class="ddmainWhite" width="200">${itemArrayList}</TD>
								</c:when>
								<c:when test="${status2.count == '10'}">
									<c:set var="ialValue" value="${fn:split(itemArrayList, ',')}" />
									<TD class="ddmainWhite" width="70">
										<A class="cWhite" id="${ialValue[0]}" href="#" onclick="javascript:accessEDCNForm(this.id);return false;">${ialValue[1]}</A>
									</TD>
								</c:when>
								<c:when test="${status2.count == '11'}">
									<TD style="display:none" class="ddmainWhite" width="2">${itemArrayList}</TD>
								</c:when>
								<c:otherwise>
									<TD class="ddmainWhite">${itemArrayList}</TD>
								</c:otherwise>
							</c:choose>
						</c:forEach>
					</c:otherwise>
				</c:choose>
			<TR>
			
			</TR>
			</c:forEach>
		</TBODY>
	</TABLE>

[Gregg Bolinger]

How many rows of data before it starts to get really slow? For example, if 20 rows still seems fast, but 200 rows seems slow the best thing to do is page your data so that you are only rendering 20 rows at a time, and allow the user to page to next/prev sets of data.

[Steve Dyke]

Gregg Bolinger wrote:How many rows of data before it starts to get really slow? For example, if 20 rows still seems fast, but 200 rows seems slow the best thing to do is page your data so that you are only rendering 20 rows at a time, and allow the user to page to next/prev sets of data.

It does seem to bog down after 20 to 25 rows. Is it difficult to set up what you suggest?

[Gregg Bolinger]

Steve Dyke wrote:

Gregg Bolinger wrote:How many rows of data before it starts to get really slow? For example, if 20 rows still seems fast, but 200 rows seems slow the best thing to do is page your data so that you are only rendering 20 rows at a time, and allow the user to page to next/prev sets of data.

It does seem to bog down after 20 to 25 rows. Is it difficult to set up what you suggest?

If you don't know how, yes. But that's pretty much on par with anything. I'd recommend you look into some pre-made solutions. Maybe something like displayTag or jqGrid.