Hi, I am providing a snippet of a large code, this snippet intends to dynamically insert a list of filenames into a element on pageload, the filenames being read via Ajax from a XML file kept in the same folder as this one:
<html>
<head>
<title>hi</title>
<script src="https://www.google.com/jsapi"
type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
google.load('search', '1');
function onload() {
$.get("Files.xml", function(data) {
$(data).find("a").each(function() {
$("<option>"+$(this).text()+"</option>").appendTo($("#cool"));
});
});
}
google.setonloadCallback(onload)
</script>
</head>
<body>
<select id = "cool">
</select>
</body>
</html>
The XML file Files.xml runs as this:
<?xml version="1.0" encoding="UTF-8"?>
<files>
<a>Animals.xml</a>
<a>Fruits.xml</a>
<a>Birds.xml</a>
<a>Novels.xml</a>
</files>
When the page loads, instead of appending the filenames into the element once, it appends them twice, so that the dropdown menu consists of 8 names, two each of the names mentioned in the XML file, as shown in the image attached. Can anyone spot the bug?
