Chrome/Edge Javascript exception when tab through Gen list box
search cancel

Chrome/Edge Javascript exception when tab through Gen list box

book

Article ID: 272076

calendar_today

Updated On:

Products

Gen

Issue/Introduction

When tabbing through a Gen 8.6 Web Generation list box under a Chrome or native Edge browser, receive a Javascript error message:
Javascript exception: TypeError: Cannot read properties of undefined (reading 'srcElement') | function toString() { [native code] }

This issue does not occur when using Internet Explorer (IE) or Edge in IE mode.

Resolution

The user advised that the problem occurs on any list box. Gen Support and Engineering were initially not able to recreate the problem but that is because the user loads their Gen application from within a separate html frame so that components used for communication with external devices are available across the application. They can't change this without breaking their current application functionality.
NOTE: Running a Gen application from within a separate html frame is not officially supported.
However, the user researched further as follows:

WORKAROUND #1
When the page loads ief_Make.js sets an ns6 variable against the current window.
***
try{
 var ie4 = false;
 var ns4 = false;
 var ns6 = false;
 if ((navigator.userAgent.indexOf("Trident") != -1) || (navigator.appName.indexOf("Internet Explorer") != -1)) {
    ie4 = true;
 } else {
    ns4 = ((navigator.appName.indexOf("Netscape") != -1) && (navigator.appVersion.substring(0,1) <= 4));
    ns6 = ((navigator.appName.indexOf("Netscape") != -1) && (navigator.appVersion.substring(0,1) > 4));
 }
***
Using the Chrome developer tools, they set a breakpoint on genListBoxKeydown in ief_Listbox.js. When select a data item in the listbox and tab to the next field, the breakpoint is hit and see that parent (window) does not have an ns6 variable to check so this test (which is determining whether to take the IE or chrome path) is always false. However, there is an AppWindow.ns6 which is set correctly.

As a test, they changed:
  if (parent.ns6) { thisEvt = evt ; thisEl=thisEvt.target ; }
to:
  if (parent.ns6 || AppWindow.ns6) { thisEvt = evt ; thisEl=thisEvt.target ; }
and this worked around the issue.
NOTE: They changed the code everywhere the same logic exists in the Gen runtime files ief_Make.js and ief_Listbox.js.
Further tests confirmed this workaround is working. However, they have since understood the reason why "parent.ns6" is not set per WORKAROUND #2 below which they will use as the solution going forward.

WORKAROUND #2
This is how the user invokes their Gen application:
***
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>Home</title>
</head>
<frameset rows="100%,*">
<frame src="pstep1.jsp" name="appcontent" id="appcontent" frameborder="0" marginwidth="0" marginheight="0" noresize/>
<frame src="SessionApplet.jsp" name="sessionapp" id="sesssionapp" frameborder="0" marginwidth="0" marginheight="0" noresize/>
<noframes>
 Sorry, your browser does not handle frames!
</noframes>
</frameset>
</html>
***

The parent window is not created by Gen so does not have the ns6 variable thus causing the error.
As a test, they put the script logic from the top of the Gen runtime file ief_Make.js into their html file and it has also worked around the issue.

***
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>Home</title>
</head>
<script>
 var ie4 = false; 
 var ns4 = false; 
 var ns6 = false; 
 if ((navigator.userAgent.indexOf("Trident") != -1) || (navigator.appName.indexOf("Internet Explorer") != -1)) { 
    ie4 = true; 
 } else { 
    ns4 = ((navigator.appName.indexOf("Netscape") != -1) && (navigator.appVersion.substring(0,1) <= 4)); 
    ns6 = ((navigator.appName.indexOf("Netscape") != -1) && (navigator.appVersion.substring(0,1) > 4)); 
 } 
</script>
<frameset rows="100%,*">
<frame src="pstep1.jsp" name="appcontent" id="appcontent" frameborder="0" marginwidth="0" marginheight="0" noresize/>
<frame src="SessionApplet.jsp" name="sessionapp" id="sesssionapp" frameborder="0" marginwidth="0" marginheight="0" noresize/>
<noframes>
 Sorry, your browser does not handle frames!
</noframes>
</frameset>
</html>
***

NOTE: 
The other option for WORKAROUND #2 is to reference the ief_Make.js itself in the html file header section i.e.
***
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>Home</title>
<script src="ief_Make.js"></script>
</head>
<frameset rows="100%,*">
<frame src="pstep1.jsp" name="appcontent" id="appcontent" frameborder="0" marginwidth="0" marginheight="0" noresize/>
<frame src="SessionApplet.jsp" name="sessionapp" id="sesssionapp" frameborder="0" marginwidth="0" marginheight="0" noresize/>
<noframes>
 Sorry, your browser does not handle frames!
</noframes>
</frameset>
</html>
***
Gen Engineering said that might be a safer alternative than just inserting the snippet of code that sets the ns6 variable. However, regardless of which approach is used the advice is to test thoroughly to check for any unexpected behaviour.
It was decided to leave WORKAROUND #2 as documented because no problems were found during testing.

Additional Information

Gen Engineering and Support later recreated the problem by using a simple Web Generation application with a list box and created an html frame file iframe.html as follows:
===
<HTML> 
<!-- Add this file in the .war file  -->
<HEAD> 

<TITLE>Page Title</TITLE> 
</HEAD> 
<BODY>
<IFRAME SRC="pstep1.jsp" width="100%" height="800">
</IFRAME>
</BODY> 
</HTML>
===
During the Assemble step, they added the iframe.html into the war file as an additional file.
When running the Gen application from within the frame (using http://localhost:8080/appcontext/iframe.html), and tab around the list box cells the same Javascript exception was seen.
 
After including the ief_Make.js file in a script tag in the iframe.html file, as shown below, the application appeared to execute successfully when tabbing around the list box cells.
***
<HTML> 
<!-- Add this file in the .war file  --> 
<HEAD> 

<TITLE>Page Title</TITLE> 
<!-- Add this script tag so parent.ns6 gets set  --> 
<SCRIPT LANGUAGE='JavaScript' SRC='ief_Make.js' TYPE='text/javascript'></SCRIPT>
</HEAD> 
<BODY>
<IFRAME SRC="pstep1.jsp" width="100%" height="800">
</IFRAME>
</BODY> 
</HTML>
***

Engineering also debugged the execution to understand why the problem using a separate frame occurs in Chrome and native Edge but does not occur with IE and Edge in IE Mode. The following same code from the genListBoxKeydown and genListBoxKeypress functions is executed for all browsers:

***
  if (parent.ns6) { thisEvt = evt ; thisEl=thisEvt.target ; }
  else { 
    if(parent.AppWindow != null)
      thisEvt = parent.AppWindow.event ;   
    else
      thisEvt = AppWindow.event;
    thisEl=thisEvt.srcElement ; 
  }
*** 
In all the browsers, parent.ns6 and parent.AppWindow are undefined when running the Gen application in a frame. This causes the code to then go to the statement "thisEvt = AppWindow.event;".
In Chrome and native Edge, AppWindow.event is also undefined, so thisEvt is null. This causes the Javascript exception when the code tries to reference thisEvt.srcElement.
In IE and Edge in IE mode, AppWindow.event is defined and so thisEvt gets set correctly with no Javascript exception. This allows thisEl to be set to the correct element.

 
NOTE: When the Gen application is run normally i.e. not from within a frame, the parent.ns6 and parent.AppWindow are defined and the variables thisEvt and thisEl get set correctly.

Powered by Wolken Software