Is there a way to NOT populate a control on page load? I have a tree control that has a lot of data behind it, It takes some time for the page to finish loading.

I wanted to see if I have other options to kind of balance the page load based on events.

This message has been edited. Last edited by: MattC,

I was about to write [SHARE] topic on this(will still make it as currently writing it I dont have access to examples). We solved this by custom AJAX calls.

What I understood that as long as you have "dynamically" populated lists those calls will be still made turning the "UpdateData()" function. Maybe with AppStudio tasks/events its possible to make additional call after page has done with loading. Is your tree control taking some parameters inside aswell?

Regards,

My page takes about 30-40 seconds to load. It's a page with parameters. I am not loading any reports. Just selections. I was kind of hoping to try and improve performance.

The tree control is not taking any parameters, it just loads a lot of records so it takes some time to draw.

Matt, good question! Hopefully, someone would help us here in a simple way.

Hi Matt,
Questions:

- Can you consider loading it from a Hold file built from an schedule that generate the file once a day (if the tree list is static which is seems according to your post) ?
- Do you need to load it "dynamically", can you consider loading it from a call at the moment you need it ?

I have list that depend on selection made by user and where I cannot use chaining because it's to large, so I use a call to load the data once selection made.
Or some where I previously extract data from DB once a day using scheduler and keep them in a hold file that is used to built the list.

Maybe they are your better options.

I think the tree control is the issue, and it's possible that it's not the the data retrieval, but the JavaScript functions that populate the tree control. We use an Ajax call with a jQuery tree control and it takes quite a while populating a multi-level tree.

quote:

Originally posted by MartinY:
Hi Matt,
Questions:

- Can you consider loading it from a Hold file built from an schedule that generate the file once a day (if the tree list is static which is seems according to your post) ?
- Do you need to load it "dynamically", can you consider loading it from a call at the moment you need it ?

Maybe they are your better options.

Yes for question 1, I could technically load it once daily, the data doesn't change that often, only when our clients make hierarchy changes, it flows down stream.

Yes for question 2, but I am not sure how to accomplish this. How do I prevent it from loading on initial page load and do some sort of on change event to make it load/populate?


Francis - I tend to agree with you with the Tree Control. In all reality, I don't think I will gain any performance, but more or less give the illusion of better performance when a user loads the page to kind of balance it out based on selection. The illusion may be ugly too.

MattC,

What I have noticed when interrogating WebFOCUS calls is that they all happen in Serial. One has to finish before another starts. I haven't seen anyway to make them run in Parallel using standard WebFOCUS. When I have to make them run in Parallel I use JQuery to do so. I use a concept similar to the combination of these two posts:

http://forums.informationbuild...337003136#9337003136
http://forums.informationbuild...287092626#1287092626

That is one thing I would consider if I were you. Doing things this way, you can do parallel loads of your drop downs, AND you can decide to not load a given drop down until a specific action is taken, or once other elements have loaded to your page.

Another option is, using the "Add No Selection Option". The help file says this about using it on chained select boxes:

quote:

Add ‘No selection' option
Optimizes performance by populating a chain one control at a time, instead of all the controls when the page initially loads. Selecting the Add ‘No selection’ option enables you to populate controls when necessary.

This can be a way for you to control your list box population based on the selection of the fields before it. As always the more filters you have, the shorter amount of time it takes to get a result.

MattC another thought. Is your long running query efficient? Is the SQL being generated correctly to the DB? It might be worth while running a trace on the query to see if you can optimize it. Also if you use the network tab in chromes developer tools, you can see what requests are running when (Firefox and IE also have a network tab in the developer tools I believe).

My queries are all SQL Pass-thru. Query time is sub-second, but the issue is the result set is 11,000+ records trying to build a tree control, with it's Parent/Child relationship.

I have 5 different tree controls with various product hierarchies and let's say at most is 11,000+ records for each. That's 55,000+ (give or take) records plus the additional other 30+ controls on the page pulling data with their own row counts.

