Friday, June 12, 2009

JQuery combobox plugin fixed for IE7

A useful JQuery plugin to display HTML Select element has been developed by Sanchez Salvador and team. Latest version can be downloaded from here (0.1.2.7). The plugin is good and fulfills the need of having a uniform select boxes across browsers.
However the latest version when tried on IE7 was causing page to jump whenever we selected any dropdown box. The reason was that the implementation was done by using focus and blur events of Javascript on the div wrapping the select box. In IE7 what happens is that when we focus any div, it cause page to auto scroll to the view where div is located causing page jumps. The same used to work fine on earlier versions of IE namely IE6. The same also works fine on FF2 and FF3. It seems that as MS upgrades the version of their IE they make many fundamental changes, which causes developers like us to rewrite certain parts of our applications to support them on their newer versions.
IE infact has few other bugs too, namely handling on z-index of CSS, which I think they have fixed it in IE8 (making it W3C compliant). For fix of this we had to patch using IFrames. There are some more issues like setting min/max-height/wdith is not possible in IE. For these too there are some custom fixes of patch available. Maybe thats the reason why browsers like FF are more popular with development community. I hope IE sticks closer to w3c standards in their coming versions.

Anyway coming back to the issue with the JQuery combobox plugin on IE7, this issue of page jump has been fixed, by changing the implementation of dropdown show/hide using mouse click events instead of using focus/blur.

The latest package can be be download from here (0.1.2.8). I am calling this version 0.1.2.8.
So if you are a user of this plugin and have been facing this problem in IE7, this version may help you. If you have any problems feel free to contact me.

Thanks
Sachin

update: Please download this link for a bug fix.
update: The JQuery combobox plugin made compatible with jQuery version 1.3.x. Please download it again from this link for the latest copy.
update: The JQuery combobox plugin made compatible with jQuery version 1.7.x. Please download it again from this link for the latest copy.

27 comments:

Anonymous said...

Very Nice bro!! but there are another problem with using multiple combobox.. they say that was fixed on v1.2.7 but Im still having the same results.. any help on this would be very helpful too.. hope you can fix this..

Anonymous said...

heres d preview link, take a look... basically the glow and arrow effects doesnt work as it should be.. so let me know what is wrong, if it can be solve..

Anonymous said...

sorry, here is.. jeje!

http://poligoma.webs.com/accordion/combox/multi.htm

Sachin Mittal said...

Guys, please leave ur name next to comments so that I know who says or wants what.

I see that the link provided is working as it should, based on the provided config. You may want to pass animationSpeed to control the glow and arrow effect (if I have understood what you meant).

Laurent VILCOQ said...

Hi,
I want to use it with jquery 1.3.2, but I think that is not compatible.

I have you got an idea what I must modify to use with jquery 1.3.2

Regards,
Laurent

Sachin Mittal said...

hi,
I tested using 1.3.3 and I do see combobox coming up.
There may be some issues on FF2 like:
[Exception... "'Syntax error, unrecognized expression: [@dataType='optgroup']' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]

But combobox still comes up. One would need to fix these issues. The plugin was initially written for 1.1.x so using it against 1.3.x would cause problems.

What is the error you are getting.

Thanks
Sachin

Laurent VILCOQ said...

Hi,

I do see combobox coming up, but in FF2, FF3 or FF3.5, we can't select an item.

Have you got an idea ?

Regards,
Laurent

Sachin Mittal said...

I have fixed the combobox plugin for jQuery version 1.3.x
Please download it from the link mentioned at bottom of the blog entry.

Thanks
Sachin

Laurent VILCOQ said...

it works fine.

Thank you for your work.

Laurent

cax said...

I have to thank you very much for your work on jquery.combobox . The porting to jquery 1.3 was very helpful, but the major weakness of this widget still remains: it's unimaginably slow !
On my fast PC it takes about 2 seconds to create single empty combobox. Every option adds ~40ms to this time, so if you have long list of values to select from, it may end in about 6 seconds. And I have a really big form with >10 combos on the same page. This results in unacceptable load times.

Debugging shows that one of the the slowing-down lines of code is

var offsetLeft = builtDropDownItemJQuery.offset().left;

It seems that dimensions library is the problematic hotspot. Maybe replacing it with the newer version may help, or you can find any other solution ?

I will be very grateful if you can solve this issue, because it's a real show-stopper for me.

Thank you again for your effort !

Sachin Mittal said...

@cax if you use the one with jquery 1.3 then dimensions plugin in included in that. You don't need to do any additional import of dimensions plugin js file.

I have not encountered the speed problem.

If you can post the url of live example where speed is the problem, then maybe I can help.

Thanks
Sachin

cax said...

Sachin, thank you for your fast reply !

Here is the link with example:
http://cax.nm.ru/other/issue_jquery.combobox.sachin/example.htm

(tested with IE7)

As you can see, each of the 3 combos needs >3 sec. to initialize. Imagine you have 20 of them on the same page.

I tried to commenting out various time-consuming parts of the code, but I still cannot make it finish in less than 1 second.

Thank you in advance for your help !

Sachin Mittal said...

@cax I worked on your example.
In you case each dropdown has 300 items. My investigation showed that for each item it takes on an average 10 millisecond to add it to combobox. So for 300 items its takes around 300 seconds plus some more buffer.
In my case (where I stripped other html and js that was not needed for this plugin to work) it takes 4 seconds to render each combo.

I think as of now I cannot optimize anything quickly to lower the timing of each item.

You may have to re look at your design and try to reduce no. of items per combobox.

Thanks
Sachin

Diego said...

hey!
first things first, u have done a great job here dude and saved me from a painful debugging to make this work on ie7 :) . However, i have a question.. is the width option still working? also, it seems like the plugin isn't calculating correctly the width it should have depending on the longest < option > element in the select element. It is always rendering a 120px wide dropdown. I believe it should create a dropdown long enough to display the longest option element but it seems that feature was missing in older versions of the plugin too.. if i am right, is there any chance u can take a look at this and at least give me some guidelines on how to correct this? Thank you!

