doquesnet

Recently I was constructing Drupal 6 web-site using Hierarchical Select and Ubercart.

New vocabulary with some terms was added for product node type. Hierarchical select was configured to render it.

Then go try creating new product at node/add/product page. Select some term from vocabulary. Works fine in Firefox but JavaScript alert is shown in IE6/7:

Received an invalid response from the server.

Let's discuss what's the problem is.

What's the problem

Whenever you change term in select box - Hierarchical Select sends AJAX request to get children of this term to render the second-level select box. This AJAX request includes form data array that is constructed using jQuery's formToArray() method:

Drupal.HierarchicalSelect.update = function(hsid, updateType, settings) {
  var post = $('form:has(#hierarchical-select-' + hsid +'-wrapper)', Drupal.HierarchicalSelect.context).formToArray();

Ubercart is adding new form item with name length to the node form at node/add/product page. This makes IE crazy and the following code from formToArray() implementation (hierarchical_select_formtoarray.js) produces an error:

    var form = this[0];
    var els = semantic ? form.getElementsByTagName('*') : form.elements;
    if (!els) return a;
    for(var i=0, max=els.length; i < max; i++) {
        var el = els[i];
        var n = el.name;
        if (!n) continue;

Pay attention that els.length will be an Object, not integer.

How to fix?

Never use length as the name of form item.
Or use this patch. It should fix the problem with IE. The max variable was removed from the above code. We then loop from zero to infinite until no form item is found:

    var form = this[0];
    var els = semantic ? form.getElementsByTagName('*') : form.elements;
    if (!els) return a;
    // We don't use form.elements.length here because IE6/7 fails
    // when form item with name "length" exists.
    for (var i=0; ; i++) {
        if (typeof(els[i]) == 'undefined') {
          break;
        }
        var el = els[i];
        var n = el.name;
        if (!n) continue;

This formToArray() function is also implemented in jQuery Form plugin (which is also part of Drupal core). It might worth fixing it there also.