Blank Drop Down Lists in IE9: A Quick Solution to an Intricate Problem

  • 16 Jul , 2015
  • by Prateek Tayal
  • 0 comments
  • 1538 Views
dropdown_blog Featured

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:

IE Error

Chrome:

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:

if($.browser.msie)
{
JSON.parse(data).property
}
else
{
data.property
}

 

You can check out the complete code here:

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);
});
}

 

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Want us to develop your Mobile/Web Solution?