PDA

View Full Version : [CLOSED] Error : Unable to get value of the property 'setDisplayed': object is null or undefined



PriceRightHTML5team
Jun 11, 2014, 7:32 AM
Hi,

My Environment is as follows,

Ext.net version : 2.2.0.26551
Ext.net runtime version : 4.0.30319

Ext.net.Utilities version : 2.2.0.0
Ext.net.Utilities runtime version : 2.0.50727

OS : Windows 7 professional

Browser : IE 9 (It works fine in chrome)

.Net Framework : 4.5

I have the partial view usage as follows (an overall page structure)

Index.cshtml
--> Loads _ConfigureRules.cshtml (partialview) at first load (into first container of Index.cshtml)
--> Loads another partial view, _RulePanels.cshtml after combo selection change event (raised from above partial view), gets loaded (into second container of Index.cshtml)
--> Another partial view (_RadioTextFields.cshtml) is used for repeating a text field control, and is used in _RulesPanels.cshtml partial view

When the above event is raised I get the following error, and I found that this error is raised specifically because of
Two RadioButtonGroups, whose Ids are, rdbListCombinedType, and rdbListRuleTypes (currently commented from code)

Unable to get value of the property 'setDisplayed': object is null or undefined
Line of error : this.owner.indicatorEl.parent("td").setDisplayed(!errorSide);
where, 'this.owner.indicatorEl.parent("td")' is null, hence error

Following is the code for each partial view and normal view involved

[Index.cshtml]



@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
var X = Html.X();
}

@Html.X().ResourceManager()
<script>

var cumulativeTab = function (incountryId, inContainerId, actionName) {
$('#' + inContainerId).empty();
Ext.net.DirectMethod.request({
url: actionName,
json: true,
eventMask: { showMask: true },
params: {
containerId: inContainerId,
countryId: incountryId
}
});
}

var searchText = function (textBox) {
var term = textBox.value,
id = textBox.id,
ulsOfItems = $('#itemSelectorCountries ul.x-list-plain'),
srchKeyword = "\\b" + term.toUpperCase() + ".*\\b",
srchRegEx = new RegExp(srchKeyword);


if (id.toLowerCase() == 'txtsearchavail') {
var ul = $(ulsOfItems[0]),
lis = ul.find('li');

if (term != '') {
lis.removeClass('x-boundlist-selected');
lis.each(function (index) {
var li = $(this),
text = li.text().toUpperCase();

if (text.match(srchRegEx)) {
li.attr('class', li.attr('class') + ' ' + 'x-boundlist-selected');

ul.animate({
scrollTop: li.position().top
}, 'slow');

ul.scrollTop(li.position().top);

return false;
}
});
}
else {
lis.removeClass('x-boundlist-selected');
}

}
else {
var ul = $(ulsOfItems[1]),
lis = ul.find('li');

if (term != '') {
lis.removeClass('x-boundlist-selected');
lis.each(function () {
var li = $(this),
text = li.text();

if (text.match(srchRegEx)) {
li.attr('class', li.attr('class') + ' ' + 'x-boundlist-selected');
return false;
}
});
}
else {
lis.removeClass('x-boundlist-selected');
}
}

};

var clearList = function (textBox) {

var id = textBox.id,
ulsOfItems = $('#itemSelectorCountries ul.x-list-plain');

if (id.toLowerCase() == 'txtsearchavail') {
var ul = $(ulsOfItems[0]),
lis = ul.find('li');
lis.removeClass('x-boundlist-selected');
} else {
var ul = $(ulsOfItems[1]),
lis = ul.find('li');
lis.removeClass('x-boundlist-selected');
}

};

var expandCollapsePanels = function () {

var activeTabId = App.tabPanelReferenceRules.getActiveTab().id,
tabName = activeTabId == 'pnlInitialRules' ? 'IntialReferenceRules' : 'ReReferencingRules';

Ext.getCmp('pnlReferencedCountries' + tabName).toggleCollapse();
Ext.getCmp('pnlRules' + tabName).toggleCollapse();
Ext.getCmp('pnlPriceType' + tabName).toggleCollapse();
Ext.getCmp('pnlUpdateFrequency' + tabName).toggleCollapse();
Ext.getCmp('pnlSKUPrices' + tabName).toggleCollapse();
Ext.getCmp('pnlRefereceLags' + tabName).toggleCollapse();

};



