Finding XML nodes with jQuery and putting into existing HTML table
ajax, html, jquery, xml
Solution
This is the jQuery that ended up working with the PHP proxy I posted in the original question:
<script>
$(document).ready(function(){
$.get("includes/proxy.php", function (data){
// Some callback functions
var stockPrice = ($(data).find('Trade').text());
var changeValue = ($(data).find('Change').text());
var stockVolume = ($(data).find('Volume').text());
var changePercentLong = (changeValue / (stockPrice - changeValue)) * 100;
var changePercent = changePercentLong.toFixed(2);
$('#stockPrice').html('$' + stockPrice);
$('#changePercent').html(changeValue + ' (' + changePercent + '%)');
$('#stockVolume').html(stockVolume);
if (changeValue >= 0) {
$('#changePercent').removeClass('stockpriceneg').addClass('stockprice');
} else {
$('#changePercent').removeClass('stockprice').addClass('stockpriceneg');
}
});
});
</script>
Problem
I'm trying to pull some stock info from an XML feed and write it to some existing divs on my website. UPDATE: I'm now using a php proxy because of CORS. See code below. UPDATE 2: Ok, getting there. My updated jQuery below is working for the first `stockPrice` variable, but not for the remaining three. The data being pulled for all of them are numbers, so I'm not sure why only one would be working. This is my HTML: ``` <div class="sidenavwrap"> <div class="sidenavhd"><p class="stocktitle">XXXX (Common Stock)</div> <div class="ctcol3"><p class="stocklft">Exchange</p></div> <div class="ctcol4"><p class="stocklft">NASDAQ (US Dollar)</p></div> <div id="stock-divider"></div> <div class="ctcol3"><p class="stocklft">Price</p></div> <div class="ctcol4"><p class="stocklft" id="stockPrice"></p></div> <div id="stock-divider"></div> <div class="ctcol3"><p class="stocklft">Change (%)</p></div> <div class="ctcol4"><p class="stockpriceneg" id="changePercent"></p></div> <div id="stock-divider"></div> <div class="ctcol3"><p class="stocklft">Volume</p></div> <div class="ctcol4"><p class="stocklft" id="stockVolume"></p></div> <div id="stock-divider"></div> <p style="text-align: center;">Minimum 10 minute delay</p> <div id="stock-divider"></div> <br><br><br> <!-- end sidenavwrap --></div> ``` This is my proxy.php: ``` // Set return content type header('Content-type: application/xml'); // Website url to open $url = 'http://xml.corporate-ir.net/irxmlclient.asp?compid=XXXXXX&reqtype=quotes'; // Get the content $handle = fopen($url, "r"); // If there is something, read and return if ($handle) { while (!feof($handle)) { $buffer = fgets($handle, 4096); echo $buffer; } fclose($handle); } ``` And this is my jQuery for pulling the data via the proxy: ``` <script> $(document).ready(function(){ $.get("includes/proxy.php", function (data){ // Some callback functions var stockPrice = ($(data).find('Trade').text()); var changeValue = ($(data).find('Change').text()); var stockVolume = ($(data).find('Volume').text()); var changePercentLong = (changeValue / (stockPrice - changeValue)) * 100; var changePercent = changePercentLong.toFixed(2); $('#stockPrice').html('$' + stockPrice); $('#changePercent').html(changeValue + ' (' + changePercent + '%)'); $('#stockVolume').html(stockVolume); if (changeValue >= 0) { $('#changePercent').removeClass('stockpriceneg').addClass('stockprice'); } else { $('#changePercent').removeClass('stockprice').addClass('stockpriceneg'); } }); }); </script> ``` UPDATE 2: Still not getting any errors in the console, and now I have the first variable showing correctly, but the others are only showing `0`'s(they should be `-0.23`, some math with the previous variable, and `5039270` respectively): I think it's really just a syntax error in my jQuery, but I'm not quite polished enough in my JS/jQuery to spot it. I'm sure someone more experienced could identify the problem in a second. Can anyone tell me what I'm doing wrong here? Many thanks!