Violation Table + Filter

At some point I was given the task to build a working filter for our Violations Tables and it had to work for Firefox as well as IE. The filter needs to transform before the main three tables because it determines what can be shown in them. I experienced a number of difficulties with synchronizing the different xml transforms since there are several going on on this page, and some needed to be done before others. I succeeded but my solution was not as nice (code wise) as I would have liked. Later on, Firefox finally started supporting asynchronous xml and xsl downloads so I could tell better when things would finish instead of polling the ready state. Click on the image to the right to see my end result better.



Here's a snippet of my filter code so you'll be able to do that same: (new way)

function setXML(sourceURL) {
          this.xmlSource = sourceURL;
          if(window.ActiveXObject)
          {
            treeXml = new ActiveXObject('Microsoft.XMLDOM');
            treeXml.async = false;
            treeXml.load(sourceURL);
            this.XML = treeXml;

          }else{
            xmlhttp=new XMLHttpRequest();
            //xmlhttp.onreadystatechange=xml_Change;old way
            xmlhttp.open("GET",this.xmlSource,true);//"sourceURL"
            xmlhttp.overrideMimeType("text/xml");
            xmlhttp.send(null);

            setXML();//new way
          }
      }
      ViolationsFilterTable.prototype.setXML = setXML;

function setXML(){
      var xmlTree = xmlhttp.responseXML;
      lookupObject('filterTable').setMyXML(xmlTree);
      lookupObject('filterTable').setXmlLoaded(true);
      lookupObject('filterTable').initFilterTableFinal();//now transform in Firefox
call loadXSL(); (now with less waiting and polling) }


(old way) function xml_Change()//function for finished loading XSL
        {
            if (xmlhttp.readyState==4)//loaded = 4
            {
                if (xmlhttp.status==200)//status ok = 200
                {
                    var xmlTree = xmlhttp.responseXML;
                    lookupObject('filterTable').setMyXML(xmlTree);
                    lookupObject('filterTable').setXmlLoaded(true);
                    lookupObject('filterTable').initFilterTableFinal();//now transform in Firefox

//call loadXSL(); (old way)
                }
            }
        }

Alpha Search Tree for Large Amounts of Data

To start out, I'd like to share how to make an Alpha Search Tree in XSLT and do it for Firefox and IE. At my work I was given a problem. We had a table with a thousand or more records that was taking around 42 seconds to load on average on IE6. It wasn't much better in IE7. Our customers only use those browsers so I researched the problem and found a way to get it to load in 2.

First off, I examined the load times using the excellent Firebug plug-in and the Charles web debugging proxy and I found that the xml, while large, was not taking more than half a second to load. Also the page and other parts were likewise loading quickly so I knew that the problem lay on the front end. I originally suspected that the XML transform was at fault so I cut out pieces and found that the XML transform was being completed in one second or less. Therefore, the only thing left was the browser's display time for large amounts of HTML data. In order to get it to display less, we either had to add a search filter, or some other kind of filter.

 As a preliminary step, since we had built an Alpha Search Tree, I proceeded to make it only load onto the page the items who matched the first letter (or number) detected. By only loading to the page one letter at a time, we cut load times to a 20th of their original size.

Here are some of the code examples of how this is accomplished: http://graphix.bizland.com/js/CheckLetters.txt

http://graphix.bizland.com/js/SetLetter.txt

Firstly we need to build a list of indexed letters corresponding to the first letters of the Items to be displayed in our list so that we can build the menu:

You'll notice in here that we use the LETTER_DIV to store the list of letters we have encountered so far and we have built a group of them with the id being the same on the elements as the letters themselves.

The showLetter function is called when we click on a  letter and it adds the current letter to the xml and removes the previous one selected.



Now once we have this list from the XML, we can run the transform using some XSL and JavaScript combined.

Here's a link to the XSL since its too large to display here conveniently: http://graphix.bizland.com/xsl/AlphaSearchTree.txt

The crucial parts are at the beginning with the letter selected by the user part and later on this filtering line: 

xsl:when test="mv:toUpper(substring(Name,1,1))=mv:toUpper(substring($firstLetter,1,1)) or mv:toUpper(substring(../Name,1,1))=mv:toUpper(substring($firstLetter,1,1)) or /ClientSummarySet/selectAll or mv:isNum(substring(Name,1,1),substring($firstLetter,1,1)) "

Which makes sure we only transform rows where the name starts with the same letter and we end up with something like this: