Javascript picking up XML file in HTML (Reporting Services)

This is a quick blog to walk through creating an HTML page which has a search functionality that get's auto populated via an XML file. In our case a reporting services rdl file.


1. Create the input component
<input id="textBox" type="text"
            style="width:250px; height:20px; text-align: center; font-family: Arial; font-size:11pt; color:#444444; vertical-align:text-top;" 
            onkeyup="srch(this.value)" onclick="clik(1)"
                value="PLACEHOLDER TEXT"   />

2. JavaScript to call report and display in search box

<script type="text/javascript">
    var xmlData = ""
    var newUrl = "";
    var Type = "";
    var searchArray = new Array();
    function loadXML(output) {
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        }
        else {
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4) { output(xhttp.responseXML); }
        }
        xhttp.open("GET", "http://ReportServerReportConnection&rs:format=xml", false);
        xhttp.send();
        return xhttp.responseXML;
    }

    function init() {
        loadXML(function output(resp) { xmlData = resp.getElementsByTagName("Details") })
    }
    function srch(searchStr) {
        if (document.getElementById("textBox").value.length == 0) {
            document.getElementById("results").style.visibility = "hidden";
            return;
        }

        var Result1List = "Group 1: <br>";
        var Result2List = "Group 2: <br>";
        var baseLink = "ReportServer full path to report Displaying";
        var stndParams = "&rs%3AParameterLanguage=&rc%3AParameters=Collapsed&rc%3AToolbar=False";

        for (var i = 0; i < xmlData.length && k < 20; i++) {
     
            if (xmlData[i].attributes.length == 5) {
                var name = xmlData[i].attributes[2].childNodes[0].data; //Name of parameter displayed
                var id = xmlData[i].attributes[1].childNodes[0].data; //unique id passed to report
            }
            else {
                var name = xmlData[i].attributes[1].childNodes[0].data; //Name of parameter displayed
                var id = xmlData[i].attributes[0].childNodes[0].data; //unique id passed to report
            }

            if (name.toUpperCase().indexOf(searchStr.toUpperCase()) >= 0 && searchStr) {

//SET the Type based on id parameter to determine group
  if (id.indexOf("G1") > 0)
    Type = "Group 1";
  else if (id.indexOf("G2") > 0)
    Type = "Group 2";

                if (Type == "G1") {
                    Result1List = "" + Result1List + "<span onclick=\"updateFrame('" + baseLink + buildUrl(name, id, Type) + stndParams + "','" + name + "')\">" + name + "</span><br>";
                }
  else if (Type == "G2") {
                    Result2List = "" + Result2List + "<span onclick=\"updateFrame('" + baseLink + buildUrl(name, id, Type) + stndParams + "','" + name + "')\">" + name + "</span><br>";
                }
            }
        }
        //Output list
        document.getElementById("results").innerHTML = Result1List + "<Br>" + Result2List;
        document.getElementById("results").style.visibility = "visible";
    }

    function buildUrl(name, id, Type) {
        var inter = "";
        if (Type == "G1") {
            inter = '&rp%3aPARAMETER1=%5BDimension%5D.%5BATTRIBUTE%5D.%26%5B' + cleanChars(id) + '%5D&rp%3aPARAMETER2=' + selectedValUnit;
        }
        else if (Type == "G2") {
            inter = '&rp%3aPARAMETER1=%5BDimension%5D.%5BATTRIBUTE%5D.%26%5B' + cleanChars(id) + '%5D&rp%3aPARAMETER2=' + selectedValUnit;
        }
        return inter;
    }

    function updateFrame(link, name) {
        if (name == '') {
        }
        else {
            document.getElementById("textBox").value = name;
        }
        document.getElementById("results").style.visibility = "hidden";
        document.getElementById("reports").src = link;
       
    }

    function updateQueryStringParameter(uri, key, value) {
        var pos1 = uri.indexOf(key) + key.length + 6;
        var stringSelect = uri.substring(uri.indexOf(key), pos1);
        stringSelect = stringSelect.substring(stringSelect.indexOf("&"), 0);
        var urinew = uri.replace(stringSelect, key + "=" + value);
        return urinew;
    }

    function cleanChars(word) {
        var str = word;
        var pos1 = str.lastIndexOf("[");
        pos1 = pos1 + 1;
        var pos2 = str.lastIndexOf("]");
        word = str.substring(pos1, pos2);
        return word;
    }
    function clik(settextbox) {
     
      if (settextbox == 1) {
          document.getElementById("textBox").value = " ";
       }
    }
 
</script>