I am thinking I roughly have 60,000+ plus rows of data that an IE 8 page is trying to handle.

Am I thinking this wrong?

This is like the Jaws movie. "I think I need a bigger boat"

To answer your question Matt on how to not load control on initial, here is what I'm doing.

1- Define the control as static, have only one entry where value = FOC_NONE, display = 'Loading...' and also can be hidden on initial if needed.
2- Built an onChange event where the call is performed to load the real list value and unhide it when completed.

quote:

Originally posted by MartinY:

1- Define the control as static, have only one entry where value = FOC_NONE, display = 'Loading...' and also can be hidden on initial if needed.
2- Built an onChange event where the call is performed to load the real list value and unhide it when completed.

Are you using JS to do this? Can you provide a snipit of your code here? I am not following how you are linking your onChange to load the real values? Are you setting the control to a default value on page load then using an event?

Old code that I'm reusing over and over, so not all new IBI function used, but still working.

Built with HTML Composer WF7 (I've pasted the whole generated code). I adapt a little just to include the concept and it does work from my side where I have all the called fex and data.

<!-- Generated by Report Layout Painter -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META id=mycharsetmeta content="text/html; charset=ISO-8859-1" http-equiv=Content-Type>
<META id=Generation content="Created in release 7703, Generation 3.0">
<SCRIPT id=IBI_RelCallBack type=text/javascript>function AdjustChildrenPosition(){
}
</SCRIPT>

<SCRIPT id=IBI_OptionsScript type=text/javascript>
var cgipath = "cgipath";
var ibirls = "ibirls3";

var rltdyncalendar = "rltdyncalendar";
var gmap = "ibigmap";
var olap="olap";
var olappanebase="olappanebase";
var olapdrill="olapdrill";

var ibixmltree="ibixmltree";

var ibiOptions = new Array(cgipath,ibirls);
</SCRIPT>

<SCRIPT id=IBI_nls type=text/javascript src="/ibi_html/javaassist/nls.js"></SCRIPT>

<SCRIPT id=IBI_nlsVars type=text/javascript src="/ibi_html/javaassist/nlsvars.js"></SCRIPT>

<SCRIPT id=IBI_ibigbl type=text/javascript src="/ibi_html/javaassist/ibi/html/js/ibigbl.js"></SCRIPT>

<SCRIPT id=IBI_ibigblloadCss type=text/javascript>
ibigblloadCss(null);
addIntlTranslatedJS("composertrans.js");
</SCRIPT>
<TITLE>!IBI.AMP.#RPT_TITLE;</TITLE>
<SCRIPT id=clientEventHandlersJS type=text/javascript>

// For App User PFTCTR list
var xmlHttp = false;

try {
	xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}

catch (e) {
	try {
    	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch (e2) {
    	xmlHttp = false;
	}
}

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
	xmlHttp = new XMLHttpRequest();
}

// For App User list
var xml2Http = false;

try {
	xml2Http = new ActiveXObject("Msxml2.XMLHTTP");
}

catch (e) {
	try {
    	xml2Http = new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch (e2) {
    	xml2Http = false;
	}
}

if (!xml2Http && typeof XMLHttpRequest != 'undefined') {
	xml2Http = new XMLHttpRequest();
}

function window_onload() {
 	UpdateData();
 }

//Overwrite function OnInitialUpdate called by UpdateData
function onInitialUpdate(){

	setInitial();
}

function PFTCTRA_onchange(ctrl) {
	removeAllOptions(FEX_USER);
	addOption(FEX_USER,"Loading...", "FOC_NONE");

	var PftCtrA=PFTCTRA.options[PFTCTRA.selectedIndex].value;

	if (PftCtrA != 'FOC_NONE')
	{
		document.getElementById("FEX_USER_TXT").style.visibility='visible';
		document.getElementById("FEX_USER").style.visibility='visible';

		removeAllOptions(FEX_USER);
		addOption(FEX_USER,"Loading...", "_FOC_NULL");
		document.getElementById("FEX_USER").options[0].selected=true;

		callUser (PftCtrA);
	}
	else
	{
		document.getElementById("FEX_USER_TXT").style.visibility='hidden';
		document.getElementById("FEX_USER").style.visibility='hidden';
	}
}

function FEX_USER_onchange(ctrl) {
// When All is selected, remove any other selection
	var FexUser=FEX_USER.options[FEX_USER.selectedIndex].value;

	if (FexUser == 'FOC_NONE')
	{
		removeAllOptions(FEX_USER);
		addOption(FEX_USER,"Loading...", "FOC_NONE");

		var PftCtrA=PFTCTRA.options[PFTCTRA.selectedIndex].value;

		callUser (PftCtrA);
	}
}

// To set initial display fields and attributes
function setInitial() {

	document.getElementById("FEX_USER_TXT").style.visibility='hidden';
	document.getElementById("FEX_USER").style.visibility='hidden';

	callPftCtrA();
}

function callPftCtrA() {
	var url = "/ibi_apps/WFServlet?IBIF_ex=bi_app_audit_pftctr_lst.fex&IBIAPP_app=it";

	xmlHttp.open("GET", url, true);
	xmlHttp.onreadystatechange = UpdatePftCtrA;
	xmlHttp.send(null);
}

function UpdatePftCtrA() {
 if (xmlHttp.readyState == 4)
 {
	if (xmlHttp.status == 200 )
	{
		var responseXML = xmlHttp.responseXML;
		var trs = responseXML.getElementsByTagName("tr");
		document.getElementById("PFTCTRA").options.length = 0;

		for (r = 0; r < trs.length; r++) {
		    var tds = trs[r].getElementsByTagName("td");
			document.getElementById("PFTCTRA").options[r] = new Option(tds[1].firstChild.nodeValue, tds[0].firstChild.nodeValue);
		}

		if (trs.length > 0) {
			if (trs.length == 2) {
				document.getElementById("PFTCTRA").remove(0);
			}

			document.getElementById("PFTCTRA").options[0].selected=true;

			var PftCtrA=PFTCTRA.options[PFTCTRA.selectedIndex].value;
		}
		else
		{
			removeAllOptions(PFTCTRA);
			addOption(PFTCTRA,"No Data Found", "_FOC_NULL");
		}
	}
 }
}

function callUser(PftCtrA) {
	var url = "/ibi_apps/WFServlet?IBIF_ex=bi_app_audit_user_lst.fex&IBIAPP_app=it&PFTCTRA=" + escape(PftCtrA);
	
	xml2Http.open("GET", url, true);
	xml2Http.onreadystatechange = UpdateUser;
	xml2Http.send(null);
}

function UpdateUser() {
 if (xml2Http.readyState == 4)
 {
	if (xml2Http.status == 200 )
	{
		var responseXML = xml2Http.responseXML;
		var trs = responseXML.getElementsByTagName("tr");
		document.getElementById("FEX_USER").options.length = 0;

		for (r = 0; r < trs.length; r++) {
		    var tds = trs[r].getElementsByTagName("td");
			document.getElementById("FEX_USER").options[r] = new Option(tds[1].firstChild.nodeValue, tds[0].firstChild.nodeValue);
		}

		if (trs.length > 0) {
			if (trs.length == 2) {
				document.getElementById("FEX_USER").remove(0);
			}

			document.getElementById("FEX_USER").options[0].selected=true;
		}
		else
		{
			removeAllOptions(FEX_USER);
			addOption(FEX_USER,"No Data Found", "_FOC_NULL");
		}
	}
 }
}

// To add an option text and value to a dropdown list
function addOption(selectbox,text,value)
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
	selectbox.options.add(optn);
}

// To delete all options text and value from a dropdown list
function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		selectbox.remove(i);
	}
}

