How to filter the xsl file based on dropdown value in html file using Javascript?

Question

Here's my htm file including the Javascript functions.

<html>
<head>
<title>Personal Info</title>
<script type="text/javascript" src="library.js"></script>
<script type="text/javascript">
   var IE= window.ActiveXObject ? true:false;
   var MOZ= document.implementation.createDocument ? true: false;
   
   var xmlFile="person.xml";
   var xsltFile="person.xsl";
       
   var xmlDoc;  <!--//Source XML document-->
   var xsltDoc; <!--//XSLT style sheet document for person.xsl-->

   function createXDoc(xFile, PID)
   {
    if (IE) {
    xDoc=new ActiveXObject(getPID(PID));
    }
    else if (MOZ) {
    xDoc= document.implementation.createDocument("", "", null);
    }
           
    loadDoc(xDoc, xFile);
    return xDoc;
    }
   
function runTransform(xDoc, xsltDoc) {
    if (IE) {
    var resultStr=xDoc.transformNode(xsltDoc);
         }
    }               
function init() 
           {
           var myElem= document.getElementById("persontable");
           xmlDoc=createXDoc(xmlFile, DOMPID);
           xsltDoc= createXDoc(xsltFile, DOMPID);
           myElem.innerHTML=runTransform(xmlDoc, xsltDoc);
     }
</script>
</head>
<body>
<div>
<h1 class="title">
  PERSONAL INFO
</h1> 
     <select id="statedropdown" name="statedropdown"> 
        <option value="MI">MI</option>
        <option value="MN">MN</option>
     </select>  
</div>
<div id="persontable">
   <!--Contents goes here-->
</div>
</body>
</html>

Here's my XML file.

<person>
  <first_name>Jane</first_name>
  <last_name>Whitney</last_name>
  <state>MI</state>
</person>
<person>
  <first_name>Jack</first_name>
  <last_name>Nicholson</last_name>
  <state>MI</state>
</person>
<person>
  <first_name>Jane</first_name>
  <last_name>Eyre</last_name>
  <state>MN</state>
</person>
<person>
  <first_name>Michael</first_name>
  <last_name>Johnson</last_name>
  <state>MN</state>
</person>

Here's my XSL file

<xsl:stylesheet version='1.0' xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0" omit-xml-declaration="yes" />
<xsl:param name="group" select="//person" />
<xsl:template match="/">
<table>
  <tr>
    <th>First_Name</th>
    <th>Last_Name</th> 
  </tr>   
<xsl:apply-templates select="$group">
  <xsl:sort select="Last_Name" data-type="text" order="descending" />
</xsl:apply-templates> 
</table>
</xsl:template>

<xsl:template match="person">
<tr>
  <td><xsl:value-of select="First_Name" /></td>
  <td><xsl:value-of select="Last_Name" /> </td>
</tr>
</xsl:template>
</xsl:stylesheet>

I am able to view the page with the dropdown but not able to get the dropdown interact with the page.

Any help would be appreciated.

@Sean:My expected output would be the html page with dropdown values as "MN" and "MI". When the user selects the "MN" dropdown value, the page refreshes showing only the people from MN and same with "MI" dropdown value. I can do this if i separate the xsl into two xsl where one would call "MI" and another would call "MN" value but i wanted to use only one xsl. — seleniumlover
– seleniumlover, Commented Aug 8, 2012 at 14:44

Dave K · Accepted Answer · 2016-12-08 23:58:18Z

I know this is old, and trivial for some. I haven't worked with XSLT in over 5 years, and had forgotten most of it. I have expanded Sean B. Durkin's answer to show more of the code, (at least how I implemented the missing pieces). I only tested this in FireFox, not sure if it will work in other browsers or not.

Tie XSL to the XML with the 2nd line in the XML file:

<?xml-stylesheet type="text/xsl" href="test.xsl" ?>

XML (test.xml):

<?xml version='1.0' encoding='UTF-8' standalone='yes' ?>
<?xml-stylesheet type="text/xsl" href="test.xsl" ?>
<data>
    <person>
      <first_name>Jane</first_name>
      <last_name>Whitney</last_name>
      <state>MI</state>
    </person>
    <person>
      <first_name>Jack</first_name>
      <last_name>Nicholson</last_name>
      <state>MI</state>
    </person>
    <person>
      <first_name>Jane</first_name>
      <last_name>Eyre</last_name>
      <state>MN</state>
    </person>
    <person>
      <first_name>Michael</first_name>
      <last_name>Johnson</last_name>
      <state>MN</state>
    </person>
</data>

XSL (test.xsl):

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:key name="key_state" match="data/person" use="state"/>