var rdbRuleTypeChanged = function (option, oldValue, newValue) {

var activeTabId = App.tabPanelReferenceRules.getActiveTab().id,
tabName = activeTabId == 'pnlInitialRules' ? 'IntialReferenceRules' : 'ReReferencingRules',
selectedDataTypeCode = $(Ext.getCmp('rdbListRuleTypes' + tabName).getChecked()[0].inputEl).attr('data-typecode'),
isrequiredformula = $(Ext.getCmp('rdbListRuleTypes' + tabName).getChecked()[0].inputEl).attr('data-isrequiredformula'),
isRequiredLowestOfN = $(Ext.getCmp('rdbListRuleTypes' + tabName).getChecked()[0].inputEl).attr('data-isrequiredlowestofn'),
divTextFieldsId = Ext.getCmp('divTextFieldsRepeater' + tabName).id,
textAreaPanel = Ext.getCmp('pnlExpression' + tabName),
divTextFields = $('#' + divTextFieldsId);

divTextFields.find('input[data-typecode]').css('visibility', 'hidden');
textAreaPanel.hide();
if (isRequiredLowestOfN == "True") {
divTextFields.find('input[data-typecode=' + selectedDataTypeCode + ']').css('visibility', 'visible');
}

if (isrequiredformula == "True") {
textAreaPanel.show();
}
else {
textAreaPanel.hide();
}


};

var LoadTabByCountry = function (a, countryCD, c) {
var activeTabId = App.tabPanelReferenceRules.getActiveTab().id,
containerId = '',
actionName = '';

if (activeTabId == "pnlInitialRules") {
containerId = "containerInitialPanels";
actionName = '@( Url.Action("LoadInitialRulesTab", "ReferenceRules"))';
}
else {
containerId = "containerReReferencePanels";
actionName = '@( Url.Action("LoadReReferencingRules", "ReferenceRules"))';
}

if (countryCD != undefined) {
cumulativeTab(countryCD, containerId, actionName);
}

};

</script>

@(X.TabPanel()
.ID("tabPanelReferenceRules")
.ActiveTabIndex(0)
.Width(1400)
.MinHeight(1000)
.Plain(true)
.Items(
X.Panel()
.ID("pnlInitialRules")
.Title("Initial Reference Rules")
.Items(
X.Container()
.ID("containerInitialCountries")
.Layout(LayoutType.Container)
.ContentFromAction("LoadCountries", new { containerId = "containerInitialCountries", tabType = PR.LS.DTO.ViewModels.TabType.IntialReferenceRules }),

X.Container()
.ID("containerInitialPanels")
.Tpl(X.XTemplate().Html("data-paneltype=initialtab"))
.Layout(LayoutType.Container)
)
.BodyPadding(6)
.AutoScroll(true),

X.Panel()
.ID("pnlRereferencingRules")
.Title("Re-Referencing Rules")
.BodyPadding(6)
.AutoScroll(true)
.Items(
X.Container()
.ID("containerReReferenceCountries")
.Layout(LayoutType.Container)
.ContentFromAction("LoadCountries", new { containerId = "containerReReferenceCountries", tabType = PR.LS.DTO.ViewModels.TabType.ReReferencingRules }),

X.Container()
.ID("containerReReferencePanels")
.Layout(LayoutType.Container)
)
)
)


_ConfigureRules.cshtml



@model PR.LS.DTO.ViewModels.ReferenceRulesViewModel

@{
var X = @Html.X();
}



<style type="text/css">
div#pnlOptions {
border-width: 0 0 1px 0;
border-style: solid;
border-color: black;
}

li.colorgreen {
color: green;
}
</style>

<script type="text/javascript">



</script>

@(X.ButtonGroup().ID("btnGroup" + Model.Tab).ButtonAlign(Alignment.Left).Buttons(X.B utton().ID("btnBack" + Model.Tab).Text("<< Back"),
X.Button().ID("btnReset" + Model.Tab).Text("Reset"),
X.Button().ID("btnRestoreDefault" + Model.Tab).Text("Restore Default"),
X.Button().ID("btnSave" + Model.Tab).Text("Save"),
X.Button().ID("btnRestoreAndSaveDefault" + Model.Tab).Text("Restore & Save Default - All Countries"))
.Items(X.Button().ID("btnExpCollapse" + Model.Tab).Text("Expand/Collapse All").Listeners(ls => ls.Click.Fn = "expandCollapsePanels")))

<br />
<br />