// To delete an option text and value from a dropdown list
function removeOptions(selectbox1,selectbox2)
{
	var i;
	for(i=selectbox1.options.length-1;i>=0;i--)
	{
		if(selectbox1.options[i].selected)
		{
			var j;
			for(j=selectbox2.options.length-1;j>=0;j--)
			{
				if (selectbox2.options[j].value == selectbox1.options[i].value)
					selectbox2.remove(j);
			}
		}
	}
}

// To clear selected option from a dropdown list
function unsetAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		selectbox.options[i].selected=false;
	}
}

</SCRIPT>

<SCRIPT for=window type=text/javascript eventname="onload">window.onload = function() { window_onload(); }</SCRIPT>
<LINK id=ITEM1 rel=stylesheet type=text/css href="app/deschenes.css"></HEAD>
<BODY style="OVERFLOW: auto; Z-INDEX: 0" nextelementuniquenumber="190" thumbnailscale="4" elementtype="21" edaconnectionrequired="false">             
<SPAN tabIndex=-1 id=FEX_USER_TXT class=formlabel style="HEIGHT: 20px; WIDTH: 180px; POSITION: absolute; LEFT: 220px; Z-INDEX: 316; TOP: 20px" defaultselection="1" persistentuniqueid="compUid_140">User</SPAN>                   </SELECT></SELECT>                                                      
<SELECT onchange=FEX_USER_onchange(this) tabIndex=27 id=FEX_USER language=javascript style="HEIGHT: 90px; WIDTH: 170px; POSITION: absolute; LEFT: 220px; Z-INDEX: 315; TOP: 40px" multiple size=3 defaultselection="1" persistentuniqueid="compUid_139" addquotes="yes" requiredfield="0" name="FEX_USER"> 
<OPTION value=_FOC_NULL noinput="0" displaytext="Loading...">Loading...</OPTION></SELECT>          
<LABEL tabIndex=104 id=PFTCTRA_TXT class=formlabel style="CURSOR: default; HEIGHT: 19px; WIDTH: 190px; POSITION: absolute; LEFT: 20px; Z-INDEX: 365; TOP: 20px" for=PFTCTRA name="combobox6">Office</LABEL> 
<SELECT onchange=PFTCTRA_onchange(this) spellcheck=false tabIndex=24 id=PFTCTRA language=javascript style="OVERFLOW: visible; WIDTH: 190px; OVERFLOW-Y: visible; POSITION: absolute; LEFT: 20px; Z-INDEX: 366; TOP: 40px" size=1 defaultselection="1" persistentuniqueid="compUid_185" requiredfield="1" defaultlocation="0,0,22,99" boundtovariable="1" name="PFTCTRA"> 
<OPTION selected value=_FOC_NULL noinput="0" displaytext="Loading...">Loading...</OPTION></SELECT>          
<INPUT id=layoutinfo style="POSITION: absolute; LEFT: -100px; TOP: -100px" type=hidden resourcectrlids="ITEM1">
<INPUT id=ibiapp_app style="POSITION: absolute; LEFT: -100px; TOP: -100px" type=hidden value="it ibinccen ibisamp myergeau" ismre="1" name="ibiapp_app">
<INPUT id=ibif_ex style="POSITION: absolute; LEFT: -100px; TOP: -100px" type=hidden value=app/sample.htm name="ibif_ex">
<INPUT id=IBIMR_domain style="POSITION: absolute; LEFT: -100px; TOP: -100px" type=hidden value=itr6g4h7/itr6g4h7.htm name="IBIMR_domain">
<INPUT id=IBIMR_folder style="POSITION: absolute; LEFT: -100px; TOP: -100px" type=hidden value=#reportsi3mkm name="IBIMR_folder">
<xml id=focus_xmlelement>
<script type="text/xml" nextelementuniquenumber="166">
	