<xsl:template match="/">

  <html>
      <head>
          <style type="text/css">
              body 
              {
                font-family:arial,sans-serif;
                color:#000;
                font-size:13px;
                color:#333;
              }
              table 
              {
                font-size:1em;
                margin:0 0 1em;
                border-collapse:collapse;
                border-width:0;
                empty-cells:show;
              }
              td,th 
              {
                border:1px solid #ccc;
                padding:6px 12px;
                text-align:left;
                vertical-align:top;
                background-color:inherit;
              }
              th 
              {
                background-color:#dee8f1;
              }
          </style>

          <script type="text/javascript">

                window.onload = function() {
                    var statedropdown = document.getElementById("state_filter");
                    statedropdown.onchange("Show All");
                }

                function showHideRows(selectedState) {
                    // alert( "showHideRows selectedState: " + selectedState );
                    var table = document.getElementById('display_table');
                    for (var r = 1; r &lt; table.rows.length; r++) {
                            if ( selectedState == "Show All" || selectedState == "undefined" || table.rows[r].getAttribute('data-state') == selectedState)
                        table.rows[r].style.display = '';
                      else
                          table.rows[r].style.display = 'none';
                }
                    }
            </script>    

      </head>
      <body>
      <h2>Test XML/XSL Droprdown</h2>

        <table id="display_table">
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>State <br />
                <select  name="state_filter" id="state_filter" onChange="showHideRows(this.value);">
                    <option>Show All</option>
                    <xsl:for-each select="data/person[generate-id() = generate-id(key('key_state', state)[1])]">
                        <xsl:sort select="state" />
                <option><xsl:value-of select="state"/></option>
                    </xsl:for-each>"
                </select>

            </th> 

          </tr>   

            <xsl:for-each select="data/person">
                    <xsl:sort select="last_name" />
                <tr>
                    <xsl:attribute name="data-state"><xsl:value-of select="state"/></xsl:attribute>
                  <td><xsl:value-of select="first_name" /></td>
                  <td><xsl:value-of select="last_name" /></td>
                  <td><xsl:value-of select="state" /></td>
                </tr>     
        </xsl:for-each>
      </table>
      </body>
  </html>
</xsl:template>
</xsl:stylesheet>

Sean B. Durkin · Accepted Answer · 2012-08-09 07:55:25Z

0

If you only have two states, use your style-sheet as is, to render HTML for the entire table, but then use JavaScript and OnClick events to hide all table rows, except that of the selected state. By using Javascript, rather than re-building the entire page, your page will become much more responsive to user input.

Update

Here is an example of your sample output document after transformation. I have not included the actual (single) style-sheet because:

It is trivial.

I suggest that you change to a server-side transformation, rather than client side. If server-side the actual style-sheet would be different.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Personal Info</title>

<script type="text/javascript">

    window.onload = function(){
    var statedropdown = document.getElementById("statedropdown");
    statedropdown.onchange();
    }

  function showHideRows( selectedState){
    var table = document.getElementById('persontable');
    for (var r = 0, n = table.rows.length; r < n; r++) {
            if (table.rows[r].getAttribute('data-state') == selectedState)
             table.rows[r].style.display = 'none';
            else
             table.rows[r].style.display = ''
        }
    }
</script>    
</head>

<body>
<h1 class="title">PERSONAL INFO</h1> 
<select id="statedropdown" name="statedropdown"
             onChange="showHideRows(this.value)"> 
        <option value="MI">MI</option>
        <option value="MN">MN</option>
</select>  

<table id="persontable">
<tr>
  <th>First_Name</th>
  <th>Last_Name</th> 
</tr>   
<tr data-state="MI">
  <td>Jane</td>
  <td>Whitney</tde>
</tr>
<tr state="MI">
  <td>Jack</td>
  <td>Nicholson</td>
</tr>
<tr data-state="MN">
  <td>Jane</td>
  <td>Eyre</td>
</tr>
<tr data-state="MN">
  <td>Michael</td>
  <td>Johnson</td>
</tr>
</table>  
</body>
</html>

edited Aug 9, 2012 at 7:55

answered Aug 9, 2012 at 0:07

Sean B. Durkin

12.8k2 gold badges39 silver badges73 bronze badges

6 Comments

seleniumlover Over a year ago

Can you please explain with an example using the XSLT, XML and javascript? Thank you

Sean B. Durkin Over a year ago

Refer here, here, here or here. Make Google your friend. Use him. If this is not enough re-tag the question as [javascript] and get help from the Javascript experts.

seleniumlover Over a year ago

Thank you my friend :). Like i said, i've got it working with dropdown if i use two xsl one for dropdown value 1 and dropdown value 2 but i want to make it work with one xsl.

Sean B. Durkin Over a year ago

My stated solution IS for one xsl. That's the whole point of the Javascript.

seleniumlover Over a year ago

Thank you for your answers again. I got your answer but didn't see anywhere to call xsl file to get the contents from xsl file and display it in the table.

|

Collectives™ on Stack Overflow

How to filter the xsl file based on dropdown value in html file using Javascript?

2 Answers 2

Comments

Update

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Update

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related