@(X.Container()
.ID("pnlCountries" + Model.Tab)
.Flex(1)
.Padding(30)
.Width(950)
.AutoScroll(true)
.Layout(LayoutType.HBox).Items(X.ComboBox()
.ID("cmbCountries" + Model.Tab)
.DisplayField("Text")
.ValueField("Value")
.Store(X.Store().Model(X.Model().Fields(new ModelField("Text"), new ModelField("Value", ModelFieldType.Float), new ModelField("IsRulePresent"))).DataSource(Model.Countries))
.PaddingSpec("1px, 30px, 1px, 1px")
.EmptyText("Select a country")
.TypeAhead(true)
.QueryMode(DataLoadMode.Local)
.ListConfig(X.BoundList()
.ID("ulComboCountries" + Model.Tab)
.Tpl(X.XTemplate().Html(@" <ul class='x-list-plain'>
<tpl for='.'>
<li role='option' class='x-boundlist-item <tpl if='IsRulePresent'>colorgreen</tpl>'>
{Text}
</li>
</tpl>
</ul>")))
.Listeners(l => l.Change.Fn = "LoadTabByCountry")
.FireSelectOnLoad(false)
.MultiSelect(false),
X.Checkbox().ID("chkNoRefRuleApplied" + Model.Tab).PaddingSpec("1px, 10px, 1px, 1px"),
X.Label().Text("No Reference Rule Applied (Check to remove reference rules)")))

<br />
<br />



_RulePanels.cshtml




@model PR.LS.DTO.ViewModels.ReferenceRulesViewModel

@{
var X = @Html.X();
}


@(X.FormPanel()
.ID("frmReferenceRules" + Model.Tab)
.Width(1200)
.Border(false)
.Flex(1)
.BodyPadding(0)
.Items(
X.Panel()
.Collapsible(true)
.ID("pnlRules" + Model.Tab)
.MarginSpec("0px 0px 50px 0px")
.Title("Rule Types")
.Layout(LayoutType.Column)
.Items(

X.Panel().Layout(LayoutType.Container).Border(fals e).Items(

X.Panel().ID("pnlOptions" + Model.Tab).Width(260).Border(false).PaddingSpec("20px 20px 2px 20px").Layout(LayoutType.Column)
.Items(

X.RadioGroup()
.ID("rdbListRuleTypes" + Model.Tab)
.GroupName("rdbGroupRuleTypes")
.Vertical(true)
.ColumnsNumber(1)
.Items(from c in Model.AllRuleTypes select new Ext.Net.Radio() { ID = c.Value + "_rule_" + Model.Tab, Name = c.Text, InputAttrTpl = X.XTemplate().Html("data-typecode=" + c.Value + " " + "data-isrequiredlowestofn=" + c.IsRequiredLowestOfN + " " + "data-isrequiredformula=" + c.IsRequiredFormula), BoxLabel = c.Text, Checked = c.IsSelected })
.Listeners(l => l.Change.Fn = "rdbRuleTypeChanged"),


X.Container().ID("divTextFieldsRepeater" + Model.Tab).Layout(LayoutType.VBox)

.ItemsFromPartial("_RadioTextFields", Model.AllRuleTypes)
).Listeners(ls => ls.AfterRender.Fn = "rdbRuleTypeChanged"),

X.TextField().ID("txtRate" + Model.Tab).FieldLabel("Mark-down Rate (in %):").PaddingSpec("10px 0px 5px 20px").Text(Model.MultiplicationFactor.ToString("00.00")),

X.Label("Enter negative values for mark-up rate").PaddingSpec("5px 0px 30px 20px"),

X.Panel().Width(0).Border(false).Items(X.TextField ().Flex(1).Width(50).ID("txtIsRequiredLowestOfN" + Model.Tab).MarginSpec("1px 0px 0px 0px"))

),

X.Panel().ID("pnlExpression" + Model.Tab).Border(false).Layout(LayoutType.VBox).I tems(
X.TextArea().ID("txtExpression" + Model.Tab).PaddingSpec("50px 0px 0px 10px").Height(100).Width(340).Text(Model.Formula),
X.Button().ID("btnParse" + Model.Tab).Text("Parse").MarginSpec("0px 0px 30px 10px")).Hidden(false)


),

X.Panel()
.Collapsible(true)
.ID("pnlSKUPrices" + Model.Tab)
.Title("Rule to combine SKU prices to product level")
.MarginSpec("0px 0px 50px 0px")
.Layout(LayoutType.Container)
.Items(
X.RadioGroup()
.ID("rdbListCombinedType" + Model.Tab)
.GroupName("rdbGroupCombinedTypes")
.Vertical(true)
.PaddingSpec("20px 20px 20px 20px")
.ColumnsNumber(1)
.Items(from c in Model.AllCombinedTypes select new Ext.Net.Radio() { ID = c.Value +"_combined_" + Model.Tab, BoxLabel = c.Text, Name = c.Text, Checked = c.IsSelected })
)

))


_RadioTextFields.cshtml



@model List<PR.LS.DTO.ViewModels.RuleTypeRadioItem>


@foreach (var radio in Model)
{

@(Html.X()
.TextField()
.Width(50)
.ID("txt" + radio.Text + radio.Tab)
.InputAttrTpl(Html.X().XTemplate().Html("data-typecode=" + radio.Value))
.Text(Convert.ToString(radio.LowestOfNValue))
.MarginSpec("0px 0px 0px 0px"));
}

geoffrey.mcgill
Jun 11, 2014, 7:50 AM
Hello,

If the problem is associated to just two RadioButtons, why is all this code required? Please simplify you code sample down to the absolute minimum required to reproduce the problem. Unfortunately we're not going to piece together four separate files to try and get your sample working.

It's extremely rare that a problem cannot be reproduced in <100 lines of code. Please spend the time to simplify your code samples.

Have you debugged your JavaScript stepping though the code until the error is thrown?

If you need some help minimizing your code sample, the following forum post provides some tips:

http://forums.ext.net/showthread.php?13672&p=56687&viewfull=1#post56687

PriceRightHTML5team
Jun 11, 2014, 8:18 AM
Hello,

If the problem is associated to just two RadioButtons, why is all this code required? Please simplify you code sample down to the absolute minimum required to reproduce the problem. Unfortunately we're not going to piece together four separate files to try and get your sample working.

It's extremely rare that a problem cannot be reproduced in <100 lines of code. Please spend the time to simplify your code samples.

Have you debugged your JavaScript stepping though the code until the error is thrown?

If you need some help minimizing your code sample, the following forum post provides some tips:

http://forums.ext.net/showthread.php?13672&p=56687&viewfull=1#post56687


I have edited the previous Post, and have tried my best to investigate into this, as you can find the reported error with the line of JS (generated Ext.JS web resource) throwing it.

And to investigate into this I have taken care of following Points,

1) Made sure of having unique Ids, as using partial views,
2) Removed the JS from partial view and copied it into Parent view Index.cshtml
3) From associated action method I have returned the partial view result as follows,