<rootxmlnode focoption="_FOC_NULL" top="190" left="10" width="150" height="130">
		
<variables>
		</variables>
		
<input_controls>
			
<input_control bindcontrolid="compUid_139" elementtype="9" name="FEX_USER" id="FEX_USER" multiple="1" inbinding="1" top="20" left="580" width="60" height="20" onetimepopulated="1">
				
<link linktype="default" persistentuniqueid="compUid_101">
					
<condition default="1" name="Default" whattodowithcontrol="0" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0">
						
<data_info checkForDuplicateValues="1" sourcetype="typeFex" datasource="app/bi_application_audit_pft_user_lst.fex" displayfield="USER_LIST" datafield="USER_CODE" datatype="0" selectedvalue="FOC_NONE" accept="0" addalloption="1" modifiedrequest="0" operation="NONE" ibiapp_app="" IBIMR_domain="itr6g4h7/itr6g4h7.htm" IBIMR_folder="#reportsi3mkm" dynalldisplayvalue="!IBI.AMP.#ALL;">
							
<![CDATA[]]>
							
<static_values>
								
<static value="_FOC_NULL" display="Loading..." selected="0" noinput="0"></static></static_values></data_info></condition></link></input_control>
			
<input_control bindcontrolid="compUid_185" elementtype="8" name="PFTCTRA" id="PFTCTRA" multiple="0" inbinding="1" top="110" left="140" width="60" height="20" onetimepopulated="1">
				
