JQuery Rating plug-in – Not working in IE 8 – FIXED

Recently I was working on a web app where it was required to keep a Rating control (with 5 stars). Instead of re-inventing the wheel, I thought of using one of the existing plug-in. What can be better than a JQuery rating plug-in. I quickly went to the JQuery plug-in site here and studied the demo and implemented the script. It worked very smoothly!

But my joy did not last long L. The moment I opened my web page in IE 8, the rating control was not behaving properly, stars which were pre-selected (like loading the rating value from DB) used to come blank. The same was working in IE 7, but not in IE 8.

So I did some dissection on the JQuery Rating plug-in and modified it to work with IE 8. Below are the changes which I did,

Basically the problem was with this line,

if (0 !== $(“#” + id + ” option[selected]”).size())

IE 8 does not understand this tag option[selected]for that reason, always the “.size()” returns “0”. One option is to replace the above tag with option:selectedbut then our IE 8 will by default select the first element in the drop down (select) box and so even if no rating is given, the first star will be selected. This is IE’s behaviour. To overcome this problem, I modified the rating.js file,

var selectOptions = document.getElementById(id).getElementsByTagName("option");
    var selectOptionCount = 0;
    for (var i = 0; i < selectOptions.length; i++) {
        var sValue = selectOptions[i].className;
        if (sValue == "selected") {
            selectOptionCount++;
            selectOptions[i].selected = true;
        }
    }

For above code to work, the only change you need to do is, instead of putting selected=”selected” for the selected item, put class = “selected” and the rating plug-in will automatically take care. This has been tested in IE 7, IE 8, Firefox 3.6.17, 4.0 & Chrome.

You can download the modified JQuery Rating Plug-in here

Hope it helps!