Showing specific XML data from a node when a button is clicked in an HTML document

<script>
$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "data.xml",
        dataType: "xml",
        success: function(xmlData) {
            $("POS", xmlData).each(function(){
                var sr = $(this).find('SRNO').text(),
                    tname = $(this).find('TRANSACTIONNAME').text(),
                    rbasis = $(this).find('ROUTINGBASIS').text(),
                    lookup = $(this).find('LOOKUPRULE').text(),
                    rrule = $(this).find('ROUTINGRULE').text();

                var output = '<tr>' ;
                output += '<td class="sr">'+sr+'</td>';
                output +='<td class="tname">'+tname+'</td>';
                output += '<td class="rbasis">'+rbasis+'</td>';
                output += '<td class="lookup">'+lookup+'</td>';
                output += '<td class="rrule">'+rrlule+'</td>;

                output += '</tr>';
                $("#t3").append(output);
            });
        }
    });
});
</script>

Instead of displaying the entries on page load, I want to show a blank page and then click a button to reveal the entries from node POS.

javascriptajaxxml

Answer №1

Implement your ajax request within a function triggered by a button click.

<input type="button" id="btn" value="click"/>
<script>
$(document).ready(function () {
    $("#btn").on("click", function { // Linking button click to a specific function 
        $.ajax({
            type: "GET",
            url: "data.xml",
            dataType: "xml",
            success: function (xmlData) {
                $("POS", xmlData).each(function () {

                    var sr = $(this).find('SRNO').text(),
                        tname = $(this).find('TRANSACTIONNAME').text(),
                        rbasis = $(this).find('ROUTINGBASIS').text(),
                        lookup = $(this).find('LOOKUPRULE').text(),
                        rrule = $(this).find('ROUTINGRULE').text();


                    var output = '<tr>';
                    output += '<td class="sr">' + sr + '</td>';
                    output += '<td class="tname">' + tname + '</td>';
                    output += '<td class="rbasis">' + rbasis + '</td>';
                    output += '<td class="lookup">' + lookup + '</td>';
                    output += '<td class="rrule">' + rrlule + '</td>';

                    output += ' < /tr>';
                    $("#t3").append(output);

                });
            }
        });
    });
});    
</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

Tips for attaching inline styles to the body element with a vuejs component

I am new to vue.js and have been learning for a couple of days now. There are still some concepts that I am struggling to understand. I am currently working on creating a dropdown menu that appears when the user clicks on three dots. However, I am facing a ...

javascripthtmlvue.jsvuejs2vue-component

Do not include the loading of <embed> items while the page is loading

I am currently working on a website project for a friend that involves incorporating a lot of large images. To ensure a smooth loading process, I have implemented a loading overlay while the background content loads. However, I have also added background m ...

javascriptjqueryhtmlloading

Showing a loading animation whenever the date picker's selected date is changed

My Laravel application showcases various statistics to users. Within my front-end blade, I have set up multiple widgets, each displaying a specific stat. The widget below showcases the total number of orders. <div class="row mt-3" id="sh ...

javascriptphpjqueryajaxlaravel

Is it feasible to bypass the dialog box on beforeunload?

Currently, I am utilizing jQuery's bind method like so: $(window).bind('beforeunload', function() { //my code return ""; } In Mozilla Firefox and IE8, everything works smoothly without including the "return "";" statement. No pesk ...

javascriptjquery

What's the best way to implement image size and type validation, specifically for .jpg and .png files, using Multer?

When using multer to receive files from the FrontEnd, I need to validate the image size to ensure it's less than 1MB. Additionally, I want to restrict the accepted file types to .jpg, .jpeg, and .png only. const multer = require("multer"); c ...

javascriptnode.jsexpressmulter

Customizing the placeholder font size in Material UI Autocomplete using ReactJS

Is there a way to change the placeholder font size for Material UI Autocomplete? https://i.stack.imgur.com/x71k2.png <Autocomplete multiple id="tags-outlined" options={top100F ...

javascriptreactjsmaterial-uimaterial-table

Using an XmlDataSource to bind a RadioButtonList inside a Repeater

