I'm going to take a stab in the dark here and hope that you see some glaring idiot mistake in my code that would make this work perfectly in Chrome and FF, but not in IE7/IE8. I created a custom type for the Editor that generates a select2 dropdown that fetches data via AJAX. This control works perfectly in Chrome and FF. In IE7/IE8, the control renders and appears like it's going to function, but typing in the box has no effect...it doesn't attempt to perform the AJAX query. If you have any clues based on the code below, please let me know...otherwise I'll move on. Thanks!
// Our custom field type
$.fn.DataTable.Editor.fieldTypes.client = $.extend(true, {}, $.fn.DataTable.Editor.models.fieldType, {
'create': function (conf) {
var that = this;
conf._enabled = true;
// Create the elements to use for the input
conf._input = $(
'<input type="hidden" class="input-xlarge" />'
)[0];
setTimeout(function () {
$(conf._input).select2({
placeholder: 'Select a Client',
minimumInputLength: 3,
id: function (e) {
return e.ClientId;
},
ajax: {
url: '/ClientSearch',
dataType: 'json',
data: function (term, page) {
return { query: term };
},
results: function (data, page) {
return { results: data };
}
},
formatResult: function (client) {
return client.ClientName;
},
formatSelection: function (client) {
return client.ClientName;
},
initSelection: function (element, callback) {
return $.get('/ClientLookup', { query: element.val() }, function (data) {
callback(data);
});
}
});
}, 250);
return conf._input;
},
'get': function (conf) {
return $(conf._input).val();
},
'set': function (conf, val) {
if (!conf._enabled) {
return;
}
$(conf._input).val(val).trigger('change');
},
'enable': function (conf) {
conf._enabled = true;
$(conf._input).removeClass('disabled');
},
'disable': function (conf) {
conf._enabled = false;
$(conf._input).addClass('disabled');
}
});
The /ClientSearch url returns an array of JSON objects like this
[{"ClientId":"00857001","EnterpriseId":null,"ClientName":"00857001 - VSP Vision Benefits","ContractState":null,"Region":null,"ContractType":null,"ClientType":null,"GroupType":null,"BenefitOffering":null,"Population":null,"Sic":null,"SicCode":null,"UnderwritingCategory":null,"EffectiveDate":"\/Date(-62135568000000)\/","RenewalDate":"\/Date(-62135568000000)\/","TerminationDate":"\/Date(-62135568000000)\/","Benefits":null,"BenefitList":null,"AdminDivisions":null,"BillDivisions":null,"RenewalRep":null,"ServiceRep":null,"CorporateAccountManager":null,"RegionalAccountManager":null,"GroupServiceAdmin":null,"MembershipAdmin":null,"SalesAdmin":null,"ReportPeriod":null,"Members":0,"Claims":0,"ClaimsAmount":0,"AverageClaimsAmount":0,"MemberChange":false,"Enterprise":false,"PerformanceStandards":false,"Healthplan":false,"Medicare":false}]
The /ClientLookup url returns a single JSON object (just no [ ] around it)
{"ClientId":"00857001","EnterpriseId":null,"ClientName":"00857001 - VSP Vision Benefits","ContractState":null,"Region":null,"ContractType":null,"ClientType":null,"GroupType":null,"BenefitOffering":null,"Population":null,"Sic":null,"SicCode":null,"UnderwritingCategory":null,"EffectiveDate":"\/Date(-62135568000000)\/","RenewalDate":"\/Date(-62135568000000)\/","TerminationDate":"\/Date(-62135568000000)\/","Benefits":null,"BenefitList":null,"AdminDivisions":null,"BillDivisions":null,"RenewalRep":null,"ServiceRep":null,"CorporateAccountManager":null,"RegionalAccountManager":null,"GroupServiceAdmin":null,"MembershipAdmin":null,"SalesAdmin":null,"ReportPeriod":null,"Members":0,"Claims":0,"ClaimsAmount":0,"AverageClaimsAmount":0,"MemberChange":false,"Enterprise":false,"PerformanceStandards":false,"Healthplan":false,"Medicare":false}
I have 3 custom type controls similar to this, all that work in Chrome and FF, none that work in IE7/IE8. I haven't been able to try IE9 until this gets pushed out to the production server.
Any ideas would be greatly appreciated.