Internet Explorer cannot handle the click event within select elements. Therefore, if you use AJAX-based effects that are supposed to be triggered when selecting an option within a select element, nothing happens in Internet Explorer. This issue can be circumvented by changing the click event to a change event. In our example, we use the JavaScript framework Prototype.
We integrate the change event into the free "Layered Navigation" extension for Magento developed by the Texas-based developers FME Addons.
To do this, we modify the file
skin\frontend\YOURPACKAGE\YOURTHEME\js\FME\fme_layered_nav.js
First, the more intuitive part: In the catalog_toolbar_init() function, we change the event observer from 'click' to 'change' and point it to our own listener function (e.g. catalog_toolbar_listener_econcess(evt)). We derive this function from the existing catalog_toolbar_listener(evt) function and therefore change the line
Event.observe(items_econcess[i], 'click', catalog_toolbar_listener);
to
Event.observe(items_econcess[i], 'change', catalog_toolbar_listener_econcess);
We now need to pass the correct option value to the AJAX request because changing the event also changes the element being examined (with click, the option element is examined, whereas with change, the select element is examined). We can implement this within the derived function:
function catalog_toolbar_listener_econcess(evt) {
catalog_toolbar_make_request(Event.element(evt)[Event.element(evt).selectedIndex].value); Event.stop(evt);}
The AJAX-based filter can now also handle select boxes correctly in Internet Explorer.