<link linktype="default" persistentuniqueid="compUid_160">
					
<condition default="1" name="Default" whattodowithcontrol="0" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0">
						
<data_info checkForDuplicateValues="1" datatype="0" datasource="" addalloption="0" sourcetype="typeMaster" cacheruntimedata="0" accept="0" operation="NONE" modifiedrequest="0" displayfield="" datafield="" ibiapp_app="" IBIMR_domain="itr6g4h7/itr6g4h7.htm" IBIMR_folder="#reportsi3mkm" dynalldisplayvalue="!IBI.AMP.#ALL;" selectedvalue="FOC_NONE">
							
<![CDATA[]]>
							
<static_values>
								
<static value="_FOC_NULL" display="Loading..." selected="0" noinput="0"></static></static_values></data_info></condition></link></input_control>
		</input_controls>
		
<other_bound_objects></other_bound_objects>
		
<requests></requests></rootxmlnode></script>
</xml></BODY>
<SCRIPT id=IBI_loader type=text/javascript>
doBeforeLoad();
</SCRIPT>
</HTML>

The two called fex are simple fex that built XML file with desired data for list.

Hope this help

quote:

1- Define the control as static, have only one entry where value = FOC_NONE, display = 'Loading...' and also can be hidden on initial if needed.
2- Built an onChange event where the call is performed to load the real list value and unhide it when completed.

I was thinking -- equivalently, you can set up your loading fex with a toggle switch, so that its action depends on an incoming parameter, which will be supplied by an upstream hidden control. Thus, if &Really EQ 'Truly' it does its thing, generating the appropriate XML response; otherwise it returns a short placeholder xml file. Chain the list control downstream from a hidden text control named Really, that defaults to 'Just kidding'. When the page first loads, a quick call loads the placeholder list. At the appropriate point, your JavaScript sets the hidden control's value to 'Truly', and refreshes the list via IbComposer_ResetDownChainControls(), and at that point you get your full list.

That way you're making standard use of the Composer's artifacts, rather than trying to convert a static control midstream into a dynamic one.

Well thanks to all!

I was kind of worried about setting some default value and trying to load it by calling a fex in JS. Tree Controls can be wacky and not be easy to work with.


I like your approach Jack - I will see if I can get it to work like that.

This message has been edited. Last edited by: MattC,

Well..... I tried your solution j.gross and that works like a champ. I will stick that in my tool box for sure. In doing your solution, I found the real reason of performance since basically with your solution, it just moved the poor performance to the event instead of onload.

The tree control itself has a property called "Select all children" When enabling this it selects all the nodes on load of the hierarchy causing some pretty big overhead.

In my HTML I have JS that stops the Top Parent from being checked on load, so a user can select a lower level and get all of the child records selected.

I think this deserves a case with IBI. Maybe it's fixed in a later release then 8.00.8.

Thanks all for the help.

You're really, truly quite welcome.