a script on this page is causing Internet Explorer to run sl

UI Components for JSF
Post Reply
jaydev
Posts: 24
Joined: 05 Dec 2011, 20:06

10 Feb 2012, 02:30

Hi,

I am getting a pop up right after the ajax call returns from my bean's method:
a script on this page is causing Internet Explorer to run slowly...
I am using the layout component (PF 3.0.1), several tabs within in the "Center" layout unit and very few input components in all the other layout units. I get the error using IE 7.0.5... and Firefox. My page does not have any extra javascript and nothing special about it...

Could anyone help out and see at a quick glance if there is something wrong with our template?

Here is the template that we use for all pages:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<f:view content-type="text/html">
	<h:head>
		<f:facet name="first">
			<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
			<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
			<title>Forecast</title>
		</f:facet>
		<style type="text/css">
.ui-layout-north {
	z-index: 20 !important;
	overflow: visible !important;;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible !important;
}

.ui-widget,.ui-widget .ui-widget {
	font-size: 90% !important;
}

.label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
}
</style>
		<!--
	
	<h:outputStylesheet>
	.ui-widget, .ui-widget .ui-widget {
		font-size: 50% !important;
	}
	</h:outputStylesheet>

	-->

	</h:head>

	<h:body>
		<p:layout fullPage="true">

			<p:layoutUnit position="north" size="100" header="" resizable="true"
				closable="false" collapsible="true">
				<ui:include src="/modules/general_header.xhtml" />
			</p:layoutUnit>

			<p:layoutUnit position="south" size="50" header="Bottom"
				resizable="true" closable="false" collapsible="true" collapsed="true">
			</p:layoutUnit>

			<p:layoutUnit position="west" size="400" header="Inputs"
				resizable="true" closable="false" collapsible="true">
				<ui:insert name="request" />
			</p:layoutUnit>

			<p:layoutUnit position="east" size="100" header="Options"
				resizable="true" closable="true" collapsible="true" effect="drop" collapsed="true">
			</p:layoutUnit>


			<p:layoutUnit position="center">
				<ui:insert name="data" />
			</p:layoutUnit>

		</p:layout>

	</h:body>
</f:view>
</html>
and the center layout unit code:

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
	<p:scrollPanel style="width:1000px;height:1000px">
		<h:panelGroup id="entitiesTabsPanelGroupId">
			<p:tabView event="mouseover">
				<p:tab title="Portfolio (Relative)">
					<h:panelGrid id="portfolioPanelGridId" cellpadding="10">
						<ui:include src="/modules/portfolio_tab.xhtml" />
					</h:panelGrid>
				</p:tab>

				<p:tab title="Account">
					<h:panelGrid id="accountPanelGridId" cellpadding="10">
						<ui:include src="/modules/account_tab.xhtml" />
					</h:panelGrid>
				</p:tab>

				<p:tab title="Benchmark">
					<h:panelGrid id="benchPanelGridId" cellpadding="10">
						<ui:include src="/modules/benchmark_tab.xhtml" />
					</h:panelGrid>
				</p:tab>
			</p:tabView>
		</h:panelGroup>
	</p:scrollPanel>
</ui:composition>

jaydev
Posts: 24
Joined: 05 Dec 2011, 20:06

10 Feb 2012, 06:15

I simplified my page, which contains a tabView inside a ScrollPanel. The tabView itself contains another tabView with 3 tabs. Each tab has one DataTable or a total of 3 DataTables. One table has 1 row and the other two have 240 rows (small data set). I still get this "script causing IE to run slowly"!! :evil:

Should be pretty basic functionality... When I take out the two DataTables with 240 rows, it loads quickly enough and does not give the error message. This is really confusing. I even tried to turn off pagination but the error still came up after this update.

Help!

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

10 Feb 2012, 11:18

Try to remove component by component and try to localize the issue.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

jaydev
Posts: 24
Joined: 05 Dec 2011, 20:06

10 Feb 2012, 14:43

I did that and the only way it works is when I remove the two DataTables with 240 rows and only have the one with 1 row. In this case, it works but what's the point if the only table that works has 1 row! All the DataTables have the same code. I also removed filter, sort, resizing columns, and pagination without any success.

