The xslt code is failing to invoke the JavaScript function

I am currently utilizing xslt for the transformation of xml to html. Below is an example of an .xml file.

 <ImportOrganizationUtility-logging>
  <log-session module-name="ImportOrganizationUtility" end="17:54:06" start="17:52:19">
    <ou ou-name="Exchange" status="Success">
      <Steps>
        <step1 name="Add User" Username="hcimportuser3" PlanId="2" end="17:52:29" start="17:52:26" status="Success" > <log-description><![CDATA[  
          User added successfully.
]]></log-description> </step1>
        <step2 name="ImportOrganization" end="17:53:35" start="17:52:29" status="Success" >  <log-description><![CDATA[  
          Imported successfully.
]]></log-description></step2>
        <step3 name="Segregation Utility Operations" MailDomain="exchange.com" end="17:53:58" start="17:53:36" status="Success">
          <log-description><![CDATA[  
          Operation performed successfully.
]]></log-description>
        </step3>
      </Steps>
      <log-description><![CDATA[Organization 'Exchange' imported successfully]]></log-description>
    </ou>
    <ou ou-name="APICall2" status="Failed">
      <Steps>
        <step1 name="Add User and Sell Plan" Username="hcimportuser3" PlanId="2" end="17:54:02" start="17:54:01" status="Success" />
        <step2 name="ImportOrganization" end="17:54:06" start="17:54:02" status="Failed">
          <log-description><![CDATA[Detailed error message.]]></log-description>
        </step2>
      </Steps>
      <log-description><![CDATA[Detailed error message.]]></log-description>
    </ou>
  </log-session>
</ImportOrganizationUtility-logging>

I am in the process of creating two tables, where one is a sub table nested inside tr>td with style="display:none" applied to it. Both tables are being generated correctly.

The issue I am encountering is related to a JavaScript function that I have created and attempted to call upon clicking on a parent table row to toggle the sub table, but it is not functioning as expected. Even after adding an alert, I am not receiving any alerts on row click, indicating that toggleRow() is not being triggered.

If anyone can provide insights into what might be wrong here, I would greatly appreciate it. Below is an example of an .xsl file.

