PDA

View Full Version : [CLOSED] IE 9- Issue



cwolcott
Mar 25, 2014, 2:13 AM
I was writing this code because of a separate issue I was having, but then I came across this current problem. I know it is a lot of code but hopefully you can find my bug.

No issue running in Chrome or Firefox or IE 11, but I am having issues with IE9 and below.

Run in Chrome or Firefox and select the Cat 2 or Cat 10 radio button then press "Initiate Request" button. This will show the Request window, you can cancel out of it and press the other radio button.

Now launch in IE 9 and select Cat 2 radio button then press "Initiate Request" button. I can continue to try and downsize this if you need me to.

The first image is what I see in IE9, while the second image is what I would have expected (shown in Chrome).

8841 8851



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<script runat="server">
protected void InitiateRequest(object sender, DirectEventArgs e)
{

int catId = Convert.ToInt32(e.ExtraParams["CatId"]);
string catDesc = e.ExtraParams["CatDesc"];
hCatId.Value = catId;

InitiateOptions(catId);
RequestDialog.SetTitle(String.Format("Request - {0}", catDesc));
RequestDialog.Show();
}

protected void ResetDialog(object sender, DirectEventArgs e)
{
AcceptTerms.Checked = false;
AcceptTerms.Disabled = true;

ResetOptions();
}

private void InitiateOptions(int catId)
{

Boolean areAnyFieldsShown = false;

switch (catId)
{
case 0:
break;

case 2:
areAnyFieldsShown = true;
Cat02.AllowBlank = false;
OptionsCat02.Show();
Cat02.FireEvent("ValidityChange");
break;

case 10:
areAnyFieldsShown = true;
Cat10_RequestType.AllowBlank = false;
Cat10_RequestSubType.AllowBlank = false;
OptionsCat10.Show();
Cat10_RequestType.FireEvent("ValidityChange");
Cat10_RequestSubType.FireEvent("ValidityChange");
break;

default:
break;
}

fsOptions.Hidden = !areAnyFieldsShown;

}

private void ResetOptions()
{

switch (Convert.ToInt32(hCatId.Value))
{
case 0:
break;

case 2:
Cat02.Reset();
Cat02.AllowBlank = true;
OptionsCat02.Hide();
Cat02.FireEvent("ValidityChange");
break;

case 10:
Cat10_RequestType.Reset();
Cat10_RequestSubType.Reset();
Cat02.AllowBlank = true;
Cat10_RequestType.AllowBlank = true;
Cat10_RequestSubType.AllowBlank = true;
OptionsCat10.Hide();
Cat10_RequestType.FireEvent("ValidityChange");
Cat10_RequestSubType.FireEvent("ValidityChange");

break;

default:
break;
}
}

</script>
<head runat="server">
<title>Required Fields Issue</title>
<style type="text/css">
.field-note {
font-size: 9px;
white-space: nowrap;
}

.indicator-UpperRight {
margin: -8px 0px 0px -6px;
}

.displayField-Errors {
background-color: #FFD9D9;
font-size: 11px;
line-height: 5px;
}

.acceptTerms {
background-color: #FFFFE8;
font-size: 11px;
}

.ErrorState {
font-size: 11px;
padding: 0px 5px 2px 20px;
height: 20px;
line-height: 22px;
background: no-repeat 0 0;
cursor: default;
background-position: center left;
}

.ErrorState-invalid {
color: #C30;
background-color: #FFD9D9;
background-image: url(../icons/exclamation-png/ext.axd);
}