My XML structure is as follows: <questions> <question text="This is a test question?"> <answer value="Yes"> <requirement articleId="2899"/> </answer> <answer value="No"> <requirement articleId="2899"/> </ans ...

asp.netxmlxmldatasource

The parent component is failing to pass the form values to the child form group in CVA

My Angular application (view source code on Stackblitz) is running Angular 15, and it utilizes reactive forms along with a ControlValueAccessor pattern to construct a parent form containing child form groups. However, I am encountering an issue where the d ...

javascriptangulartypescriptangular-formsangular-formbuilder

Create a duplicate of the sapUI5 JSON model and end the data binding process

I've encountered a similar issue, but the solution doesn't seem to work for me. I have a JSON model named "data" that represents a SAPUi5 form with comboboxes. My goal is to capture the initial state of the model when the application is first ope ...

javascriptjsonbindingsapui5model-binding

Modify the background color of a div when it contains a particular string of text

https://i.sstatic.net/Ab5S9.png Looking for assistance with a basic jQuery script that can search for a specific text string. If the text is found, I want to change the CSS of the containing div. The HTML+CSS+JS code would be like: $(".ng-cell .ngCell ...

javascriptjqueryhtmlcss

use PHP to dynamically assign a value to an input

Recently, I developed a PHP function that can shorten URLs similar to popular services like goo.gl or bit.ly. This function returns the shortened link using an echo statement. Now, I am faced with the challenge of incorporating this returned link into an i ...

javascriptphp

Attempting to utilize Vue js to connect to an API

I'm currently facing difficulties while trying to access an API in order to retrieve data. As a novice in the world of vue.js and javascript, I encountered an error message saying Uncaught SyntaxError: Invalid shorthand property initializer. Unfortuna ...

javascriptvue.js

Tips for expanding a script that relocates a logo into a navigation consisting of several unordered lists

I recently implemented a jQuery script to center a logo within my main navigation bar only when the screen width is above 980 pixels. It was working perfectly fine with a single unordered list, but as soon as I added more unordered lists within the nav, it ...

javascriptjqueryhtmlwordpresswp-nav-walker

Accessing information from JSON files using AJAX

I'm currently working on loading data from a JSON file using AJAX. The file I'm referencing is external-file.json. Within the code snippet provided, there are other unrelated sections. I'm encountering an issue within the getViaAjax function ...

javascriptajaxjsonparsing

Changing the route variable in React Native's bottom bar tab functionality

https://i.sstatic.net/ESGur.png I am looking to create a consistent bottom tab bar that remains the same on every screen, but I want the routes of the tabs at the bottom to change dynamically. For example, in Screen1, the tab at the bottom should route to ...

javascriptreactjsreact-nativereact-navigation

The ng-repeat function is not functioning properly when used within an li element to trigger

I have utilized the Dialog service to create a pop-up window. My intention is to display a message to the user in this format: txt = '<ul> <li data-ng-repeat = "eachValue in dummnyList" > {{eachValue | applyFilte ...

javascriptangularjs

calculating the duration between successive PHP form submissions

I am trying to calculate the duration between when a user submits a PHP form and when they submit it again. The form reloads on the same page, essentially refreshing it. Additionally, the user may enter the same data again. I want the timer to start runnin ...

javascriptphppythonhtmljson

Retrieve the scope object using angular.element and the $ID parameter

In order to transfer data from an angular application to scripts that operate outside of angular, I am seeking a solution since I cannot modify the code of the angular app. By utilizing Angular Batarang and NG-Inspector extensions in Chrome, I have identi ...

javascripthtmlangularjsangularjs-scope

Assistance is required to navigate my character within the canvas

Having trouble getting the image to move in the canvas. Have tried multiple methods with no success. Please assist! var canvas = document.getElementById("mainCanvas"); canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; ...

javascripthtml

How to Add a Foreign Component to Your Vue Application

I'm trying to utilize a NPM package called vue-simple-spinner in my Vue CLI webpack application, but I keep encountering this error message: Unknown custom element: <vue-simple-spinner> - have you registered the component correctly? For recursi ...

javascriptwebpackvue.js