jQuery UI Tabs and the Stylish Select Plugin

I was having issues with a site recently whereby the jQuery UI Tabs that were on the site weren’t working in IE.

After chopping out all other includes and HTML/CSS that wasn’t needed for the tabs to display, I narrowed it down to the “stylish select” jQuery plugin (http://plugins.jquery.com/project/stylish-select-box) that had been installed on the site. As this was an inherited site, I didn’t know where (or even if) the plugin was being actively used on the site, so I couldn’t just disable it.

The issue was that this plugin was redefining the “indexOf” function. In order to create a “global” version of the function, the developer has created their own. Since this function is then used in other function calls by other plugins/scripts etc, it was breaking them.

Simply modifying the function and re-referencing the function calls within the plugin was enough.

The modified function looks like this:

Array.prototype.indexOfNew = function (obj, start) {
  for (var i = (start || 0); i < this.length; i++) {
    if (this[i] == obj) {
      return i;
    }
  }
}

Array.prototype.indexOfNew = function (obj, start) {

for (var i = (start || 0); i < this.length; i++) {

if (this[i] == obj) {

return i;

}

Then, just update any function calls within the plugin to “indexOfNew”. That cures the issue.

Image Credit: NathanaelB

Leave a Reply