How To Make Dovetail Agent and Admin Compatible With Internet Explorer 9 and 10
New versions of Dovetail Agent and Admin are in the works to allow compatibility with Internet Explorer versions 9 and 10.
Although there are going to be more reasons to upgrade to the latest version, some Dovetail Agent and Admin users may consider making the older versions they currently use IE9 or IE10 compatible while remaining existing compatibility with IE8 intact. Essentially, the same code should run on all three versions of Internet Explorer, no version detection should be required to modify functionality or appearance.
This can be achieved by a set of modifications to the source code and web site configuration.
This is a list of things that need to change:
- Enforce compatibility mode
- Remove DOCTYPE statements and certain meta tags
- Add meta tags where needed
- Change the handling of ‘required’ property
- Discontinue the use of ‘required’ and ‘errShow’ properties within styles
- Remove ‘<!–[if IE …]>’ as no longer supported
- Apply code patches as provided.
Details:
-
Enforce compatibility mode
The goal of IE8 / IE9 / IE10 compatibility is achieved by forcing the browser into IE5 Compatibility Mode by adding a custom header to web.config file. This file must be located in the folder pointed to by the “Physical Path” parameter specified for the Dovetail Agent / Admin application in IIS. Dovetail Agent / Admin ship without this file so create it with the following content:
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <httpProtocol> <customHeaders> <add name="X-UA-Compatible" value="IE=5" /> </customHeaders> </httpProtocol> </system.webServer> </configuration> -
If web.config file already exists, just add the custom header.
This allows for removal of DOCTYPE statements and meta tags, and also prevents the user from changing Compatibility View for the applications.
- Remove DOCTYPE statements and certain meta tags
All DOCTYPE statements must be removed, except those in any plug-in code, like jquery or spellcheck. Also, all meta tags with http-equiv=”X-UA-Compatible” property set to enforce certain level must be removed. However, some pages will have to have meta tags with http-equiv=”X-UA-Compatible” property added, as explained next.
- Add meta tags where needed
The following pages need to have meta tags added:
ce/ce_export_save.asp – Dovetail Agent only
login/login.asp – Dovetail Agent and Admin
The tag must be in this form:
<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />
- Change the handling of ‘required’ property
Dovetail Agent and Admin use the ‘required’ property on HTML elements for highlighting and enforcing of values for data fields that must have some value before being saved. Before HTML 5, the ‘required’ property was a custom one, but now it’s part of HTML specification. Unfortunately, IE 10 has a bug which makes it ignore this property, rendering it useless. This impacts the detection method and forces the following coding rules:
– use only ‘required=true’ in HTML code, don’t use ‘required=false’
– don’t use just ‘required’ without ‘=true’ in HTML code
– if this property must change dynamically, it can be set by use of .setAttribute(“required”,”true”) or jQuery equivalent. Just remember to never set it to “false”, should you need to do it – remove the attribute instead.
- Discontinue the use of ‘required’ and ‘errShow’ properties within styles
Because of the abovementioned problem with ‘required’ property in IE10 we are also removing the ability to specify both ‘required’ and ‘errShow’ properties within style definition for an HTML element. They may be left there if present but they will no longer have any effect. To make them work, move them from the inside of the style string to the outside, so they are at the same level as the style property itself.
- Remove ‘<!–[if IE …]>’
This conditional statement is no longer supported in IE 10. Redesign all code dependent on it.
- Apply certain code patches
We are providing few code patches to be applied as specified:
IE Developer Tools have an option to change Browser Mode and Document Mode for a page. Should this happen, it may render a Dovetail Agent or Admin page out of alignment or not working. For this reason we added a mode detection mechanism which is going to ask the user to switch back to the proper mode. This mechanism needs to be added to include/inc_utility.asp module. See Code Patch #1.
When a result of a Query is to be exported to an html file it must contain proper meta tag. The ce/ce_export_save.asp needs to be modified. See Code Patch #2.
Because of the abovementioned problem with ‘required’ property in IE10, two functions: Validate() and ColorRequired() in code/client_utility.js module need to change. Replace these two functions with Code Patch #3.
Because the ‘<!–[if IE …]>’ conditional statement is no longer supported in IE 10, there are changes to console/about.asp module. Replace entire module with Code Patch #4.
Code Patches:
Patch #1 for Dovetail Agent:
In include/inc_utility.asp module, after these lines:
Response.Write("<script language="javascript">");
Response.Write("var strAppPath = '" + (httpHeader + applicationAlias) + "';");
Response.Write("var roomLimit = " + Session("x_num_recent_obj") + ";");
add these lines:
var documentMode = Request.ServerVariables("URL")+"";
documentMode = (documentMode.indexOf("login.asp") == -1) ? 5 : 8;
Response.Write("if(document.documentMode>"+documentMode+")alert("You must use Compatibility View mode for this page if it has not been disabled.\\n\\nIf available, please click Compatibility View mode in Tools menu\\nor Compatibility View icon in navigation bar.\\n\\nAlso, do not change Browser Mode or Document Mode in IE Tools.\\nBrowser Mode must be set to the highest value available.\\nDocument Mode must be set to the value marked as (Page Default).");");
Patch #1 for Dovetail Admin:
In include/inc_utility.asp module, replace this line:
Response.Write('var strAppPath = "' + Session.Contents('VirtualDir') + '"');
with these lines:
Response.Write('var strAppPath = "' + Session.Contents('VirtualDir') + '";');
var documentMode = Request.ServerVariables("URL")+"";
documentMode = (documentMode.indexOf("login.asp") == -1) ? 5 : 8;
Response.Write("if(document.documentMode>"+documentMode+")alert('You must use Compatibility View mode for this page if it has not been disabled.\\n\\nIf available, please click Compatibility View mode in Tools menu\\nor Compatibility View icon in navigation bar.\\n\\nAlso, do not change Browser Mode or Document Mode in IE Tools.\\nBrowser Mode must be set to the highest value available.\\nDocument Mode must be set to the value marked as (Page Default).');");
Patch #2 for Dovetail Agent only:
In ce/ce_export_save.asp module, after these lines:
if(htmlFile) {
rw("<html>");
add this line:
rw("\n<meta http-equiv="X-UA-Compatible" content="IE=8" />");
Patch #3 for Dovetail Agent:
In code/client_utility.js module, replace the Validate() and ColorRequired() functions:
function Validate() {
var bError = false;
var strMsg = "Please enter values for the following required fields:\n";
var objInput;
var strValue;
var rer = /\brequired\b(?![\s]*?\=[\s]*?['"]?false['"]?)/i;
// iterate through all of the objects in the form marked as required
// and validate the objects according to type
//
// getElementsByTagName with a wildcard is only supported on IE6 up not on IE5.5
// so, if we get an empty array back from the wildcard search,
// then use the old IE methods (document.all)
var all_fields = document.getElementsByTagName("*");
var element_count = all_fields.length;
var bOldBrowser = false;
if(element_count <= 0) {
element_count = document.all.length;
var bOldBrowser = true;
}
for(var i = 0;i < element_count; i++) {
if (bOldBrowser) {
objInput = document.all[i];
} else {
objInput = all_fields[i];
}
var ih = objInput.innerHTML;
var oh = objInput.outerHTML;
oh = oh.replace(ih,"");
if( (objInput.getAttribute("required") == "true") || rer.test(oh) ) {
switch(objInput.type) {
// validate text and hidden boxes
case "text":
case "input":
case "textarea":
case "hidden":
case "password":
try {
strValue = objInput.value;
// remove spaces
strValue = strValue.replace(/ /g, "");
if((strValue.length == 0 || strValue == "?/?/??:?:?") && objInput.getAttribute("errShow").length > 0) {
strMsg += " -- " + objInput.getAttribute("errShow") + "\n";
bError = true;
}
} catch(e) { }
break;
// validate dropdown boxes
case "select-one":
try {
strValue = objInput.options[objInput.selectedIndex].innerHTML;
if((strValue.length == 0 || strValue.slice(0,14).toUpperCase() == "PLEASE SPECIFY") && (objInput.getAttribute("errShow").length > 0)) {
strMsg += " -- " + objInput.getAttribute("errShow") + "\n";
bError = true;
}
} catch(e) { }
break;
}
}
}
$("textarea")
.each(function() {
if($(this).attr("validateSpelling") == "true") {
var id = $(this).attr("id");
initializeJavaScriptSpellCheckObject();
if(!oSpell.spellCheckWindowTest(id)) {
spellingError = "Spelling Correction required for " + id;
if(bError) {
strMsg = spellingError + "\n\n" + strMsg;
} else {
strMsg = spellingError;
}
bError = true;
}
}
});
if(bError) alert(strMsg);
return !bError;
}
function ColorRequired() {
var the_color = GetRequiredColor();
var rer = /\brequired\b(?![\s]*?\=[\s]*?['"]?false['"]?)/i;
$("input,textarea,select").each(function(){
var ih = $(this).attr("innerHTML");
var oh = $(this).attr("outerHTML");
oh = oh.replace(ih,"");
if(rer.test(oh)) $(this).css("background-color",the_color);
});
}
Patch #3 for Dovetail Admin:
In code/client_utility.js module, replace the Validate() and ColorRequired() functions:
function Validate() {
var bError = false;
var strMsg = "Please enter values for the following required fields:\n";
var objInput;
var strValue;
var rer = /\brequired\b(?![\s]*?\=[\s]*?['"]?false['"]?)/i;
// iterate through all of the objects in the form marked as required
// and validate the objects according to type
//
// getElementsByTagName with a wildcard is only supported on IE6 up not on IE5.5
// so, if we get an empty array back from the wildcard search,
// then use the old IE methods (document.all)
var all_fields = document.getElementsByTagName("*");
var element_count = all_fields.length;
var bOldBrowser = false;
if(element_count <= 0) {
element_count = document.all.length;
var bOldBrowser = true;
}
for(var i = 0;i < element_count; i++) {
if (bOldBrowser) {
objInput = document.all[i];
} else {
objInput = all_fields[i];
}
var ih = objInput.innerHTML;
var oh = objInput.outerHTML;
oh = oh.replace(ih,"");
if( (objInput.getAttribute("required") == "true") || rer.test(oh) ) {
switch(objInput.type) {
// validate text and hidden boxes
case "text":
case "input":
case "textarea":
case "hidden":
case "password":
try {
strValue = objInput.value;
// remove spaces
strValue = strValue.replace(/ /g, "");
if((strValue.length == 0 || strValue == "?/?/??:?:?") && objInput.getAttribute("errShow").length > 0) {
strMsg += " -- " + objInput.getAttribute("errShow") + "\n";
bError = true;
}
} catch(e) { }
break;
// validate dropdown boxes
case "select-one":
try {
strValue = objInput.options[objInput.selectedIndex].innerHTML;
if((strValue.length == 0 || strValue.slice(0,14).toUpperCase() == "PLEASE SPECIFY") && (objInput.getAttribute("errShow").length > 0)) {
strMsg += " -- " + objInput.getAttribute("errShow") + "\n";
bError = true;
}
} catch(e) { }
break;
}
}
}
if(bError) alert(strMsg);
return !bError;
}
function ColorRequired() {
var the_color = "khaki";
var rer = /\brequired\b(?![\s]*?\=[\s]*?['"]?false['"]?)/i;
$('input,textarea,select').each(function(){
var ih = $(this).attr("innerHTML");
var oh = $(this).attr("outerHTML");
oh = oh.replace(ih,"");
if(rer.test(oh)) $(this).css("background-color",the_color);
});
}
Patch #4 for Dovetail Agent only:
In console/about.asp module, replace these lines:
<td><p><!--[if IE 6]> Internet Explorer 6<br /> <![endif]--> <!--[if IE 7]> Internet Explorer 7<br /> <![endif]--> <!--[if IE 8]> Internet Explorer 8<br /> <![endif]--> <!--[if IE 9]> Internet Explorer 9<br /> <![endif]--> </p></td>
with this line:
<td><p id="browserVersion"></p></td>
then, after this line:
<p align="center">© 2002-<%=copyrightYear%> by Dovetail Software, Inc. All rights reserved.</p>
add these lines:
<script language="javascript">
$("#browserVersion").text(navigator.appName+" "+$.browser.version);
</script>
Important Note:
Dovetail Agent and Admin use several third-party plug-ins and utilities. Both applications have been tested for IE9 and IE10 compatibility with specific versions of these software libraries:
jQuery 1.6.1
TableSorter 2.0
Validation Plugin 1.9.0
maxlength 1.2
jqGrid 3.8.2
You are advised to avoid upgrading these libraries to any higher level. Should this be necessary for some other reason, an extensive testing of the application(s) is going to be required to verify IE version compatibility.
Summary:
Making older versions of Dovetail Agent and Admin is fairly easy task but requires diligence. The level of custom changes may add to the complexity, so thorough testing is advised. Dovetail Software Inc. would be happy to assist you in making this task successful.