<?xml version="1.0" encoding="UTF-8"?>

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

  <xsl:template match="/">
    <html>
        <style>

        </style>
          <header>
            <link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
            <link rel="stylesheet" type="text/css" href="styles.css"/>
            <script type="text/javascript">
                 function toggleRow(itemID){ 
                    alert(itemID);
                      if ((document.getElementById("tr" + itemID).style.display == 'none')) 
                      { 
                        document.getElementById("tr" + itemID).style.display = 'inline'; 
                      } else { 
                        document.getElementById("tr" + itemID).style.display = 'none'; 
                      }             
            </script>
             
          </header>
      <body>
      <div class="form-group">
        <div class="table-responsive">
            <table id="table" class="table table-striped moveabletable">
            <thead>
              <tr class="table100-head" >
                <th class="medium col-sm-2" colspan="1" >Organization Name</th>
                <!-- <th class="medium col-sm-2" ></th> -->
                <th class="small  col-sm-1">Owner Name</th>
                <th class="small  col-sm-1">Status</th>
                <th>Description</th>
              </tr>
              </thead>
              
              <tbody>
              <xsl:for-each select="ImportOrganizationUtility-logging/log-session/ou">            
                <xsl:sort select="@status" order="descending"/>
                <xsl:variable name="i" select="position()"/>
                <tr >
                    <xsl:attribute name="onclick">javascript:toggleRow(<xsl:value-of select="$i"/>)</xsl:attribute>
                  <td><i class="fa fa-plus-circle" aria-hidden="true"> </i> <xsl:value-of select="@ou-name"/>
                    <!-- <a  onClick="toggleRow('{$i}')"> <xsl:value-of select="@ou-name"/></a> -->
                  </td>
                  <td><xsl:value-of select="Steps/step1/@Username"/></td>
                  
                  <xsl:choose>
                     <xsl:when test="@status='Failed'">
                      <td style="color:red"><xsl:value-of select="@status"/></td>
                      </xsl:when>
                       <xsl:otherwise > 
                          <td style="color:green"><xsl:value-of select="@status"/></td>
                      </xsl:otherwise>
                   </xsl:choose>                     
                  <td style="text-align:left"><xsl:value-of select="log-description"/></td>               
                  
                </tr>
                <tr id="tr{$i}" style="display:none">
                <td colspan="4">
                  <table id="table" class="table table-striped moveabletable ">
                        <thead>
                          <tr class="table100-head" >
                            <th class="medium col-sm-2" colspan="1" >Step</th>
                            <th class="small  col-sm-1">Status</th>
                            <th>Description</th>
                          </tr>
                        </thead>
                      
                        <tbody>
                            <tr >
                              <td>1</td>
                              
                              <xsl:choose>
                                 <xsl:when test="@status='Failed'">
                                  <td style="color:red"><xsl:value-of select="Steps/step1/@status"/></td>
                                  </xsl:when>
                                   <xsl:otherwise > 
                                      <td style="color:green"><xsl:value-of select="Steps/step1/@status"/></td>
                                  </xsl:otherwise>
                               </xsl:choose>                             
                             
                              <td style="text-align:left"><xsl:value-of select="Steps/step1/log-description"/></td> 
                              
                            </tr>
                             <xsl:if test="Steps/step2/@status!=''">
                                <tr >                           
                                  <td>2</td>
                                  
                                  <xsl:choose>
                                     <xsl:when test="@status='Failed'">
                                      <td style="color:red"><xsl:value-of select="Steps/step2/@status"/></td>
                                      </xsl:when>
                                       <xsl:otherwise > 
                                          <td style="color:green"><xsl:value-of select="Steps/step2/@status"/></td>
                                      </xsl:otherwise>
                                   </xsl:choose>                             
                                 
                                  <td style="text-align:left"><xsl:value-of select="Steps/step2/log-description"/></td> 
                                </tr>
                              </xsl:if>
                             <xsl:if test="Steps/step3/@status!=''">
                                <tr >
                                  <td>3</td>
                                  
                                  <xsl:choose>
                                     <xsl:when test="@status='Failed'">
                                      <td style="color:red"><xsl:value-of select="Steps/step3/@status"/></td>
                                      </xsl:when>
                                       <xsl:otherwise > 
                                          <td style="color:green"><xsl:value-of select="Steps/step3/@status"/></td>
                                      </xsl:otherwise>
                                   </xsl:choose>                             
                                 
                                  <td style="text-align:left"><xsl:value-of select="Steps/step3/log-description"/></td> 
                                </tr>
                              </xsl:if>
                        </tbody>
                    </table>
                  
                  </td> 
                
                </tr>
                    
              </xsl:for-each>               
                </tbody>
            </table>
        </div>
      </div>
        
      </body>
    </html>     
  </xsl:template>    
</xsl:stylesheet>

Above is a link to the image of the parent table https://i.stack.imgur.com/OMssP.png

Additionally, I aim to display the sub-table upon row click, similar to the illustration in this image https://i.stack.imgur.com/BMl9A.png

Your assistance in troubleshooting this matter would be highly valued. Thank you.

javascriptxmlxslt

Answer №1

Here is the corrected JavaScript code

function toggleRow(itemID){ 
                alert(itemID);
                  if ((document.getElementById("tr" + itemID).style.display == 'none')) 
                  { 
                    document.getElementById("tr" + itemID).style.display = 'inline'; 
                  } else { 
                    document.getElementById("tr" + itemID).style.display = 'none'; 
                  }  
}

In addition to adding the closing curly brace }, it's recommended to simplify the function as follows:

function toggleRow(id) { 
  document.getElementById('tr' + id).style.display = document.getElementById('tr' + id).style.display === 'none' ? '' : 'none'; 
}

This approach removes the inline style and lets the default setting take precedence, which is generally more efficient for handling table row display.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is my event.target.value not updating correctly in React useState?

My problem is that when I use useState, I am receiving incorrect numbers For example, if I print e.target.value it might display 1, but my selectedIndex shows 2. Similarly, when I have a selectedIndex of 0, it retrieves something different like 1. Any tho ...

javascriptreactjsecmascript-6material-uiuse-state

Avoid duplicate submissions while still enforcing mandatory fields

Let's start with a basic form that only asks for an email address: <form action="NextPage.php" method="post"> <input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email"> <button type="submit">Subm ...

javascripthtml

Can the axios version be displayed during runtime?

I have incorporated axios into my project using npm import axios from 'axios' Is there a way to print the version of axios in the console after the entire application has been compiled? ...

javascriptnpmaxios

Node is looking for a callback function, but instead received something that is undefined

When attempting to build a basic CRUD app in node js, an issue arises with the error message "Route.get() requires a callback function but got a [object Undefined]" specifically on the router.get("/:id", userController.getUser); line. Routes.js const expr ...

javascriptnode.jsexpressroutes

Issue encountered while attempting to write to csv-file using npm csv-writer - no error message displayed and function not working as

In my electron renderer.js process, I am attempting to write to a CSV file. Unfortunately, most of the time, the writing process doesn't work as expected, and the addition of .then is not executed. Despite this, no error messages or indications of mis ...