Sachin Mittal said...

@Diego, the width option is working fine. I tested it on FF3 and IE6 and it works fine. Presently I don't have IE7 so cannot say on that, but looking at code there should not be any problem.

How are you passing the width config to the plugin.

Right way is:
$('#selectbox').combobox(_styleSettingsObject,{animationType: _animationType, animationSpeed: _animationSpeed, width: _width})

Can you show me a link to your example where this is not working. Maybe after looking I can help better.

Thanks
Sachin

Diego said...

Hey thanks for the quick answer! i tried ur suggestion but it broke the dropdowns. exactly, i tried

$("#fishhound_search_form_block .form-select").combobox(_styleSettingsObject,{animationType: "fade", animationSpeed: "fast", width: 200);
Anyway, that's not exactly what i meant in my prior comment. I need the dropdowns to change their width dynamically depending on how long the option list is. Im sending a link to a example page to ur gmail account! Thanks for your help i really appreciate it.

Sachin Mittal said...

Note one can set _styleSettingsObject to null as in above example to pickup default setting.

Further based on above comment, the width you specify would be the width of the select box. Once you expand that then options width would automatically be theone for the longest option.

Hope this clears.

SMAS-SMAS said...

Can JQuery combobox give the functionality of same as

http://www.asp.net/ajax/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx

I am interested after populating combobox, I can type something in combobox from keyboard but it accept only the character which available in dropdown list. I mean if combobox have list of countries then it give permission to type Canada but not give the permission to type cane. Also it autocomplete.

Sachin Mittal said...

@SMAS-SMAS the feature you have requested is to be something built on and cannot be configured using options.

One can build it on top of existing combobox plugin.

-Sachin

Tamir said...

Great job ! very useful plug-in!

I found another bug , when using this plug-in inside element with "position:relative" the offset is not calculated right , so when the drop down box is open it appears to the left of the combo box container . to fix this you should replace the line :
_dropDownListJQuery.css("left", _containerJQuery.offset().left);

with :
_dropDownListJQuery.css("left", _containerJQuery.position().left);

Tamir said...

Two more things
1. In my comment i meant that the box appears to the right of the combo box container (because the left property is not calculated right).

2.There is a width problem in IE6 and IE7 (the width you give as a parameter dose not aply in IE6+7)

to fix the problem you change
var _containerEnforcedStyle = "padding:0;";

to :
var _containerEnforcedStyle = "padding:0;overflow: hidden;";

Patrick said...

When in noConflict() mode for jQuery, there are problems with the $ var in the bindDocumentClickEvent function. It's easy to fix, but if you update your version that would be great.

Anonymous said...

hi, there are two $() in the code, should be jQuery() to work in environment where other framework is competeing over ownership of $

Anonymous said...

Hi,

I want to use the JQuery combobox plugin with jquery 1.4.2, but i have a problem: the combobox coming up, but in all browsers I can't select an item.
In debbugging i get the error: 'Syntax error, unrecognized expression: [@dataType='optgroup']'.

Can you help me please?

Regards,
Gitti

Sachin Mittal said...

Latest jQuery version is 1.7.x.
Last time this plugin was made compatible with 1.3.x.

Over these versions they seem to have done some changes with their selector syntax and logic.

So I have done some changes to make it compatible with this version of jQuery. I have done some limited testing of example in the zip against latest version of Firefox, Safari, Chrome and Internet Explorer and it seems to be working fine.

So you can have the latest version from the link in my post above.

In case there are issues, please feel free to contact me.

Anonymous said...

Thank you very much!!
It works fine.

Thank you again for your quick answer.

Gitti

Anonymous said...

Can't I add HTML code?

Gitti