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

Limit the precision of decimal number output to a specific value

I need assistance with achieving the output 999999.35 in angular or javascript combined with html. I am looking to restrict the number of 9's to a maximum of 6 digits before the decimal point, and after 6 digits it should not accept any more digits. A ...

javascriptjqueryangularjshtml

Sequentially loading Bootstrap columns as the page loads

Is there a way to load columns one by one with a time gap when the page is loaded? Here's the code snippet that can achieve this: setTimeout(function() { $("#box1").removeClass("noDisplay"); },1000); setTimeout(function() { ...

javascriptjqueryhtmlcsstwitter-bootstrap

What happens if setTimeout fails due to a page error?

My current setup involves using setTimeout to refresh the page, updating the jQuery template items. Here is a snippet of the relevant code: <script type="text/javascript"> var results = JSON.parse('@svgPath'.replace(/&quot;/g ...

javascriptjqueryajaxplayframework

Screening strings and arrays based on multiple criteria

My code is below and I am trying to have the bot check for two specific conditions in the user's message. The message must contain "how" plus either "doing" or "bread". It works perfectly when using only "doing" but not when adding the "bread" conditi ...

javascriptnpmdiscorddiscord.js

The Drop Down Menu feature in Bootstrap is malfunctioning within the context of a NextJS project

I've built a NEXT.JS application using VS Code. The issue I'm facing is with the drop down menu in the navigation bar - it's not sliding down to display the menu when clicked. Here is the code I'm working with: const loggedRouter = () ...

javascriptjquerybootstrap-4next.jsnavbar

The impact of React-router's history within the connect function of the react-redux provider

After successfully connecting my presentational-functional component to the redux store using the connect function, I encountered an issue regarding redirection upon triggering the getTask action or when apiGetTask has completed. I attempted to implement t ...

javascriptreactjsreact-reduxreact-router

Interactive HTML button capable of triggering dual functionalities

I am working on a project where I need to create a button using HTML that can take user input from a status box and display it on another page. I have successfully implemented the functionality to navigate to another page after clicking the button, but I ...

javascripthtmlbuttonactiondisplay

Guide for overlaying text on an image in react native

Is there a way to vertically align text over an image in react native? I came across this helpful guide, but I encountered difficulties trying to implement it. Specifically, I couldn't figure out how to nest the text tag within the Image tag. Below is ...

javascriptimagereact-nativejsx

When positioned at high or low angles, the camera starts acting strangely

In my Three.js scene, I have a camera that I need to move and change its angle around a specific focal point. The focal point is actually the camera's position, and during rendering, I translate the camera by using the cameraBuff vector to position it ...

javascript3dcamerathree.js

Exploring the intricacies of defining Vue component props in TypeScript using Vue.extend()

Here is a simple example to illustrate my question When I directly define my props inside the component, everything works fine <script lang="ts"> import Vue, { PropType } from "vue"; export default Vue.extend({ props: { col ...

javascripttypescriptvue.js

A collection of jQuery objects that consist of various DOM elements as their properties

Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...

javascriptjquerycssdom

Encountering an error with my JSONP call

Similar Question: json with google geocoding api json Uncaught SyntaxError: Unexpected token : $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&sensor=true&callback=?', function(data) { ...

javascriptjquery

"Troubleshooting a case where mongoDB's updateOne function is

I am in the process of removing certain references to objects within different sections (section1, section2, section3, others) in each file. Sample Document: { "_id": "64a3268474aa29e72b40c521", "name": "Test", ...

javascriptnode.jstypescriptmongodbnestjs

Raspberry Pi Fast Server: Issue with AJAX not locating images in directory and malfunctioning ID search

I'm completely new to Raspberry Pi, linux, and server concepts, so I'd appreciate explanations at a beginner level. My goal is to create a display similar to those you see in lobbies showing corporate slides and weather updates. While setting up ...

javascriptpythonajaxdateraspberry-pi

Determine the vertical distance that a div element is currently visible while scrolling

To better understand this concept, please refer to the following fiddle: http://jsfiddle.net/abhicodes/LasxP/ The main goal here is to calculate the visible height of the element with the ID #content-wrapper as the user scrolls. The height of the header ( ...

javascriptjqueryhtmlcss

Display a div when hovering over an image using jQuery

I've spent a good 30 minutes searching on Stack Overflow for a solution, but I haven't been able to find it yet. It's possible that I'm not sure what exactly to look for. Essentially, I have a div that contains an image and some text. ...

javascriptjqueryhtmlcss

Increase the quantity with animation

I am attempting to increment a number within an element on the page. However, I require the number to have a comma included while the increment should only increase by 1 digit every second. The code is currently functional, but I am facing a dilemma regar ...

javascriptjquery

Navigating through and extracting data from an object in JavaScript

Given the function call destroyer([1, 2, 3, 1, 2, 3], 2, 3);, I am trying to retrieve the last 2, 3 part after the initial array. However, I am unsure about how to achieve this. When I use return arr[6]; or return arr[1][0], both statements do not return ...

javascript

An issue occurred during compilation with 1 error: The required dependency could not be located

Encountering an issue in a Vue component while attempting to import another JavaScript file located in the services/AuthenticationService directory. Error message: Module not found: Error: Can't resolve '@/services/AuthenticationService'. ...

javascriptvue.jswebpack-dev-server

Guide to initializing the state in pinia with Typescript

I am encountering an issue while trying to add typescript to a pinia store. Any suggestions on how to resolve this problem would be appreciated. The project currently utilizes pinia:^2.0.16 and Vue:3.2.37 The error message is as follows: Type '{}&a ...

javascripttypescriptvue.jsvuejs3pinia