I'm trying to use this ajax method but it is not working

Question

I've created a select element in which I wanted to link my xml file so when the user selects of the items the paragraph from XML should appear for each. So I wrote the ajax method which is no working for me now and yes the file ( english.xml ) is in the same directory.

This is for Apache Cordova 8.0, JavaScript version 8.0.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<meta name="http-equiv" content="Content-type: text/html;" charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="js/jquery-1.5.0.mobile.min.css">
<link rel="stylesheet" type="text/css" href="css/english.css">
</head>
<body>

<div>
<select class="letters" id="alpha" onchange="giveSelection(this.value)">    
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
      <option value="d">D</option>
      <option value="e">D</option>
      <option value="f">F</option>
</select>

    <select class="story" id="story" onchange="storyelected(this.value)">

      <option data-option="a">A blessed home</option>
      <option data-option="a">Amazing park</option>
      <option data-option="a">As they passed</option>
      <option data-option="b">Blessed times</option>
      <option data-option="b">Being humble</option>
</select>
</div>

    <div data-role="content" class="ui-content" role="main" placeholder="Filter by data-option">
    <div class="content-primary">
    <hr>

<div style="padding: 20px; background-color:White; border-color:Gray; border-style:solid; border-width:1px;border-radius:10px; font-family: Times New Roman; text-transform: none;" id="textarea" type="text" name="textarea">          

<p id="lyrics"></p> // this is where i want the story to be shown

</body>
</html>

Here is my Java Script code.

var alpha = document.querySelector('#alpha');
var story = document.querySelector('#story');
var options2 = songs.querySelectorAll('option');

function giveSelection(alphaValue)
{
songs.innerHTML = '';
for(var i = 0; i < options2.length; i++)
{
    if(options2[i].dataset.option === alphaValue)
{
    story.appendChild(options2[i]);
}
    }
}
giveSelection(alpha.value);

    $.ajax({
      type: 'get',
      url: 'english.xml',
      dataType: 'xml',
      success: function(data) {
        console.log(data)
      }
    });

When the user selects an option from select, I expect only that topic ( <p> category) fetched from XML file to be shown as output.

Answer 1

Might be easier to debug if you print the error in the console like so:

$.ajax({
  type: 'get',
  url: 'english.xml',
  dataType: 'xml',

  error: function (e) {
    console.log("XML reading Failed: ", e);
  },

  success: function(data) {
    console.log(data)
  }
});

Also, please note that in the code you have posted you are missing a semi-colon (;) at the very end.

Answer 2

I fugired out that the function was not called.

Html

<select class="letters" id="alpha" onchange="giveSelection(this.value)" onclick="calltext()">

JavaScript

function (calltext){$ajax....}

Also I had to change the ID of select.

I'm trying to use this ajax method but it is not working

Question

2 answers

solution1
0 2019-11-11 11:35:10

solution2
0 ACCPTED 2019-11-18 15:31:32

I'm trying to use this ajax method but it is not working

Question

2 answers

solution1 0 2019-11-11 11:35:10

solution2 0 ACCPTED 2019-11-18 15:31:32

solution1
0 2019-11-11 11:35:10

solution2
0 ACCPTED 2019-11-18 15:31:32