javascriptarrayscsvnpmelectron

What is the best way to define a function in React hooks - using a function statement or

When working with a react hook and needing to define a function inside it, which approach is preferable? useEffect(() => { //... function handler() {} //... }, []); or should I use the newer const declaration instead? useEffect(() => { ...

javascriptreactjsreact-hooks

What is the best way to add a key to a JavaScript array while keeping it reactive in Vue.js?

If there's an array in the state: state: { users: [] }, Containing objects like: { id: 1, name: "some cool name" } To add them to the store using a mutator like users.push(user);, how can we ensure that instead of 0:{...}, it uses the ...

javascriptarraysvue.jskeyvuex

How can I tally the frequency of characters in a given string using Javascript and output them as numerical values?

I am in the process of tallying the frequency of each individual character within a given string and representing them as numbers. For example, let's consider the string "HelloWorld". HELLOWORLD There is one H - so 1 should be displayed with H remov ...

javascriptstringcountnumbers

How can I display lowercase am/pm instead of uppercase AM/PM with angularjs date filtering?

Hi there, I'm a newcomer to AngularJS and I have a specific requirement. The server is sending me two dates: start_date and end_date. In the scenario where both dates are in 'pm', such as Sun 29 Jan 5.00 pm to Sun 29 Jan 6.00 pm, I would li ...

javascriptangularjs

Retrieving a targeted JSON element and adding it to a fresh object

Hello everyone, I have an object that resembles the following structure: [ { "app": 1, "scalable": true, "zoomable": true, "cropBoxResizable": true }, { "app" ...

javascriptjqueryjson

Ways to simulate a variable imported in the module being tested without it being a function parameter can be achieved by using describe.each and changing the mock value for each test

I have a requirement to test a function within my TypeScript module. module-to-test.ts import { config } from './app-config'; export const isSomethingWhatINeedSelector = createSelector( firstDependencySelector, secondDependencySelector ...

javascripttypescriptunit-testingmockingjestjs

Query in progress while window is about to close

I'm attempting to trigger a post query when the user exits the page. Here's the code snippet I am currently working with: <script type="text/javascript> window.onbeforeunload = function(){ var used = $('#identifier').val(); ...

javascriptjqueryonbeforeunload

Backbone sorting is specifically designed for organizing views within the framework

As I work on creating a sorting function in backbone, I have come across recommendations to use views to listen for changes in collections and then render the views once the collections are sorted. However, this approach does not suit my needs for two main ...

javascriptperformancesortingbackbone.js

One common issue popping up in Webpack logs is the error message "net::ERR_SSL_PROTOCOL_ERROR" caused by a call to sock

Using react on the front-end and .net core 3.1 on the back-end. Running webpack on localhost:8080 for client-side development. Configuring proxyToSpa in Startup.cs: applicationBuilder.UseSpa(spa => { spa.UseProxyTo ...

javascriptreactjswebpack.net-core

The keyboard fails to open when trying to input text on a WKWebView

Is there a way to programmatically open the keyboard in a WkWebView for tel text input after a JavaScript function call? I want the keyboard to display for efficiency reasons when a certain input is activated, but it doesn't gain focus automatically. ...

javascriptjqueryioskeyboardwkwebview

Is it possible to retrieve the complete file path in a form?

My goal is to retrieve a file using an input element of type "file". This element is located within a partial view, and I need to send it to the controller or request it there using "Request.Form["inputFile"];". However, this method only provides me with t ...

javascriptc#htmlasp.net-corerazor-pages

Guidelines for submitting and displaying content on a single page with jQuery and MySQL

Objective: To develop a Q&A Script using PHP, JavaScript, and jQuery that allows users to post questions and provide answers. Upon submitting a new answer, it should be stored in the database and automatically displayed in the answers section. Challenge: ...

phpjavascriptjqueryformssubmission

When using $resource.save, it returns a "Resource" instead of just an ID

For some reason, I am struggling with a seemingly simple task and cannot find a solution by going through documentation or other Angular related questions on SO. I may not be the brightest, so I could really use some help here as I am feeling stuck. Take ...

javascriptangularjsspring-mvcpostcallback

How to use Axios in Vue JS to access an array within a JSON object

Struggling to access arrays inside a JSON object and save them into separate arrays. Despite trying various methods, I have not been successful in retrieving these arrays. I suspect that my approach to accessing arrays within the JSON object is incorrect, ...

javascriptjsonvue.jsaxios

JavaScript checkboxes not being recognized by Node element

Located on the left side of the page, there is a feature that allows me to include selected options in a list with the same name attribute. These selections will then be sent as part of the entire form to the Node backend. Most of the elements on the page ...

javascriptnode.js