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> 3 Answers 3
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.
answered May 19, 2015 at 2:42
Marcus Vinicius
1,8981 gold badge20 silver badges36 bronze badges
Sign up to request clarification or add additional context in comments.
1 Comment
James
Thank you. In order to make this perfect, I need to use Ajax to send a variable to getAutoFill.php, which dynamically generates the XML document. Once the XML document is created, parse and process it.
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:
- Instead of
$('response', xml), you should use just$(xml). - Use the
datasetting instead ofxhrFields. - 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.
answered May 19, 2015 at 2:42
John S
21.5k9 gold badges50 silver badges59 bronze badges
4 Comments
James
Thank you. I tried this without any luck. My issue may be with my Ajax request, is my Ajax request correct?
James
I also changed xhrFields to data with the same result.
John S
@Jecker - Did you also fix the
dtlFill tags so they are closed?James
Yes I did. I added an / at then end, so they now read <dtlFill fkQuestion = "192" colData = "test1" colData2 = "test1" />
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"));
});
});
answered May 19, 2015 at 14:05
James
2621 gold badge4 silver badges14 bronze badges
1 Comment
John S
@Jecker - If you use
dataType: 'xml', jQuery will call $.parseXML(xml) for you before passing the value to the callback function. Also, in this case using .done() is no different than using the success callback function. So this code is equivalent to what I showed in my answer. That is, if one works, the other should work too.default