jQuery selector to query XML
Question
I know that my selector values and my xml variables aren't connected, but I can't quite figure out how to connect them. I know that the xml is coming through, but I need to link it to the content displayed once the value is selected. Here's what I have:
New Code
<script src="js/xmlDom.js"></script>
<script type="text/javascript">
var cityID;
var city;
var amt;
$(document).ready(function() {
$.ajax({
type: "GET",
url: "data/precipData.xml",
dataType: "xml",
success: makeItRain
});
});
function makeItRain(xml) {
console.log($.xmlDOM(xml));
$.xmlDOM(xml).find("Row").each(function () {
cityID = $(this).attr("id");
city = $(this).find("city").text();
amt = $(this).find("amt").text();
$('<option>' + city + '</option>').appendTo('.selectCity');
console.log('appending');
$(".selectCity").change(function () {
$('select option:selected', this).append(cityID);
$(".name").append(city);
console.log('city');
$(".ammount").append(amt);
console.log('amt');
});
//.change();
});
};
</script>
</head>
<body>
<select class="selectCity">
<option id="default">Select a city</option>
</select>
<div class="name">
</div>
<div class="ammount">
</div>
</body>
Old Code
<script type="text/javascript">
var cityID;
var city;
var amt;
$(document).ready(function() {
$.ajax({
type: "GET",
url: "data/precipData.xml",
dataType: "xml",
success: makeItRain
});
});
function makeItRain(xml) {
$(xml).find("Row").each(function(){
cityID = $(this).attr("id");
city = $(this).find("city").text();
amt = $(this).find("amt").text();
$('<option>' + city + '</option>').appendTo('.selectCity');
console.log('appending');
$(".selectCity").change(function() {
$('select option:selected', this).append(cityID);
$(".name").append(city);
console.log('city');
$(".ammount").append(amt);
console.log('amt');
});
//.change();
});
};
</script>
</head>
<body>
<select class="selectCity">
<option id="default">Select a city</option>
</select>
<div class="name">
</div>
<div class="ammount">
</div>
1 answers
solution1
3 2013-07-05 23:28:11
Your logic is right, the ajax call (and callback) are put well in place. The only problem is that our buddy jQuery is only friends with HTML (and us too), and never wanted to be friends with XML because xQuery never took care of HTML when HTML had nobody and wept alone (John Resig is the true superman)
OMGOMG no XML querying!
Fortunately this isn't a big problem, amazing libraries and plugins have been written by humanitarians all around the world to solve this issue, one which I can name to you would be:
xmlDOM this is a jQuery plugin which makes the elusive XML querying a dream come true.
Good news
If we use xmlDOM your code will not have to be changed too much, the following is your new code:
function makeItRain(xml) {
console.log($.xmlDOM(xml));
$.xmlDOM(xml).find("Row").each(function () {
cityID = $(this).attr("id");
city = $(this).find("city").text();
amt = $(this).find("amt").text();
$('<option>' + city + '</option>').appendTo('.selectCity');
console.log('appending');
$(".selectCity").change(function () {
$('select option:selected', this).append(cityID);
$(".name").append(city);
console.log('city');
$(".ammount").append(amt);
console.log('amt');
});
//.change();
});
};
Demonstration
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.