return new Ext.Net.MVC.PartialViewResult
{
ContainerId = containerId,
ClearContainer = true,
RenderMode = RenderMode.AddTo,
ViewName = "_RulePanels",
Model = model
};



4) Before making DirectRequest I am clearing the associated container as follows,




var cumulativeTab = function (incountryId, inContainerId, actionName) {
$('#' + inContainerId).html('');

Ext.net.DirectMethod.request({
url: actionName,
json: true,
eventMask: { showMask: true },
params: {
containerId: inContainerId,
countryId: incountryId
}
});
}



But after this I ended up getting the following error,

In generated JS code

Error : Unable to get value of the property 'dom': object is null or undefined
Line of Error : d.container=Ext.get(d.el.dom.parentNode)
where d.el is null, hence this error

Please help

PriceRightHTML5team
Jun 12, 2014, 6:35 AM
I have edited the previous Post, and have tried my best to investigate into this, as you can find the reported error with the line of JS (generated Ext.JS web resource) throwing it.

And to investigate into this I have taken care of following Points,

1) Made sure of having unique Ids, as using partial views,
2) Removed the JS from partial view and copied it into Parent view Index.cshtml
3) From associated action method I have returned the partial view result as follows,




return new Ext.Net.MVC.PartialViewResult
{
ContainerId = containerId,
ClearContainer = true,
RenderMode = RenderMode.AddTo,
ViewName = "_RulePanels",
Model = model
};



4) Before making DirectRequest I am clearing the associated container as follows,




var cumulativeTab = function (incountryId, inContainerId, actionName) {
$('#' + inContainerId).html('');

Ext.net.DirectMethod.request({
url: actionName,
json: true,
eventMask: { showMask: true },
params: {
containerId: inContainerId,
countryId: incountryId
}
});
}



But after this I ended up getting the following error,

In generated JS code

Error : Unable to get value of the property 'dom': object is null or undefined
Line of Error : d.container=Ext.get(d.el.dom.parentNode)
where d.el is null, hence this error

Please help

Can I please have a solution on this

geoffrey.mcgill
Jun 12, 2014, 10:09 PM
Can I please have a solution on this

Hello,

I was able to get your Index.cshtml file rendering after fixing a few things and commenting out other things, but I was unable to get _ConfigureRules.cshtml rendering.

When you get a chance, please simplify your sample and I'll try to investigate again.

Thanks.