.ErrorState-valid {
color: #090;
background-color: #D9FFD9;
background-image: url(../icons/accept-png/ext.axd);
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Window ID="RequestDialog" runat="server" ClientIDMode="Static" Icon="User" Title="Request"
Closable="false" Resizable="false" Height="420" Width="500" BodyPadding="5"
Border="false" Layout="BorderLayout" Modal="true" Hidden="true">
<HtmlBin>
<script type="text/javascript">
function closeRequestDialog() {
App.RequestDialog.close();
}

function publishInitalizeRequest() {
var data = new Array();
data[0] = App.RequestCatGroup.getChecked()[0].tag;
data[1] = App.RequestCatGroup.getChecked()[0].inputValue;
Ext.net.Bus.publish('Request.Initiate', data);
}
</script>
</HtmlBin>
<MessageBusDirectEvents>
<ext:MessageBusDirectEvent Name="Request.Initiate" OnEvent="InitiateRequest">
<ExtraParams>
<ext:Parameter Name="CatId" Value="data[0]" Mode="Raw" />
<ext:Parameter Name="CatDesc" Value="data[1]" Mode="Raw" />
</ExtraParams>
</ext:MessageBusDirectEvent>
</MessageBusDirectEvents>
<Items>
<ext:Panel ID="TermsOfUse" runat="server" ClientIDMode="Static" Region="East" BodyPadding="5"
Width="250" Title="Terms of Use"
Collapsible="true" Collapsed="true" HideCollapseTool="true">
<Listeners>
<Float Handler="App.AcceptTerms.enable();" />
</Listeners>
</ext:Panel>
<ext:Panel ID="ErrorPanel" runat="server" ClientIDMode="Static" Region="South" Icon="Error"
BodyPadding="5" Height="150" Title="Form Errors"
Collapsible="true" Collapsed="true" Layout="FitLayout">
<Items>
<ext:DisplayField ID="DisplayErrors" runat="server" ClientIDMode="Static" ReadOnly="true"
HideLabel="true" Cls="displayField-Errors" />
</Items>
</ext:Panel>
<ext:FormPanel ID="RequestForm" runat="server" Frame="true" Region="Center" DefaultAnchor="100%"
AutoScroll="true">
<HtmlBin>
<script type="text/javascript">
function updateErrorState(form) {
var me = form, errorCmp, fields, error;

if (me.hasBeenDirty || me.getForm().isDirty()) {

errorCmp = me.down('#formErrorState');
fields = me.getForm().getFields();
errors = [];

fields.each(function (field) {
if (!field.isHidden()) {
Ext.Array.forEach(field.getErrors(), function (error) {
errors.push({ name: field.getFieldLabel(), error: error });
})
}
})

populateErrorDetails(errorCmp, errors);
me.hasBeenDirty = true;
}
}

function populateErrorDetails(cmp, errors) {
var baseCls = cmp.baseCls;
var tip = cmp.tooltips[0];
var errorCnt = errors.length;

if (errorCnt == 0) {
cmp.addCls(baseCls + '-valid');
cmp.removeCls(baseCls + '-invalid');
cmp.update("Form is complete");

App.ErrorPanel.collapse(null, false);
App.ErrorPanel.setVisible(false);
tip.setDisabled(true);
}
else {
cmp.addCls(baseCls + '-invalid');
cmp.removeCls(baseCls + '-valid');
cmp.update(Ext.String.format('Form is incomplete [{0} issues]', errorCnt));

var buf = new Array(errorCnt), pos = 0;
for (var i = 0, j = errorCnt; i < j; i++) {
buf[pos++] = Ext.String.format('&nbsp&nbsp<b>{0}</b>: {1}', errors[i].name, errors[i].error);
}

buf[0] = '<p>' + buf[0];
buf[errorCnt - 1] += '</p>';
App.DisplayErrors.update(buf.join('</p><p>'));
App.ErrorPanel.setVisible(true);
tip.setDisabled(false);
}

}

function floatTermsOfUse(e) {
App.TermsOfUse.floatCollapsedPanel();
}

function floatFormErrors(e) {
if (App.ErrorPanel.isVisible() == true) {
if (App.ErrorPanel.collapsed == false)
App.ErrorPanel.collapse();
else
App.ErrorPanel.expand();
}
}
</script>
</HtmlBin>
<Items>
<ext:Hidden ID="hCatId" runat="server" ClientIDMode="Static" />
<ext:FieldSet ID="fsOptions" runat="server" Title="Options" Collapsible="true">
<Items>
<ext:Container ID="OptionsCat02" runat="server" Layout="HBoxLayout" Hidden="true">
<Items>
<ext:ComboBox ID="Cat02" runat="server" FieldLabel="Choices" MultiSelect="true" Editable="false"
Flex="1" PaddingSpec="0 0 5 0" Note="A long note field to show the issue." NoteAlign="Top"
NoteCls="field-note" IndicatorIcon="BulletRed" IndicatorCls="indicator-UpperRight" >
<Items>
<ext:ListItem Value="1" Text="Choice #1" />
<ext:ListItem Value="2" Text="Choice #2" />
</Items>
<Triggers>
<ext:FieldTrigger Icon="Clear" />
</Triggers>
<Listeners>
<TriggerClick Handler="this.clearValue();" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:Container>
<ext:Container ID="OptionsCat10" runat="server" Layout="VBoxLayout" Hidden="true">
<Items>
<ext:ComboBox ID="Cat10_RequestType" runat="server" FieldLabel="Request Type" Editable="false"
Width="400" IndicatorIcon="BulletRed" IndicatorCls="indicator-UpperRight">
<Items>
<ext:ListItem Value="Full" Text="Full Release" />
<ext:ListItem Value="Partial" Text="Partial Release" />
</Items>
<Triggers>
<ext:FieldTrigger Icon="Clear" />
</Triggers>
<Listeners>
<TriggerClick Handler="this.clearValue();" />
</Listeners>
</ext:ComboBox>
<ext:ComboBox ID="Cat10_RequestSubType" runat="server" FieldLabel="Request Subtype"
Editable="false"
Width="400" IndicatorIcon="BulletRed" IndicatorCls="indicator-UpperRight">
<Items>
<ext:ListItem Value="A" Text="ABC" />
<ext:ListItem Value="X" Text="XYZ" />
</Items>
<Triggers>
<ext:FieldTrigger Icon="Clear" />
</Triggers>
<Listeners>
<TriggerClick Handler="this.clearValue();" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:Container>
</Items>
</ext:FieldSet>
<ext:FieldContainer runat="server" Layout="HBoxLayout" AnchorHorizontal="100%" Cls="acceptTerms"
CombineErrors="true" MsgTarget="None">
<Items>
<ext:Checkbox ID="AcceptTerms" runat="server" ClientIDMode="Static" Name="acceptTerms"
FieldLabel="Terms of Use" Disabled="true" HideLabel="true" PaddingSpec="2 0 5 5">
<GetErrors Handler="return this.getValue() ? [] : ['You must accept the Terms of Use'];" />
</ext:Checkbox>
<ext:Label ID="AcceptTermsLabel" runat="server" PaddingSpec="5 0 5 5" Html="I have read and accept the <a href='#'>Terms of Use</a>.">
<Listeners>
<AfterRender Handler="this.el.on('click', floatTermsOfUse);" />
</Listeners>
</ext:Label>
<ext:DisplayField runat="server" Flex="1" />
<ext:Label ID="RequiredFieldLabel" runat="server" Icon="BulletRed" IconCls="indicator-UpperRight"
Text="- Required Fields" PaddingSpec="5 5 0 0" />
</Items>
</ext:FieldContainer>
</Items>
<DockedItems>
<ext:Container runat="server" Dock="Bottom" PaddingSpec="5 0 5 0">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Middle" />
</LayoutConfig>
<Items>
<ext:Component runat="server" ItemID="formErrorState" BaseCls="ErrorState">
<ToolTips>
<ext:ToolTip runat="server" AutoHide="true" Html="Click for details ..." />
</ToolTips>
<Listeners>
<AfterRender Handler="this.el.on('click', floatFormErrors);" />
</Listeners>
</ext:Component>
<ext:ToolbarFill runat="server" />
<ext:Button runat="server" FormBind="true" Disabled="true" Text="Sumbit" Icon="BulletGo">
</ext:Button>
<ext:ToolbarSpacer runat="server" Width="6" />
<ext:Button runat="server" Text="Cancel" Icon="BulletCross" OnClientClick="closeRequestDialog"
OnDirectClick="ResetDialog" />
</Items>
</ext:Container>
</DockedItems>
<Listeners>
<FieldValidityChange Fn="updateErrorState" />
<FieldErrorChange Fn="updateErrorState" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Window>
<ext:FormPanel runat="server" BodyPadding="2" Width="350">
<Items>
<ext:RadioGroup ID="RequestCatGroup" runat="server" ClientIDMode="Static"
Vertical="false" AllowBlank="false">
<Items>
<ext:Radio runat="server" Name="RequestTypes" BoxLabel="Category #2" InputValue="Category #2"
TagString="2" />
<ext:Radio runat="server" Name="RequestTypes" BoxLabel="Category #10" InputValue="Category #10"
TagString="10" />
<ext:Radio runat="server" Name="RequestTypes" BoxLabel="No Fields" InputValue="No Fields"
TagString="0" />
</Items>
</ext:RadioGroup>
</Items>
<Buttons>
<ext:Button runat="server" Text="Initiate Request" FormBind="true" Disabled="true"
Icon="BulletGo" OnClientClick="publishInitalizeRequest" />
</Buttons>
</ext:FormPanel>
</body>
</html>

Daniil
Mar 25, 2014, 7:57 AM
Hi Chris,

A JavaScript error occurs for me in IE.

Please replace

App.DisplayErrors.update(buf.join('</p><p>'));
with

App.DisplayErrors.setValue(buf.join('</p><p>'));

cwolcott
Mar 25, 2014, 12:04 PM
Thank you, please close. I reused the Registration Form (http://examples2.ext.net/#/Form/Miscellaneous/Registration_Form/) example, but changed the reporting of errors from a Tool Tip to an Panel/DisplayField and forgot to change from an update to setValue.

Sorry for wasting your time.