Trouble obtaining AJAX result using onClick event

Question

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting to display the desired content upon button click. The image below illustrates the expected output.

function makeAjaxQueryWeather(){
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
    }
  };
  xhttp.open("GET", "A8.xml", true);
  xhttp.send();
}

// handler for the readyState change
function readyStateChangeHandler(xhttp){

  if (xhttp.readyState == 4){
    // readyState = 4 means DONE

    if(xhttp.status == 200){
      // status = 200 means OK

      handleStatusSuccess(xhttp);

    }else{
      // status is NOT OK

      handleStatusFailure(xhttp);

    }
  }

}

// XMLHttpRequest failed
function handleStatusFailure(xhttp){

  // display error message

...

</pre>
<pre><code><h1>Part 2</h1>
<button onClick="makeAjaxQueryWeather()">
Click here to view weather forecast 1
</button>
<br/> <br/>
<div id="display">
</div>

https://i.stack.imgur.com/dLRXf.png

This is the XML file : https://i.stack.imgur.com/ToAYj.png

javascript html css ajax

Answer 1

Answer №1

Update your display function with the following code snippet and test it out.

function showWeather(weatherData){
  // log weather data to the console
  // console.log(weatherData);

  // create HTML content to show weather details
  var html = `<h1>${weatherData.location + weatherData.time}</h1><span>${weatherData.date}</span>`;
  
  // insert the generated HTML content in the display section
  var displaySection = document.getElementById("display");
  displaySection.insertAdjacentHTML('afterbegin',html);
}

Answer 2

Update your display function with the following code snippet and test it out.

function showWeather(weatherData){
  // log weather data to the console
  // console.log(weatherData);

  // create HTML content to show weather details
  var html = `<h1>${weatherData.location + weatherData.time}</h1><span>${weatherData.date}</span>`;
  
  // insert the generated HTML content in the display section
  var displaySection = document.getElementById("display");
  displaySection.insertAdjacentHTML('afterbegin',html);
}

Answer 3

Answer №2

To properly handle XML strings and convert them into an XML DOM document, you can utilize the DOMParser() method:

This function can be implemented as follows:

// Function to parse XML string into a proper XML DOM document
function parseXML(xmlString) {
  return new window.DOMParser().parseFromString(xmlString, "text/xml");
}

You can then utilize this function to parse XML content received from an XMLHttpRequest call.

The following code snippet illustrates how this function can be used within the success handler of an XMLHttpRequest call:

// Handling successful XMLHttpRequest
function handleStatusSuccess(xhttp) {
  var xml = xhttp.response;
  xml = parseXML(xml);

  // Parse the XML data into an object
  var weatherObj = parseXMLWeather(xml);
  // Display the parsed object on the page
  displayWeather(weatherObj);
}

Finally, make sure to update the HTML generation with the appropriate values:

var html = "<h1>" + weatherObj.queryLocation + " " + weatherObj.queryTime + "</h1>";
html += weatherObj.YYYYMMDD;

By following these steps, you'll be able to seamlessly handle XML data in your web application.

Answer 4

To properly handle XML strings and convert them into an XML DOM document, you can utilize the DOMParser() method:

This function can be implemented as follows:

// Function to parse XML string into a proper XML DOM document
function parseXML(xmlString) {
  return new window.DOMParser().parseFromString(xmlString, "text/xml");
}

You can then utilize this function to parse XML content received from an XMLHttpRequest call.

The following code snippet illustrates how this function can be used within the success handler of an XMLHttpRequest call:

// Handling successful XMLHttpRequest
function handleStatusSuccess(xhttp) {
  var xml = xhttp.response;
  xml = parseXML(xml);

  // Parse the XML data into an object
  var weatherObj = parseXMLWeather(xml);
  // Display the parsed object on the page
  displayWeather(weatherObj);
}

Finally, make sure to update the HTML generation with the appropriate values:

var html = "<h1>" + weatherObj.queryLocation + " " + weatherObj.queryTime + "</h1>";
html += weatherObj.YYYYMMDD;

By following these steps, you'll be able to seamlessly handle XML data in your web application.

Trouble obtaining AJAX result using onClick event

Answer №1

Answer №2

Similar questions

Tips for retrieving the value of a table cell when the checkbox in the corresponding row is selected

Encountering a Vue syntax error following the binding of a session variable

What are some methods for accessing jQuery ajax result data in Internet Explorer versions 7 or 8?

scraping text content from a CSS node using Scrapy

Reading data from a Node PassThrough stream after writing has finished can be achieved by piping the stream

The problem with Ajax POST is occurring in Firefox and Chrome, but not in IE8

When trying to locate an item in an array within a VUE application, it may result in

What are some ways to ensure that the promise from postgres is fulfilled before moving forward with my code execution?

The div is incorrect and causing the label and input to move in the wrong direction

Revise Total Amount in Woocommerce Checkout Using an Ajax Call

Hosting services and content management system for a website built with Twitter Bootstrap

Using the data from two input fields, an ajax request is triggered to dynamically populate the jQuery autocomplete feature

What is the best way to populate my table with array values entered into an input box using ajax PHP?

What are the potential drawbacks of utilizing setState within the componentDidUpdate method in React?

Utilizing XPath to retrieve text from a hyperlink

Converting an unbroken series of string values into organized key-value pairs for easy reference

How can you fetch data from a PHP file using AJAX before performing a header redirect?

Is it possible to close the navigation menu by clicking on a link or outside of the navigation area?

What is the best way to invoke the datepicker function on all rows of table data that share the 'datepicker' class?

Unable to redirect using JQuery Ajax post after receiving an ActionResult from an MVC controller