Question

I’d like to add some old browsers support to my lib garlicjs.org.

I’ve found that one of my main functions getPath relies on localName that is unsupported on IE8<=

In that function, I need to obtain an unique identifier string for each DOM element binded by my lib, and more importantly, not relying on ids, classes or names.

Oh could I manage: to support this property for old IE browsers, OR, use another property supported by all browsers, that could manage have the same effect expected for this function.

Thanks!

Here is the code:

/* retuns an unique identifier for form elements, depending on their behaviors:
   * radio buttons: domain > pathname > form.<attr.name>[:eq(x)] > input.<attr.name>
      no eq(); must be all stored under the same field name inside the same form

   * checkbokes: domain > pathname > form.<attr.name>[:eq(x)] > [fieldset, div, span..] > input.<attr.name>[:eq(y)]
      cuz' they have the same name, must detect their exact position in the form. detect the exact hierarchy in DOM elements

   * other inputs: domain > pathname > form.<attr.name>[:eq(x)] > input.<attr.name>[:eq(y)]
      we just need the element name / eq() inside a given form
*/
, getPath: function () {

  // Requires one element.
  if ( this.$element.length != 1 ) {
    return false;
  }

  var path = ''
    , fullPath = this.$element.is( 'input[type=checkbox]')
    , node = this.$element;

  while ( node.length ) {
    var realNode = node[0]
      , name = realNode.localName;

    if ( !name ) {
      break;
    }

    name = name.toLowerCase();

    var parent = node.parent()
      , siblings = parent.children( name );

    // don't need to pollute path with select, fieldsets, divs and other noisy elements,
    // exept for checkboxes that need exact path, cuz have same name and sometimes same eq()!
    if ( !$( realNode ).is( 'form, input, select, textarea' ) && !fullPath ) {
      node = parent;
      continue;
    }

    // set input type as name + name attr if exists
    name += $( realNode ).attr( 'name' ) ? '.' + $( realNode ).attr( 'name' ) : '';

    // if has sibilings, get eq(), exept for radio buttons
    if ( siblings.length > 1 && !$( realNode ).is( 'input[type=radio]' ) ) {
      name += ':eq(' + siblings.index( realNode ) + ')';
    }

    path = name + ( path ? '>' + path : '' );

    // break once we came up to form:eq(x), no need to go further
    if ( 'form' == realNode.localName ) {
      break;
    }

    node = parent;
  }

  return 'garlic:' + document.domain + ( this.options.domain ? '*' : window.location.pathname ) + '>' + path;
}

Answer 1

Ok, I’ve used nodeName property instead, and it’s working.