Skip to content
Permalink
Browse files

Improved: Browser Unresponsive when Loading Entity with Large Results

(OFBIZ-10716)

I came across a situation where an entity was taking too much of a time 
(browser asked me to either wait or kill) while loading/searching results in the 
Webtools application. The entity had close to 5M records, and I checked the 
server responded timely but the rendering of the screen was taking time.

When I explored the issue I came across a macro which renders the pagination on the screen, and it had a code block which was causing the screen rendering delay.

<#assign x=(listSize/viewSize)?ceiling>
  <#list 1..x as i>
    <#if i == (viewIndex+1)><option selected="selected" value="<#else><option value="</#if>${i-1}">${i}</option>
  </#list>

This code seems logical enough to me, and what I gather from this is that the 
list will render a select box with 250,000 options.

I like propose a change in this UI/UX from select box to an input text box so an 
user can navigate to any page, similar to a navigation input box in a PDF 
document reader application.

Thanks: Devanshu Vyas for the patch, Nicolas for discussion and Kumar Rahul for
testing

git-svn-id: https://svn.apache.org/repos/asf/ofbiz/ofbiz-framework/trunk@1856145 13f79535-47bb-0310-9956-ffa450edef68
  • Loading branch information
JacquesLeRoux committed Mar 24, 2019
1 parent 29f2e07 commit ee75d8977220ad4ec5cdb870d6e30a0687966261
@@ -606,12 +606,11 @@ Parameter: delegatorName, String, optional - name of the delegator in context.
<ul>
<li class="${paginateFirstStyle}<#if viewIndex gt 0>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxFirstUrl}')<#else>submitPagination(this, '${firstUrl}')</#if>">${paginateFirstLabel}</a><#else>-disabled"><span>${paginateFirstLabel}</span></#if></li>
<li class="${paginatePreviousStyle}<#if viewIndex gt 0>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxPreviousUrl}')<#else>submitPagination(this, '${previousUrl}')</#if>">${paginatePreviousLabel}</a><#else>-disabled"><span>${paginatePreviousLabel}</span></#if></li>
<#if listSize gt 0 && javaScriptEnabled><li class="nav-page-select">${pageLabel} <select name="page" size="1" onchange="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxSelectUrl}')<#else>submitPagination(this, '${selectUrl}'+this.value)</#if>"><#rt/>
<#local x=(listSize/viewSize)?ceiling>
<#list 1..x as i>
<#if i == (viewIndex+1)><option selected="selected" value="<#else><option value="</#if>${i-1}">${i}</option>
</#list>
</select></li>
<#if listSize gt 0 && javaScriptEnabled>
<li class="nav-page-select">
${pageLabel}
<input type="text" placeholder="${viewIndex+1} of ${(listSize/viewSize)?ceiling}" size="15" onchange="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxSelectUrl}')<#else>submitPagination(this, '${selectUrl}'+(this.value-1))</#if>"/>
</li>
</#if>
<li class="${paginateNextStyle}<#if highIndex lt listSize>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxNextUrl}')<#else>submitPagination(this, '${nextUrl}')</#if>">${paginateNextLabel}</a><#else>-disabled"><span>${paginateNextLabel}</span></#if></li>
<li class="${paginateLastStyle}<#if highIndex lt listSize>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxLastUrl}')<#else>submitPagination(this, '${lastUrl}')</#if>">${paginateLastLabel}</a><#else>-disabled"><span>${paginateLastLabel}</span></#if></li>
@@ -1314,7 +1314,7 @@ function submitPagination(obj, url) {
form.submit();
return false;
} else {
if (obj.tagName == "SELECT") {
if (obj.tagName == "SELECT" || obj.tagName == "INPUT") {
location.href = url;
return false;
} else {

0 comments on commit ee75d89

Please sign in to comment.
You can’t perform that action at this time.