Do I need to use dynamic columns or do I need to use a LazyLoadingModel? I do not understand why I am getting such a hard time to build a simple and small DataTable. I have to say that I am pretty disappointed with the DataTable thus far...

jaydev
Posts: 24
Joined: 05 Dec 2011, 20:06

10 Feb 2012, 15:34

FYI - I got rid of the TabView component and only include my DataTables in a ScrollPanel such as:

Code: Select all

<p:scrollPanel style="width:1000px;height:1000px">
		<h:panelGroup id="entitiesPanelGroupId">
			<h:panelGrid columns="1" cellpadding="10">
				<h:form id="accountHoldingsFormId">
					<ui:include src="/modules/account_holdings_datatable.xhtml" />
					<!-- <ui:include src="/modules/account_holdings_dataExport.xhtml" /> -->
				</h:form>
			</h:panelGrid>



			<h:panelGrid columns="2" cellpadding="10">
				<h:form id="baseAccountForm">
					<!-- <ui:include src="/modules/account_base12Mo_dataExport.xhtml" /> -->
					<ui:include src="/modules/account_base12Mo_datatable.xhtml" />
				</h:form>
			</h:panelGrid>
		</h:panelGroup>
The DataTable code is:

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<p:dataTable var="holding" id="accountHoldingsDataTableId"
		value="#{entityForecastReturnBean.acctHoldings}" scrollable="true"
		scrollHeight="500" scrollWidth="700" resizableColumns="true">

		<f:facet name="header">
             Holdings
        </f:facet>

		<!--<p:column style="width:16px">
			<p:rowToggler />
		</p:column>-->

		<p:column style="width:80px" sortBy="#{holding.repsecId}" filterBy="#{holding.repsecId}">
			<f:facet name="header">
                    Sec Id
            </f:facet>
			<h:outputText value="#{holding.repsecId}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.secName}" filterBy="#{holding.secName}">
			<f:facet name="header">
                    Name
            </f:facet>
			<h:outputText value="#{holding.secName}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.matDate}" filterBy="#{holding.matDate}">
			<f:facet name="header">
                    Maturity Date
            </f:facet>
			<h:outputText value="#{holding.matDate}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.worstDate}"
			filterBy="#{holding.worstDate}">
			<f:facet name="header">
                    Worst
            </f:facet>
			<h:outputText value="#{holding.worstDate}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.effDate}" filterBy="#{holding.effDate}">
			<f:facet name="header">
                    Effective
            </f:facet>
			<h:outputText value="#{holding.effDate}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.couponRate}"
			filterBy="#{holding.couponRate}">
			<f:facet name="header">
                    Coupon Rate
            </f:facet>
			<h:outputText value="#{holding.couponRate}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.couponFreqency}"
			filterBy="#{holding.couponFreqency}">
			<f:facet name="header">
                    Coupon Frequency
            </f:facet>
			<h:outputText value="#{holding.couponFreqency}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.dayCountMethod}"
			filterBy="#{holding.dayCountMethod}">
			<f:facet name="header">
                    Day Count Method
            </f:facet>
			<h:outputText value="#{holding.dayCountMethod}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.firstCouponDate}"
			filterBy="#{holding.firstCouponDate}">
			<f:facet name="header">
                   	First Coupon Date
            </f:facet>
			<h:outputText value="#{holding.firstCouponDate}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.instrmtCode}"
			filterBy="#{holding.instrmtCode}">
			<f:facet name="header">
                   	Instrument Code
            </f:facet>
			<h:outputText value="#{holding.instrmtCode}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.countryCode}"
			filterBy="#{holding.countryCode}">
			<f:facet name="header">
                   	Country Code
            </f:facet>
			<h:outputText value="#{holding.countryCode}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.currencyCode}"
			filterBy="#{holding.currencyCode}">
			<f:facet name="header">
                    Currency
            </f:facet>
			<h:outputText value="#{holding.currencyCode}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.industry}" filterBy="#{holding.industry}">
			<f:facet name="header">
                    Industry
            </f:facet>
			<h:outputText value="#{holding.industry}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.price}" filterBy="#{holding.price}">
			<f:facet name="header">
                    Price
            </f:facet>
			<h:outputText value="#{holding.price}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.ytm}" filterBy="#{holding.ytm}">
			<f:facet name="header">
                    YTM
            </f:facet>
			<h:outputText value="#{holding.ytm}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.yieldToWorst}"
			filterBy="#{holding.yieldToWorst}">
			<f:facet name="header">
                    YTW
            </f:facet>
			<h:outputText value="#{holding.yieldToWorst}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.spread}" filterBy="#{holding.spread}">
			<f:facet name="header">
                    Spread
            </f:facet>
			<h:outputText value="#{holding.spread}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.effDuration}"
			filterBy="#{holding.effDuration}">
			<f:facet name="header">
                    Eff Duration
            </f:facet>
			<h:outputText value="#{holding.effDuration}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.accruedIntStart}"
			filterBy="#{holding.accruedIntStart}">
			<f:facet name="header">
                    Accrued Int Start
            </f:facet>
			<h:outputText value="#{holding.accruedIntStart}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.accruedIntEnd}"
			filterBy="#{holding.accruedIntEnd}">
			<f:facet name="header">
                    Accrued Int End
            </f:facet>
			<h:outputText value="#{holding.accruedIntEnd}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.yrsToMat}" filterBy="#{holding.yrsToMat}">
			<f:facet name="header">
                    YrsToMat
            </f:facet>
			<h:outputText value="#{holding.yrsToMat}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.yrsToWorst}"
			filterBy="#{holding.yrsToWorst}">
			<f:facet name="header">
                    YrsToWorst
            </f:facet>
			<h:outputText value="#{holding.yrsToWorst}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.oasToWorst}"
			filterBy="#{holding.oasToWorst}">
			<f:facet name="header">
                    OasToWorst
            </f:facet>
			<h:outputText value="#{holding.oasToWorst}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.modDurationToWorst}"
			filterBy="#{holding.modDurationToWorst}">
			<f:facet name="header">
                    ModDurationToWorst
            </f:facet>
			<h:outputText value="#{holding.modDurationToWorst}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.zvSpread}" filterBy="#{holding.zvSpread}">
			<f:facet name="header">
                    zvSpread
            </f:facet>
			<h:outputText value="#{holding.zvSpread}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.oad}" filterBy="#{holding.oad}">
			<f:facet name="header">
                    oad
            </f:facet>
			<h:outputText value="#{holding.oad}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.oac}" filterBy="#{holding.oac}">
			<f:facet name="header">
                    oac
            </f:facet>
			<h:outputText value="#{holding.oac}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.krd6mth}" filterBy="#{holding.krd6mth}">
			<f:facet name="header">
                    krd6mth
            </f:facet>
			<h:outputText value="#{holding.krd6mth}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.krd1yr}" filterBy="#{holding.krd1yr}">
			<f:facet name="header">
                    krd1yr
            </f:facet>
			<h:outputText value="#{holding.krd1yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.krd2yr}" filterBy="#{holding.krd2yr}">
			<f:facet name="header">
                    krd2yr
            </f:facet>
			<h:outputText value="#{holding.krd2yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.krd5yr}" filterBy="#{holding.krd5yr}">
			<f:facet name="header">
                    krd5yr
            </f:facet>
			<h:outputText value="#{holding.krd5yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.krd10yr}" filterBy="#{holding.krd10yr}">
			<f:facet name="header">
                    krd10yr
            </f:facet>
			<h:outputText value="#{holding.krd10yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.krd20yr}" filterBy="#{holding.krd20yr}">
			<f:facet name="header">
                    krd20yr
            </f:facet>
			<h:outputText value="#{holding.krd20yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.krd30yr}" filterBy="#{holding.krd30yr}">
			<f:facet name="header">
                    krd30yr
            </f:facet>
			<h:outputText value="#{holding.krd30yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.adj_krd6mth}"
			filterBy="#{holding.adj_krd6mth}">
			<f:facet name="header">
                    adj_krd6mth
            </f:facet>
			<h:outputText value="#{holding.krd10yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.adj_krd1yr}"
			filterBy="#{holding.adj_krd1yr}">
			<f:facet name="header">
                    adj_krd1yr
            </f:facet>
			<h:outputText value="#{holding.adj_krd1yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.adj_krd2yr}"
			filterBy="#{holding.adj_krd2yr}">
			<f:facet name="header">
                    adj_krd2yr
            </f:facet>
			<h:outputText value="#{holding.adj_krd2yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.adj_krd5yr}"
			filterBy="#{holding.adj_krd5yr}">
			<f:facet name="header">
                    adj_krd5yr
            </f:facet>
			<h:outputText value="#{holding.adj_krd5yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holdingadj_krd10yr}"
			filterBy="#{holdingadj_krd10yr}">
			<f:facet name="header">
                    adj_krd10yr
            </f:facet>
			<h:outputText value="#{holdingadj_krd10yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holdingadj_krd20yr}"
			filterBy="#{holdingadj_krd20yr}">
			<f:facet name="header">
                    adj_krd20yr
            </f:facet>
			<h:outputText value="#{holdingadj_krd20yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holdingadj_krd30yr}"
			filterBy="#{holdingadj_krd30yr}">
			<f:facet name="header">
                    adj_krd30yr
            </f:facet>
			<h:outputText value="#{holdingadj_krd30yr}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.spread}" filterBy="#{holding.spread}">
			<f:facet name="header">
                    Spread
            </f:facet>
			<h:outputText value="#{holding.spread}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.oaSpreadDur}"
			filterBy="#{holding.oaSpreadDur}">
			<f:facet name="header">
                    oaSpreadDur
            </f:facet>
			<h:outputText value="#{holding.oaSpreadDur}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.oaYtw}" filterBy="#{holding.oaYtw}">
			<f:facet name="header">
                    oaYtw
            </f:facet>
			<h:outputText value="#{holding.oaYtw}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.amountOutstanding}"
			filterBy="#{holding.amountOutstanding}">
			<f:facet name="header">
                    Amount Outstanding
            </f:facet>
			<h:outputText value="#{holding.amountOutstanding}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.mktValue}" filterBy="#{holding.mktValue}">
			<f:facet name="header">
                    Mkt Value
            </f:facet>
			<h:outputText value="#{holding.mktValue}" />
		</p:column>

		<p:column style="width:80px" sortBy="#{holding.finalWeightInEntity}"
			filterBy="#{holding.finalWeightInEntity}">
			<f:facet name="header">
                    finalWeightInEntity
            </f:facet>
			<h:outputText value="#{holding.finalWeightInEntity}" />
		</p:column>
