IE10 Issues

Jun 5, 2013 at 3:08 AM
Hi There,

I've recently upgraded to IE10. This has broken some of my javascript used within the datagrids.

In particular it no longer seems to be able to retrieve the value of a TextBox. It works perfectly well on IE9 and I'm running exactly the same code with IE9 and IE10.

Here is the input control I'm trying to get the value of (note that I'm within an edit template here)
@Html.TextBoxFor(m => m.Units, new { units = true, data_prefix = @Html.PrefixedId(string.Empty), @class = "caaunits w80" }) 
<tr id="CorporateActionAllocations___0___Item_Value_Edit_Container">


<input name="CorporateActionAllocations.$$0.$.Item.Value.Units" class="caaunits w80 valid" id="CorporateActionAllocations___0___Item_Value_Units" type="text" data-val-required="The Units field is required." data-val="true" data-val-number="The field Units must be a number." data-prefix="CorporateActionAllocations___0___Item_Value" units="True" value="1893835.88" />



Here's the jquery - it returns ''
I'm running this within an onchange event on the Units.
$('input[units]').bind('change', unitsChangeHandler);
The event is fired and the javascript is run, it's just that the value is blank.

Here are the relevant javascript links from our layout page.
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.6.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.treeview.all.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/extras/jquery.easing.1.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bby.frontend.js?v=6")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.simplemodal-1.4.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
<script type='text/javascript' src="@Url.Content("~/Scripts/globalize.min.js")"></script>
@Html.GlobalizationScript(Url.Content("~/Scripts/cultures/"), Url.Content("~/Scripts/localization/"))
@Html.JQueryDatePickerGlobalizationScript("en-NZ", Url.Content("~/Scripts/globinfo/"))
<script type='text/javascript' src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script type='text/javascript' src="@Url.Content("~/Scripts/MVCControlToolkit.Controls-2.2.5.min.js")"></script>
<script type='text/javascript' src="@Url.Content("~/Scripts/knockout.all-2.2.5.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.clipboard.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-maskedinput-1.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.multicolselect.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.countdown.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/ralph.listofvalues.js?v=2")"></script>
Jun 5, 2013 at 3:28 AM
Edited Jun 5, 2013 at 3:29 AM
Interestingly if I use the following selector it returns the correct value. So, to me, that means it's picking up the element from the DisplayItemTemplate instead of the EditItemTemplate.
$('#CorporateActionAllocations___0___Item_Value_Units', '#CorporateActionAllocations___0___Item_Value_Edit_Container').val()
Display Item Template control
@Html.DisplayField(m => m.Units, null, null, new Dictionary<string, object> { { "style", "display:none;" }, { "units", true }, { "data_prefix", @Html.PrefixedId(string.Empty) } })
Edit Item Template Control
@Html.TextBoxFor(m => m.Units, new { units = true, data_prefix = @Html.PrefixedId(string.Empty), @class = "caaunits w80" }) 
So, is this an IE10 issue, and issue with the MVC Controls Toolkit when used with IE10, or something I've done incorrectly.

If it would help to see the full JS, Edit and Display templates then let me know and I'll attach.
Jun 5, 2013 at 8:59 AM
Sorry, it is a bug!

The point is that the elements of the display templates have the same name as the ones of the edit template. While the edit template is removed from the dom when it is not on the display templates is just hidden(for efficiency reasons) => you have duplicates id. This cause your problem. the 2.4 release removes this bug BUT ONLY from client templates, NOT from server templates (like the ones you are using). The new upcoming version will resolve the problem. I have already corrected the bug...but due to my scheduling I will not be able to put the new version on line before 2 weeks!...So in the meantime you have to patch it(in the way you suggested in your second pos) if your software is already on-line.

In the new upcoming release the id of all display stuffs will be like: CorporateActionAllocations___0___Item_Value_Display_Units, while the ids of all edit stuffs will remain unchanged: CorporateActionAllocations___0___Item_Value_Units.
Jun 10, 2013 at 10:25 PM
Thanks for the honesty. I've got round this by removing some of the duplicate id's from my display templates. There is now only one field which is the same, I use this field to automatically switch the line into Edit mode.
I've also filtered my update statements by using the visible selector , e.g.
if ($(item).is(":visible")) {
Jun 11, 2013 at 12:22 PM
I am closing the press release of the Data Moving Plug-in. As soon as I finish this, I will "pack " the new version of the Mvc Controls Toolkit that solve the issue you reported and also a small issue in the getPager.

However...I ADVICE...the new release will require jQuery start moving to the new version of jquery (it is faster! on modern browsers). It has breaking changes...but there are tools that help in the upgrade...I advice to move to 1.9...anyway.