CODEWITHSUNDEEP
javascriptjqueryhtmlajaxxml
Vijay
Vijay

Reputation: 33

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

I am a beginner would be great if someone help me on this.

I need to read and display data (HTML / PHP page) from XML for every 30 seconds.

XML FILE : 

<MAINData>
  <LiveData>
   <Field no="1">ENG ODI</Field>
   <Field no="2">ENG</Field>
   <Field no="3">IND ODI</Field>
   <Field no="4">IND</Field>
   <Field no="5">STRAUSS</Field>
   <Field no="6">PIETERSEN</Field>
   <Field no="7">TROTT</Field>
   <Field no="8">BELL</Field>
   <Field no="9">COLLINGWOOD</Field>
   <Field no="10">PRIOR</Field>
   <Field no="11">YARDY</Field>
   <Field no="12">BRESNAN</Field>
   <Field no="13">SWANN</Field>
   <Field no="14">SHAHZAD</Field>
   <Field no="15">ANDERSON</Field>
   <Field no="16">LBW B KHAN</Field>
   <Field no="17">C AND B PATEL</Field>
   <Field no="18">LBW B CHAWLA</Field>
   <Field no="19">C KOHLI B KHAN</Field>
  </LiveData>
</MAINData>

Here is my HTML File :

<!DOCTYPE html>

<html lang="en">
<head>
    

<script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  
<script type="text/javascript">


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



  
</script>
</head>
 

<body>
	
  <div class="wrap" id="news-container">
      
      
  </div>
  
 
</body>
</html>

I wanted to fetch specific details from the XML file and display it in the html page. Also another thing is I need to fetch this for every 30 seconds without refreshing the page.

Upvotes: 0

Views: 152

Answers (1)

Musa
Musa

Reputation: 97672

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();

Upvotes: 3

Related Questions