In all the problems that we have come across, there have been some which were persistent and perplexing yet still the solution lied just under our nose. A similar problem that we faced recently is for certain a very common issue a lot of IE9 users come across.
The issue of blank fields in drop down lists in IE9. Now the surprising part comes when the drop down, which we are binding from data base, is working fine in Chrome and Mozilla but is totally blank in IE9.
All the bindings we have done is through java script and we were getting data as it is, properly binding in other browsers except for IE9.
In IE:
Chrome:
Solution:
We found that the issue was related to parsing. Parsing works perfectly normal in Chrome and Mozilla
but for IE we need to parse it by putting 'JSON.parse(data).property'.
But here there is one crucial thing to be noted. Applying the above parse will lead to drop down lists misbehaving in Chrome and Mozilla so we need to include a check like below:
[php]if($.browser.msie)
{
JSON.parse(data).property
}
else
{
data.property
}[/php]
You can check out the complete code here:
[php]if ($.browser.msie) {
$.get(url, { countryId: countryId }, function (data) {
addressElement($line1, JSON.parse(data).AddressLine1Label, JSON.parse(data).AddressLine1Required);
addressElement($line2, JSON.parse(data).AddressLine2Label, JSON.parse(data).AddressLine2Required);
addressElement($line3, JSON.parse(data).AddressLine3Label, JSON.parse(data).AddressLine3Required);
addressElement($line4, JSON.parse(data).AddressLine4Label, JSON.parse(data).AddressLine4Required);
addressElement($city, JSON.parse(data).CityLabel, JSON.parse(data).CityRequired);
addressElement($county, JSON.parse(data).CountyLabel, JSON.parse(data).CountyRequired);
addressElement($stateProvince, JSON.parse(data).StateProvinceLabel, JSON.parse(data).StateProvinceRequired, JSON.parse(data).StateProvincesList);
addressElement($postalCode, JSON.parse(data).PostalCodeLabel, JSON.parse(data).PostalCodeRequired);
addressElement($timeZone, "Time Zone", true, JSON.parse(data).TimeZonesList);
});
}
else
{
$.get(url, { countryId: countryId }, function (data) {
addressElement($line1, data.AddressLine1Label, data.AddressLine1Required);
addressElement($line2, data.AddressLine2Label, data.AddressLine2Required);
addressElement($line3, data.AddressLine3Label, data.AddressLine3Required);
addressElement($line4, data.AddressLine4Label, data.AddressLine4Required);
addressElement($city, data.CityLabel, data.CityRequired);
addressElement($county, data.CountyLabel, data.CountyRequired);
addressElement($stateProvince, data.StateProvinceLabel, data.StateProvinceRequired, data.StateProvincesList);
addressElement($postalCode, data.PostalCodeLabel, data.PostalCodeRequired);
addressElement($timeZone, "Time Zone", true, data.TimeZonesList);
});
}[/php]
The above is a very elementary solution to the error of blank fields in drop down lists one may encounter in IE9.
I hope you found the solution to this intricate problem useful. Please leave your comments below about this post and subscribe to our blog if you wish to be informed about more such quick solutions to tricky problems.
