I'm wondering how to fix my script, I want to have an alert happen when you click the button yet it keep up with the changes happening to the xml on the same page. I would of thought this script would of worked yet of course when I click the button nothing happens. Thought I'd see if I could get any input on it from someone a little more experienced.
$(document).ready(function(){
function get_info() {
$.ajax({
type: "GET",
url: "xmldata/product.xml",
dataType: "xml",
cache: false,
complete: function(doc) {
var product = $(doc.responseText).find("product").text() == 1;
var name = product.next().children("name").text();
var cost = product.next().children("cost").text();
$("#xmlalert").click(function(){
alert(cost);
})
}
});
}
setInterval(function() {
get_info();
}, 5000);
});
The xml data is as shown:
<?xml version="1.0" encoding="utf-8"?>
<store>
<product>1</product>
<info>
<name>Toy</name>
<cost>1196</cost>
</info>
</store>
Html code
<button class="button" id="1">One</button>
<button class="button" id="2">Two</button>
Change your javascript code like:
$(document).ready(function(){
function get_info() {
$.ajax({
type: "GET",
url: "xmldata/product.xml",
dataType: "xml",
cache: false,
complete: function(doc) {
$(".button").click(function(event){
console.log($(this).attr('id'));
var product = $(doc.responseText).find("product").eq($(this).attr('id')-1);
var currentIndex=0;
product.each(function(index){
var name = $(this).next().children("name").text();
var cost = $(this).next().children("cost").text();
alert(cost);
});
});
}
});
}
setInterval(function() {
get_info();
}, 2000);
});
XML is
<?xml version="1.0" encoding="utf-8"?>
<store>
<product>1</product>
<info>
<name>Toy</name>
<cost>1196</cost>
</info>
<product>2</product>
<info>
<name>Toy 2</name>
<cost>11962</cost>
</info>
</store>