How to Read Xml File Contents in Jquery and Display in HTML Elements

Show XML file all content in Textarea using jQuery

To read a file you have to use a FileReader object, it takes the File object from the file input and you can read it as text and display it in your text area.

$(document).ready(function(){
  $('.file').bind("change",function() {
    var fr = new FileReader();
    fr.readAsText(this.files[0]);
    fr.onload = e => {
      $('.textarea').val(e.target.result);
    }        
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='file' class='file'>
<textarea class='textarea'></textarea>

How to fetch contents from XML using JQUERY and display it on the table?

You can use += to append new rows ,currently your code just append row in tr . Instead you can use tbody and append trs inside this tbody.Also , you can give dataType: "xml" in ajax call as you are returning xml file as response.

Demo Code :

//your xml
var data = '<DisplayRequestData><DisplayData displayPort="d-01"><LaneName>Lane 1</LaneName><PlateNumber>7709</PlateNumber><BayName>ABCD 1</BayName> </DisplayData><DisplayData displayPort="d-02"><LaneName>Lane 2</LaneName><PlateNumber>5652</PlateNumber><BayName>XYZA 0012</BayName></DisplayData> <DisplayData displayPort="d-03"><LaneName>Lane 3</LaneName> <PlateNumber>XR-20398</PlateNumber> <BayName></BayName></DisplayData></DisplayRequestData>'
var info = "";
//parse xml (this is not needed if you have specified response as xml )
$xml = $($.parseXML(data));
//loop through data
$xml.find("DisplayData").each(function() {
  //append rows
  info += '<tr><td class="table_content" style="color: #DB075C;">' + $(this).find("LaneName").text() + '<td class="table_content" style="color: #FFFF00;">' + $(this).find("PlateNumber").text() + '<td class="table_content" style="color: #3107DB;">' + $(this).find("BayName").text() + '</tr>';
});
//add rows inside tbody
$("table tbody").html(info);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table class="status_table">
    <thead>
      <th class="table_heading">LaneName</th>
      <th class="table_heading" style="text-align:center;">PlateNumber</th>
      <th class="table_heading" style="text-align:center; ">BayName</th>
    </thead>
    <tbody>
   <tr></tr>
    </tbody>
  </table>
</div>

Load xml file content into div using jquery

Try this:

// Load the xml file using ajax 
$.ajax({
    type: "GET",
    url: "something.xml",
    dataType: "xml",
    success: function (xml) {

        // Parse the xml file and get data
        var xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc);
        $xml.find('category[name="My t"] logo').each(function () {
            $("#news-container").append($(this).text() + "<br />");
        });
    }
});

Reference: 1. jQuery.ajax() 2. parseXML()

Fetch data from xml file and display in html table using Ajax and xpath

Here is the code i used

for ( var i = 0; i < nodes.length; i++) {
var id = nodes[i].selectSingleNode("id").firstChild.nodeValue;
var name = nodes[i].selectSingleNode("name").firstChild.nodeValue;
var designation = nodes[i].selectSingleNode("designation").firstChild.nodeValue;
}

How to read and display data from XML for every 30 seconds using JQUERY AJAX and HTML

In your ajax request you specified that the data will be xml, in which case you will get back an xml document in your success handler, therefore do not call $.parseXML.

Getting the data every 30 seconds is just a matter of calling setTimer or setTimeout setting the timeout to 30 seconds

function getData(){
  $.ajax({
    type: "GET",
    url: "LiveData.xml",
    dataType: "xml",
    success: function (xml) {
            $xml = $(xml);
            $xml.find('Field[no="1"]').each(function () {
              $("#news-container").append($(this).text() + "<br />");

            });
    },
    complete: function(){
        setTimeout(getData, 30000);
    }
  });
}

getData();