<!--
		<p:rowExpansion>
			<h:panelGrid>
				<p:dataTable var="forecastElement" value="#{holding.riskFactors}">
					<p:column style="width:80px">
						<f:facet name="header">
                    Element Id
            </f:facet>
						<h:outputText value="#{forecastElement.id}" />
					</p:column>

					<p:column style="width:80px">
						<f:facet name="header">
                    Element Type Id
            </f:facet>
						<h:outputText value="#{forecastElement.type}" />
					</p:column>

					<p:column style="width:80px">
						<f:facet name="header">
                    Duration
            </f:facet>
						<h:outputText value="#{forecastElement.duration}" />
					</p:column>
				</p:dataTable>
			</h:panelGrid>
		</p:rowExpansion>-->
	</p:dataTable> 

</ui:composition>
I still get the error message. At this point, I am thinking about dropping DataTable altogether as it is not capable to be deployed to production.

Do you think that using lazy loading would help?

Thanks,
JayDev

jaydev
Posts: 24
Joined: 05 Dec 2011, 20:06

10 Feb 2012, 18:57

I think that I solved the issue by implementing lazy loading. I now need to update my actual application code and run a final test but it loaded 9,000 rows without any errors and the excel export works fine! Let's see what happens when I add more columns.

jaydev
Posts: 24
Joined: 05 Dec 2011, 20:06

11 Feb 2012, 15:26

I updated the code in my application and the error is gone. I don't think that DataTable can realistically be used without the lazy loading model.

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

11 Feb 2012, 16:04

DataTable can be used realistically, of course. The problem is IE which can not render too large DOM and raises this weired message. We restrict count of rows to 500 in our web apps. I have made an experience that more than 500 rows on a page makes web app slow. At least in IE.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 29 guests