Get web page
Get web page
I am so lost, and hope some of you have more experience with ajax get then I have.
I need to collect data from a site named
http://www.wowhead.com for some of the items they have in there database.
I know how to get the item data when passing in the URL and my ajax get do work when I just need one item, but many calls don't work. WHY ?
Get a single item data in XML format here
http://www.wowhead.com/?item=49644&xml
If I call the function "getItemData('49644');" outside from the loop I do get the data.
Javasript
-
$(function() {
var $itemID = "";
for (var i = 0; i<$('div#bosslist ul li').size();i++) {
$itemID = $('div#bosslist ul li').eq(i).text();
$('div#bosslist ul li').eq(i).html('<a href="http://www.wowhead.com/?item=' + $itemID + '">' + $itemID + '</a>');
getItemData($itemID);
};
});
function getItemData($itemID) {
$.ajax({
type: 'GET',
url:"http://www.wowhead.com/?item=" + $itemID + "&xml",
async: true,
dateType:'xml',
error: function (xhr, desc, exceptionobj) {
alert("Error with id " + $itemID);
},
success: function($itemXML) {
$('a[href$=' + $itemID + ']').text($itemID + "-" + $('name', $itemXML).text());
}
}); //close $.ajax(
}
html code
-
<div id="holder">
<div id="bosslist">
Boss list (Onyxia)
<ul id="lootList">
<li id="bossItem">49636</li>
<li id="bossItem">49644</li>
<li id="bossItem">49322</li>
<li id="bossItem">49315</li>
<li id="bossItem">49318</li>
<li id="bossItem">49319</li>
<li id="bossItem">49316</li>
<li id="bossItem">49333</li>
<li id="bossItem">49321</li>
</ul>
</div>
</div>
My CSS looks like this
-
#lootList {
border:1px solid #DADADA;
background-color:#4A9;
padding:3px 5px;
margin-top:0em;
margin-bottom:0em;
margin-left:0em;
margin-right:1.3em;
}
li {
border:1px solid #DADADA;
background-color:#EFEFEF;
padding:3px 5px;
margin-bottom:3px;
margin-top:3px;
width:150px;
list-style-type:circle;
font-family:Arial, Helvetica, sans-serif;
color:#666666;
font-size:0.8em;
list-style:none
}
#bosslist {
width:300px;
float: left;
margin-left: auto;
margin-right: auto;
}
#holder {
width:600px;
margin-left: auto;
margin-right: auto;
}