John's Technical Blog: XML File in Javascript

<!doctype html>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>Category</title>
<style>
input{
width:280px;
height:25px;
font-size:20px;
color:#000000;
background-color:#edf2f4;
}
#searchArea {
position: relative;
font-family:Arial;
background-color:#edf2f4;
}
/*#searchAreaProduct
{
position: relative;
font-family:Arial;
background-color:#edf2f4;
}*/
#results{
position: absolute;
width:260px;
left:695px;
top:115px;
font-family: Arial;
font-size:10pt;
color:#71727b;
border-style:solid;
border-width:1px;
border-color:#999999;
visibility:hidden;
background-color:#edf2f4;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
}
/*#productResults{
position: absolute;
width:260px;
left:964px;
top:115px;
font-family: Arial;
font-size:10pt;
color:#71727b;
background-color:#edf2f4;
border-style:solid;
border-width:1px;
border-color:#999999;
visibility:hidden;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
}*/
span {
color:#71727b;
cursor:pointer;
font-family:Arial;
font-size:9pt;
}
iframe{
width:106%;
height:1000px;
border-style:none;
}
#Tab1
{
font-family: Arial;
font-size:12pt;
width: 120px;
text-align:center;
height:13.635mm;
}
#Tab2
{
font-family: Arial;
font-size:12pt;
width: 120px;
text-align:center;
height:13.635mm;
}
#Tab3
{
font-family: Arial;
font-size:12pt;
width: 150px;
color:#ffffff;
background-color:#25b4ff;
text-align:center;
height:13.635mm;
}
#filter1
{
font-family: Arial;
font-size:9pt;
width: 100px;
height:25px;
text-align:center;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-width:1px;
}
#filter2
{
font-family: Arial;
font-size:9pt;
width: 100px;
height:25px;
text-align:center;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-width:1px;
}
#filter3
{
font-family: Arial;
font-size:9pt;
width: 100px;
height:25px;
text-align:center;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-width:1px;
}
#filter8
{
font-family: Arial;
font-size:9pt;
width: 100px;
height:25px;
text-align:center;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-width:1px;
}
#filter4
{
width: 400px;
color: #000000;
height:25px;
text-align:center;
border-width:1px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
#filter5
{
font-family: Arial;
font-size:9pt;
width: 80px;
text-align:center;
height:25px;
border-width:1px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
#filter6
{
font-family: Arial;
font-size:9pt;
width: 80px;
text-align:center;
height:25px;
border-width:1px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
#filter9
{
font-family: Arial;
font-size:9pt;
width: 80px;
text-align:center;
height:25px;
border-width:1px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
#filter7
{
font-family: Arial;
font-size:9pt;
width: 80px;
text-align:center;
height:25px;
border-width:1px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.filterselected
{
color: #ffffff;
background-color: #066ca2;
text-align:center;
height:25px;
}

.filterunselected
{
color: #ffffff;
background-color: transparent;
text-align:center;
height:25px;
border-color:#67cbff;
border:2px;
}
.tabselected
{
color: #ffffff;
background-color: #25b4ff;
text-align:center;
height:25px;
}
.tabunselected
{
color: #ffffff;
background-color: transparent;
text-align:center;
height:25px;
}
#Units
{
    width: 69px;
}
.style6
{
    width: 159px;
}
.style9
{
    width: 244px;
}
.style10
{
    width: 350px;
}

.style5
{
    width: 1145px;
}
.style12
{
    width: 266px;
}
.style13
{
            width: 454px;
}
.style14
{
    width: 261px;
}
.style15
{
    width: 258px;
}
</style>
<script type="text/javascript">
    var xmlData = ""
    var selectedTCVIK = "T"
    var selectedValUnit = "V"
    var selectedPeriod = "M"
    var newUrl = "";
    var OTCType = "";
    var ATCType = ""
    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", "https://reportserver/_vti_bin/ReportServer?https://reportserver/SSRS/Australia/IMS%20Health%20Australia%20Development/Resources/OTC_Filter.rdl&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 OTC1ResultList = "OTC1: <br>";
        var OTC3ResultList = "OTC3: <br>";
        var ATC1ResultList = "ATC1: <br>";
        var ATC3ResultList = "ATC3: <br>";
        var baseLink = "https://reportserver/_layouts/ReportServer/RSViewerPage.aspx?rv%3aHeaderArea=None&rv%3aRelativeReportUrl=%2fSSRS%2fAustralia%2fIMS%20Health%20Australia%20Development%2fCATEGORY_3_AU.rdl";
        var stndParams = "&rs%3AParameterLanguage=&rc%3AParameters=Collapsed&rc%3AToolbar=False";
        var k = 0;

        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; //05 TONICS OTHER STIMS
                var OTC = xmlData[i].attributes[1].childNodes[0].data; //[Product].[OTC1].&[05]
            }
            else {
                var name = xmlData[i].attributes[1].childNodes[0].data; //05 TONICS OTHER STIMS
                var OTC = xmlData[i].attributes[0].childNodes[0].data; //[Product].[OTC1].&[05]
            }

            if (name.toUpperCase().indexOf(searchStr.toUpperCase()) >= 0 && searchStr) {
  //SET the OTCType based on OTC parameter to determine group
  if (OTC.indexOf("OTC1") > 0)
    OTCType = "OTC1";
  else if (OTC.indexOf("OTC3") > 0)
    OTCType = "OTC3";
  else if (OTC.indexOf("ATC1") > 0)
    OTCType = "ATC1";
  else if (OTC.indexOf("ATC3") > 0)
    OTCType = "ATC3";
                if (OTCType == "OTC1") {
                    k++;
                    OTC1ResultList = "" + OTC1ResultList + "<span onclick=\"updateFrame('" + baseLink + buildUrl(name, OTC, OTCType) + stndParams + "','" + name + "')\">" + name + "</span><br>";
                }
  else if (OTCType == "OTC3" && k < 10) {
                    k++;
                    OTC3ResultList = "" + OTC3ResultList + "<span onclick=\"updateFrame('" + baseLink + buildUrl(name, OTC, OTCType) + stndParams + "','" + name + "')\">" + name + "</span><br>";
                }
                else if (OTCType == "ATC1" && k < 15) {
                    k++;
                    ATC1ResultList = "" + ATC1ResultList + "<span onclick=\"updateFrame('" + baseLink + buildUrl(name, OTC, OTCType) + stndParams + "','" + name + "')\">" + name + "</span><br>";
                }
                else if (OTCType == "ATC3") {
                    k++;
                    ATC3ResultList = "" + ATC3ResultList + "<span onclick=\"updateFrame('" + baseLink + buildUrl(name, OTC, OTCType) + stndParams + "','" + name + "')\">" + name + "</span><br>";
                }
            }
        }
        document.getElementById("results").innerHTML = OTC1ResultList + "<Br>" + OTC3ResultList + "<Br>" + ATC1ResultList + "<Br>" + ATC3ResultList;
        document.getElementById("results").style.visibility = "visible";
    }

    function contains(a, obj) {
        var i = a.length;
        while (i--) {
            if (a[i] === obj) {
                return true;
            }
        }
        return false;
    }
    function buildUrl(name, OTC, Type) {
        var inter = "";
        if (Type == "OTC1") {
            inter = '&rp%3aPRODUCTNEC=%5BPRODUCT%5D.%5BOTC1%5D.%26%5B' + cleanChars(OTC) + '%5D&rp%3aVALUEUNITS=' + selectedValUnit + '&rp%3aPERIODSELECT=' + selectedPeriod + '&rp%3aTCVIK=' + selectedTCVIK;
        }
        else if (Type == "OTC3") {
            inter = '&rp%3aPRODUCTNEC=%5BPRODUCT%5D.%5BOTC3%5D.%26%5B' + cleanChars(OTC) + '%5D&rp%3aVALUEUNITS=' + selectedValUnit + '&rp%3aPERIODSELECT=' + selectedPeriod + '&rp%3aTCVIK=' + selectedTCVIK;
        }
        else if (Type == "ATC1") {
            inter = '&rp%3aPRODUCTNEC=%5BPRODUCT%5D.%5BATC1%5D.%26%5B' + cleanChars(OTC) + '%5D&rp%3aVALUEUNITS=' + selectedValUnit + '&rp%3aPERIODSELECT=' + selectedPeriod + '&rp%3aTCVIK=' + selectedTCVIK;
        }
        else if (Type == "ATC3") {
            inter = '&rp%3aPRODUCTNEC=%5BPRODUCT%5D.%5BATC3%5D.%26%5B' + cleanChars(OTC) + '%5D&rp%3aVALUEUNITS=' + selectedValUnit + '&rp%3aPERIODSELECT=' + selectedPeriod + '&rp%3aTCVIK=' + selectedTCVIK;
        }
        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 = " ";
       }
    }
    function clickValueUnits(value) {
        if (value == 1) {
            selectedValUnit = "V";
            document.getElementById("filter5").className = "filterselected";
            document.getElementById("filter6").className = "filterunselected";
        }
        else if (value == 2) {
            selectedValUnit = "U";
            document.getElementById("filter5").className = "filterunselected";
            document.getElementById("filter6").className = "filterselected";
        }
        newUrl = updateQueryStringParameter(document.getElementById("reports").src, 'VALUEUNITS', selectedValUnit);
        updateFrame(newUrl, '');
    }
    function clickTCVIK(value) {
        if (value == 1) {
            selectedTCVIK = "T";
            document.getElementById("filter1").className = "filterselected";
            document.getElementById("filter2").className = "filterunselected";
            document.getElementById("filter3").className = "filterunselected";
        }
        if (value == 2) {
            selectedTCVIK = "P";
            document.getElementById("filter1").className = "filterunselected";
            document.getElementById("filter2").className = "filterselected";
            document.getElementById("filter3").className = "filterunselected";
        }
        if (value == 3) {
            selectedTCVIK = "H";
            document.getElementById("filter1").className = "filterunselected";
            document.getElementById("filter2").className = "filterunselected";
            document.getElementById("filter3").className = "filterselected";
        }
        newUrl = updateQueryStringParameter(document.getElementById("reports").src, 'TCVIK', selectedTCVIK);
        updateFrame(newUrl, '');
    }
    function clickPeriodSelect(value) {
        if (value == 1) {
            selectedPeriod = "M";
            document.getElementById("filter8").className = "filterselected";
            document.getElementById("filter9").className = "filterunselected";
            document.getElementById("filter7").className = "filterunselected";
        }
        if (value == 2) {
            selectedPeriod = "YTD";
            document.getElementById("filter8").className = "filterunselected";
            document.getElementById("filter9").className = "filterselected";
            document.getElementById("filter7").className = "filterunselected";
        }
        if (value == 3) {
            selectedPeriod = "MAT";
            document.getElementById("filter8").className = "filterunselected";
            document.getElementById("filter9").className = "filterunselected";
            document.getElementById("filter7").className = "filterselected";
        }
        newUrl = updateQueryStringParameter(document.getElementById("reports").src, 'PERIODSELECT', selectedPeriod);
        updateFrame(newUrl, '');
    }
</script>














</head>
<body onload="init()" style="width:100%; background-repeat:no-repeat;" background="http://reportserver/SSRS/Australia/IMS%20Health%20Australia%20Development/Resources/IMAGES/base.png">
<div >
<div>

<div id="results">
</div>

<div>
        <table>
        <tr style="height:56px"><td style="width:13px;"></td>
        <td id="ReportTitle"
                style="font-family:Arial; font-size:13pt; color:#444444; text-align:Left;"
                class="style13"><div>Category Management Insights</div></td>
        <td class="style10"></td>
        <td id="Reportheader" style="font-family:Arial; font-size:13pt; color:#25b4ff;text-align:center;"
                class="style9"><div>Wholesaler Partner Services</div></td>
        <td style="background-position:bottom; background-image:url(http://reportserver/Australia/IMS%20Health%20Australia%20Development/Resources/IMAGES/QIMSlogo.png); background-repeat:no-repeat"
                class="style6"></td>
        </tr>
        </table>
        <table id="filterSection">
        <tr><td style="width:11px;"></td>
        <td id="Tab1" onclick="location.href='https://www2.imsbi.com/_vti_bin/ReportServer?https://www2.imsbi.com/SSRS/Australia/IMS%20Health%20Australia%20Development/AU_CATEGORY_1_HTML.htm'" style="visibility:visible; cursor: pointer" class="tabunselected"><div id="Summary">Summary</div></td>
        <td id="Tab2" onclick="location.href='https://www2.imsbi.com/_vti_bin/ReportServer?https://www2.imsbi.com/SSRS/Australia/IMS%20Health%20Australia%20Development/AU_CATEGORY_2_HTML.htm'" style="visibility:visible; cursor: pointer" class="tabunselected"><div id="Contributions">Contributions</div></td>
        <td id="Tab3" onclick="location.href='https://www2.imsbi.com/_vti_bin/ReportServer?https://www2.imsbi.com/SSRS/Australia/IMS%20Health%20Australia%20Development/AU_CATEGORY_3_HTML.htm'" style="visibility:visible; cursor: pointer" class="tabselected"><div id="Category">Category</div></td>
        <td class="style14"></td>
        <td class="style12" >

<div id="searchArea">
        <input id="textBox" type="text"
            style="width:259px; height:22px; text-align: center; font-family: Arial; font-size:11pt; color:#444444; vertical-align:text-top;"
            onkeyup="srch(this.value)" onclick="clik(1)"
                value="Click to Search OTC/ATC..."   />
               </div></td>
      
        </tr>
        </table>
        <table id="filterSection2">
        <tr>
        <td id="filter4" style="width:380px;"></td>
        <td id="filter1" onclick="clickTCVIK(1)" style="visibility:visible; cursor: pointer" class="filterselected"><div id="Total">Total</div></td>
        <td id="filter2" onclick="clickTCVIK(2)" style="visibility:visible; cursor: pointer" class="filterunselected"><div id="Pharmacy">Pharmacy</div></td>
        <td id="filter3" onclick="clickTCVIK(3)" style="visibility:visible; cursor: pointer" class="filterunselected"><div id="Hospital">Hospital</div></td>

        <td id="filter8" onclick="clickPeriodSelect(1)" style="visibility:visible; cursor: pointer" class="filterselected"><div id="Month">Month</div></td>
        <td id="filter9" onclick="clickPeriodSelect(2)" style="visibility:visible; cursor: pointer" class="filterunselected"><div id="YTD">YTD</div></td>
        <td id="filter7" onclick="clickPeriodSelect(3)" style="visibility:visible; cursor: pointer" class="filterunselected"><div id="MAT">MAT</div></td>
        <td id="filter5" onclick="clickValueUnits(1)" style="visibility:visible; cursor: pointer" class="filterselected"><div id="Values">Values</div></td>
        <td id="filter6" onclick="clickValueUnits(2)" style="visibility:visible; cursor: pointer" class="filterunselected"><div id="Units">Units</div></td>

         </tr>
         <tr style="height:1mm;"></tr>
        </table>
    </div>
</div>
<div>
<table>
<tr>
<td style="width:13px"></td>
<td class="style5">
<iframe id="reports" width="100%" src="https://reportserver/_layouts/ReportServer/RSViewerPage.aspx?rv%3aHeaderArea=None&rv%3aRelativeReportUrl=%2fSSRS%2fAustralia%2fIMS%20Health%20Australia%20Development%2fCATEGORY_3_AU.rdl&rp%3aPERIODSELECT=M&rp%3aVALUEUNITS=V&rp%3aTCVIK=T&rs%3AParameterLanguage=&rc%3AParameters=Collapsed&rc%3AToolbar=True&rc%3AZoom=Page%20Width"></iframe>

</td>
</tr>
</table>
</div>
</div>
</html>

John's Technical Blog

Thursday, 23 March 2017

XML File in Javascript

No comments:

Post a Comment

About Me

Blog Archive