Is there a way to display an XML listing recursively similar to the functionality of an ASP:MENU in the past?

I have been working on converting a previous asp:menu item to JavaScript. Here is the JavaScript code I have come up with:

    function GetMainMenu() {
        var html = '';
        var finalHTML = '';
        finalHTML += '<div class="dropdown" style="width:100%">';
        finalHTML += '<ul class="nav navbar-nav navbar-left">';
        finalHTML += '<li class="dropdown">';
        finalHTML += '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style="height:18px;color:#003366">';
        finalHTML += 'Main Menu<span class="caret"></span></a>';

        var MainMenu = null;
        MainMenu = new ActiveXObject("Microsoft.XMLDOM");
        MainMenu = readXml("/public/FHSMenu.xml");


        finalHTML += buildList(MainMenu.getElementsByTagName("Menu"));


        finalHTML += '</li>';
        finalHTML += '</ul>';
        finalHTML += '</div>';

        alert(finalHTML);
        document.getElementById("preMainMenu").innerHTML = finalHTML;

        var x = null;
        x = new ActiveXObject("Microsoft.XMLDOM");
        var item;


        function buildList(data) {
            html += '<ul class="dropdown-menu" role="menu">';

            x = data;

            for (item = 0; item < x.length ; item++) {

                var y = x[item].getElementsByTagName("Title")[0].childNodes[0].nodeValue;

                var u = null;
                try {
                    u = x[item].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
                } catch (e) {
                    u = '';
                }

                if (u != '') {
                    html += '<li><a href="' + u + '" style="font-size:12px;color:#003366" >' + y + '</a></li>';
                } else {
                    html += '<li class="dropdown-submenu" role="menu" >';
                    html += '<a href="#" data-toggle="dropdown" style="font-size:12px;color:#003366" >' + y + '</a>';
                    html += '</li>';
                    //var SubMenu = x[item].getElementsByTagName("Menu");
                    //if (SubMenu != undefined && SubMenu.length > 0) {
                    //    html += buildList(SubMenu); // Submenu found. Calling recursively same method (and wrapping it in a div)
                    //}
                }

            }

            html += '</ul>';
            return html;
        }

    }

I am facing challenges while trying to display the root menus and submenus recursively from an XML file that was originally created for use with ASP:MENU. Any guidance on achieving this drop down menu functionality in JavaScript would be greatly appreciated.

