Help: addEventListener() for IE

Discussion in 'Web Design and Development' started by Cabbit, Jan 10, 2012.

  1. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    Code:
    if (document.getElementsByClassName == undefined) {
      document.getElementsByClassName = function(className)
      {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];
    
        var element; 
        for (var i = 0; (element = allElements[i]) != null; i++) {
          var elementClass = element.className;
          if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) {
            results.push(element);
          }
          return results;
        }
      }
    }
    
    function sortable() {
      var sortable = document.getElementsByClassName('sortable');
      for(var i in sortable) {
        element = sortable[i];
        if (element.id != undefined) {
          var sort_id = element.id;
          document.getElementById(sort_id).addEventListener('click', sort, false);
        }
      }
    }
    
    function sort() {
      if (last_sorted == this.id + "desc") {
        last_sorted = this.id + "asc";
        order = this.id + " asc";
        if (search_temp != undefined) {
          my_table(limit, offset, order, search_temp);
        } else {
          my_table(limit, offset, order, filter);
        }
      } else {
        last_sorted = this.id + "desc";
        order = this.id + " desc";
        if (search_temp != undefined) {
          my_table(limit, offset, order, search_temp);
        } else {
          my_table(limit, offset, order, filter);
        }
      }
    }
    
    This is a wee bit of code that is part of my javascript for getting a table from jsonp data. This works on Safari, Opera, Chrome, Firefox and mobile Safari.

    My problem is i can't get this working on IE 8 which is the minimum supported browser i need to support, while i am aware jQuery can do this for my own 'joy' just now i am doing this with pure JavaScript which has proved clean sailing in getting the jsonp cross domain, searching, paginating etc.

    Any help would be greatly appreciated, i believe attachEvent() is the way to go but it does not support 'this'.
     
  2. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #2
    I've tried adding.
    Code:
    Element.prototype.addAnEvent = function(name, funct){
       if(this.addEventListener) // Works in NORMAL browsers...
       {
         this.addEventListener(name,funct, false);
       }
       else if(this.attachEvent){
         var _this = this;
         this.attachEvent("on"+name, function(){funct.apply(_this);});
         //where the value of "this" in funct should point to "element"
       }
    };
    
    which changes sort() to the following
    Code:
    function sort() {
      alert('ho');
      if (last_sorted == this.id + "desc") {
        last_sorted = this.id + "asc";
        order = this.id + " asc";
        if (search_temp != undefined) {
          my_table(limit, offset, order, search_temp);
        } else {
          my_table(limit, offset, order, filter);
        }
      } else {
        last_sorted = this.id + "desc";
        order = this.id + " desc";
        if (search_temp != undefined) {
          my_table(limit, offset, order, search_temp);
        } else {
          my_table(limit, offset, order, filter);
        }
      }
    }
    
    Now from my research this should work however it seems to work only on the modern browsers, IE8 does not register the clicks so the alert i have set up is never called.
     
  3. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #3
    After a little more fishing i believe it may be because document.getElementById is not working on IE8 when the element has been written to the dom by using document.getElementById(name).innerHTML. So this is perhaps what i need to fix.
     
  4. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #4
    Lots of jiggery pockery and i got this working, at least down to IE8, i can't find any older versions of IE to test with.
     

Share This Page