CODEWITHSUNDEEP
javascriptjqueryajaxxml
James
James

Reputation: 262

Unable to parse xml response in AJAX

Using the code from user "wildpeaks" I tried to modify it to meet my needs, but it doesn't work. My goal is to request information returned in an xml document. Parse the xml document and post the results to the appropriate input boxes. Can anyone point out where I am going wrong.

<!DOCTYPE html>
<html>
<head>
<title>jQuery and XML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<table>
<tr><td>
    <select name="recordList" onChange="getRecords(this);">
    <option value="1">Test1</option>
    <option value="2">Test2</option>
    <option value="3">Test3</option>
    </select>
</td></tr>
<tr><td>
    <input type="text" name="AnswerA192" id="AnswerA192" value="">
</td></tr>
<tr><td>
    <input type="text" name="AnswerA189" id="AnswerA189" value="">
</td></tr>
</table>

<script type="text/javascript">
function getRecords(what) {
  $.ajax({ 
    type: 'POST', 
    url: 'getAutoFill.php',
    xhrFields: { fkAutoFill: what.value },
    dataType: 'xml', 
    success: function(xml){
    $('response', xml).find('dtlFill').each(function() {
    $("#AnswerA" + $(this).attr("fkQuestion")).value($(this).attr("colData"));
});			
}
});
}
</script>
</body>
</html>

The XML file looks like

<?xml version="1.0" encoding="UTF-8"?>
<dtlAutoFill>
    <dtlFill fkQuestion = "192" colData = "test1" colData2 = "test1">  
    <dtlFill fkQuestion = "189" colData = "test1" colData2 = "test1">
</dtlAutoFill>

Upvotes: 2

Views: 1546

Answers (3)

John S
John S

Reputation: 21482

Change to:

$.ajax({ 
    type: 'POST', 
    url: 'getAutoFill.php',
    data: { fkAutoFill: what.value },
    dataType: 'xml', 
    success: function(xml) {
        $(xml).find('dtlFill').each(function () {
            $("#AnswerA" + $(this).attr("fkQuestion")).val($(this).attr("colData"));
        });
    }
});

Changes:

  1. Instead of $('response', xml), you should use just $(xml).
  2. Use the data setting instead of xhrFields.
  3. Use .val() on a jQuery object, not .value().

Note: When you specify dataType: 'xml', jQuery will automatically call $.parseXML() before passing the response object to the success callback function.

jsfiddle

Upvotes: 1

James
James

Reputation: 262

Thank you for you help. With your help I was able to make the following changes, which fixed my issue.

$.ajax({ 
            type: 'POST', 
            url: 'getAutoFill.php',
            data: { fkAutoFill: what.value },
            dataType: 'html',
            cache: false})
        .done(function(xml) {
            var xmlDoc = $.parseXML(xml);
            var $xml = $(xmlDoc);
            $xml.find('dtlFill').each(function() {
                $(".AnswerA" + $(this).attr("fkQuestion")).val($(this).attr("colData"));
            });
        });

Upvotes: 0

Marcus Vinicius
Marcus Vinicius

Reputation: 1908

The following code does what you want:

var xml = '<?xml version="1.0" encoding="UTF-8"?>' +
  '<dtlAutoFill>' +
  '<dtlFill fkQuestion = "192" colData = "test1" colData2 = "test1" />' +
  '<dtlFill fkQuestion = "189" colData = "test2" colData2 = "test1" />' +
  '</dtlAutoFill>';

$(document).ready(function() {
  var xmlDoc = $.parseXML(xml);
  var $xml = $(xmlDoc);

  var colData = $xml.find('dtlFill').each(function() {
    var colData = $(this).attr('colData');
    var fkQuestion = $(this).attr('fkQuestion');

    $('#AnswerA' + fkQuestion).val(colData);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="AnswerA192" id="AnswerA192" value="">
<input type="text" name="AnswerA189" id="AnswerA189" value="">

But I've noticed you XML is malformed, the <dtlFill> tag was not closed. jQuery will only been able to parse the XML after closing that tag.

The XML Parse snippet, was taken from the jQuery documentation.

Upvotes: 1

Related Questions