<?xml version="1.0" standalone="yes"?> <LeftNavMenu>   <Menu>
    <MenuId>63</MenuId>
    <Title>Clinical Care</Title>
    <URL />
    <ZOrder>0</ZOrder>
    <Menu>
      <MenuId>1660</MenuId>
      <ParentId>63</ParentId>
      <Title>Ambulatory EHR</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>
    <Menu>
      <MenuId>3649</MenuId>
      <ParentId>63</ParentId>
      <Title>Angel Eye</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>
    <Menu>
      <MenuId>1610</MenuId>
      <ParentId>63</ParentId>
      <Title>Clarity</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>   </Menu>   <Menu>
    <MenuId>3</MenuId>
    <Title>Corporate</Title>
    <URL />
    <ZOrder>0</ZOrder>
    <Menu>
      <MenuId>1487</MenuId>
      <ParentId>3</ParentId>
      <Title>Become an Organ Donor</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>
    <Menu>
      <MenuId>1845</MenuId>
      <ParentId>3</ParentId>
      <Title>Brand Style Guide</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>
    <Menu>
      <MenuId>2153</MenuId>
      <ParentId>3</ParentId>
      <Title>Calendars</Title>
      <URL />
      <ZOrder>0</ZOrder>
      <Menu>
        <MenuId>2155</MenuId>
        <ParentId>2153</ParentId>
        <Title>Freemanhealth.com Events</Title>
        <URL>some_link</URL>
        <ZOrder>0</ZOrder>
      </Menu>
      <Menu>
        <MenuId>2391</MenuId>
        <ParentId>2153</ParentId>
        <Title>Kronos Calendar</Title>
        <URL>some_link</URL>
        <ZOrder>0</ZOrder>
      </Menu>
      <Menu>
        <MenuId>2158</MenuId>
        <ParentId>2153</ParentId>
        <Title>Payroll</Title>
        <URL>some_link</URL>
        <ZOrder>0</ZOrder>
      </Menu>
      <Menu>
        <MenuId>2156</MenuId>
        <ParentId>2153</ParentId>
        <Title>Professional Development</Title>
        <URL>some_link</URL>
        <ZOrder>0</ZOrder>
      </Menu>
      <Menu>
        <MenuId>2157</MenuId>
        <ParentId>2153</ParentId>
        <Title>Room Scheduling</Title>
        <URL>some_link</URL>
        <ZOrder>0</ZOrder>
      </Menu>
    </Menu>
    <Menu>
      <MenuId>8</MenuId>
      <ParentId>3</ParentId>
      <Title>Car Pool</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>
    <Menu>
      <MenuId>1280</MenuId>
      <ParentId>3</ParentId>
      <Title>CMN (Children's Miracle Network)</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>
    <Menu>
      <MenuId>181</MenuId>
      <ParentId>3</ParentId>
      <Title>Employee Handbook</Title>
      <URL>some_link</URL>
      <ZOrder>0</ZOrder>
    </Menu>   </Menu> </LeftNavMenu>
javascripthtmlcssrecursionmenu

Answer №1

I managed to piece together a solution for loading the XML Menu file recursively. Since I didn't receive any feedback, I thought it might be beneficial to share how it was achieved in case someone else is attempting to convert an asp:menu to JavaScript. Here's the code snippet:

<script type="text/javascript">

    function readXml(xmlFile) {
        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.load(xmlFile);
        var tagObj = xmlDoc.getElementsByTagName("Menu");
        var menuidValue = tagObj[0].getElementsByTagName("MenuId")[0].childNodes[0].nodeValue;
        try {
            var parentidValue = tagObj[0].getElementsByTagName("Parentid")[0].childNodes[0].nodeValue;
        } catch (err) {
            var parentidValue = 0;
        }
        var titleValue = tagObj[0].getElementsByTagName("Title")[0].childNodes[0].nodeValue;

        try {
            var urlValue = tagObj[0].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
        } catch (err) {
            var urlValue = '';
        }

        var zorderValue = tagObj[0].getElementsByTagName("ZOrder")[0].childNodes[0].nodeValue;

        return xmlDoc
    }


    $(document).ready(function () {
        GetMainMenu();
    });


    function buildList(data) {

        var item;
        var html = '';

        html += '<ul class="dropdown-menu" role="menu">';

        for (item = 0; item < data.length ; item++) {

            var Title = data[item].getElementsByTagName("Title")[0].childNodes[0].nodeValue;

            var URL = null;
            try {
                URL = data[item].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
            } catch (e) {
                URL = '';
            }

            if (URL == '') {
                html += '<li class="dropdown-submenu" role="menu" >';
                html += '<a href="#" data-toggle="dropdown" style="font-size:12px;color:#003366" >' + Title + '</a>';
                html += buildList(data[item].getElementsByTagName("Menu")); // Submenu found. Calling recursively same method
                html += '</li>';
            } else {
                html += '<li><a href="' + URL + '" style="font-size:12px;color:#003366" >' + Title + '</a></li>';
            }
        }

        html += '</ul>';
        return html;
    }


    function GetMainMenu() {
        var html = '';
        var finalHTML = '';
        finalHTML += '<div class="dropdown" style="width:100%">';
        finalHTML += '<ul class="nav navbar-nav navbar-left">';
        finalHTML += '<li class="dropdown">';
        finalHTML += '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style="height:18px;color:#003366">';
        finalHTML += 'Main Menu<span class="caret"></span></a>';

        var MainMenu = null;
        MainMenu = new ActiveXObject("Microsoft.XMLDOM");
        MainMenu = readXml("/public/FHSMenu.xml");

        finalHTML += buildList(MainMenu.childNodes[1].childNodes,html);


        finalHTML += '</li>';
        finalHTML += '</ul>';
        finalHTML += '</div>';

        document.getElementById("preMainMenu").innerHTML = finalHTML;

    }

</script>

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

Using React: Passing the state value of Child1 to the Parent component, then passing it back down to Child2 from

Within my application, I've implemented two child components: 'FoodScreen' and 'OperationScreen', along with a parent component called 'Desk'. I am passing a JSON array variable to the FoodScreen component in order to sel ...

javascriptreactjsreact-native

Is it possible to retrieve text from various iframes using the rangy library?

Here's a question that follows up on a problem I've been having with grabbing selected text from iframes using rangy. The code works well for the first iframe, but when I try to grab elements from multiple iframes using the same button, it doesn& ...

javascriptjqueryiframerangy

How to customize a disabled paper-input element in Polymer 1.0?

Help with Polymer 1.0: I've encountered an issue where setting a paper-input element to 'disabled' results in very light gray text and underline, making it hard to read. I've been trying to use CSS to change the text color but haven&ap ...

csspolymermaterial-designweb-component

Why am I experiencing varying outcomes between createShadowRoot and attachShadow methods?

Recently, I've encountered an issue related to shadow dom while working on a project. After referring to an older tutorial that uses createshadowroot, I realized that this method is now considered deprecated and should be replaced by attachshadow. Un ...

csswebshadow-dom

Exploring the realm of styling with React JS

Currently, I am facing an issue while working with material-ui for my web design. Here is the code snippet that I am using: const useStyles = makeStyles((theme) => ({ card: { marginTop: theme.spacing(10), direction:"column", alig ...

javascriptreactjsmaterial-ui

Updating all images in a JQuery thumbnail gallery

I've been experimenting with jQuery and fancy box to create a special effect on my website. I wanted to display a large image with thumbnails below it, where clicking on a thumbnail would update the main image (similar to the RACE Twelve image example ...

javascriptjqueryimage-galleryevent-bubbling

Display or conceal elements in a v-for select input by leveraging the value of another input with Vue3

In my form, I have two dropdown select option fields generated using loops from predefined constants. One dropdown is for selecting different "sides" and the other for choosing various "caps". When a user selects "2-Sided" in the sides dropdown, I want t ...

javascriptvue.jsvuejs3

What is the inability to place a div that is 30% wide alongside another div that is 70% wide, and keep them in a horizontal line?

If I make a div that is 30% wide, and another div that is 70% wide, they do not align horizontally. To fix this, I need to ensure that the combined widths of the two divs are less than 100%. Here's an example of how it can be done: <div id="wrapp ...

htmlcss

Sort with AngularJS: orderBy multiple fields, with just one in reverse

Currently, I am faced with the challenge of filtering data based on two variables: score and name (score first, followed by name). This task involves various games, some of which have scores in reverse order (like golf) while others maintain a normal scor ...

javascriptangularjsangularjs-filterangular-filtersangularjs-orderby

React Modals: Only the modal component triggered by the first click will open, with no other modals opening

As a newcomer to StackOverflow, I apologize if my problem description is not clear. I am currently learning React and working on a course-search app as a project. The app filters courses based on user input from a JSON file and displays them in cards with ...

javascriptreactjsreact-reduxreact-bootstrap

Node.js causing issues with executing jQuery front-end code properly

I created an automatic image scroller div consisting of a ul with small images. The aim is to have a basic scroller that starts running once the page loads. It functions perfectly when I test the code (HTML, CSS, and a JS file with jQuery) locally in a bro ...

jqueryhtmlcssnode.jsexpress

Adding a class to a PHP file using AJAX response

I have been developing a website that features a like button attached to user-generated posts. My goal is to update the like count of a post whenever a user likes it, but I am encountering an issue where the entire post gets affected. Below is the code fo ...

javascriptphpjqueryajax

"Create a unique visual layout with CSS using a four-grid

When utilizing four div grids and increasing the content size of table 2, it causes table 3 to align with table 4, creating a large gap between tables 1 and 3. Is there a way to adjust the responsive content sizing for tables 1, 3, 5... and 2, 4, 6... in o ...

htmlcss

Is there a method for viewing or manipulating an object within a JSON file?

Could someone please assist me in accessing the total sum displayed in the chart using console.log? I have tried setting it using "var item": "[[value.sum]]", but it did not work. Any help is appreciated. var chartData1 = []; generateChartData(); func ...

javascriptjsonamcharts

Replicating form fields using jQuery

I have come across many questions similar to mine, but unfortunately none of them address the specific details I am looking for. On a single page, I have multiple forms all structured in the same way: <form> <div class="form-group"> ...

javascriptjqueryforms

Can we achieve live map updates in real time using Google API with Node.js technology?

Can Google Maps API in conjunction with Node.js provide truly real-time updates on a map without any callback limits, or does Google enforce restrictions such as a 5 second or 30 second time frame? Node.js is known for its ability to handle almost real-ti ...

javascriptnode.jsgoogle-mapsmeteorjavascript-framework

angular2 ngFor is not functioning properly

I'm having an issue where I cannot get textboxes to appear whenever a user clicks a button. I am attempting to achieve this using ngFor, but for some reason, the ngFor is not iterating as expected. Even after trying to change the array reference with ...

javascripthtmlangulartypescript

How can a Chrome extension automatically send a POST request to Flask while the browser is reloading the page?

I am looking to combine the code snippets below in order to automatically send a post request (containing a URL) from a Chrome extension to Flask whenever a page is loading in Chrome, without needing to click on the extension's icon. Is this feasible? ...

javascriptpythonajaxflaskgoogle-chrome-extension

Having trouble with CSS text not wrapping correctly?

While working on a web application, I encountered an issue where the text within a <div> element on my page was not wrapping properly and instead overflowing outside the box. The <div> in question goes through two stages: one where it is not e ...

cssoverflowwhitespace

``I am experiencing issues with the Ajax Loader Gif not functioning properly in both IE

I am brand new to using ajax and attempting to display a loading gif while my page loads. Interestingly, it works perfectly in Firefox, but I cannot get it to show up in Chrome or IE. I have a feeling that I am missing something simple. The code I am using ...

javascriptjqueryhtmlcssajax