Finding XML nodes using jQuery and placing an existing HTML table

Question

I am trying to extract some stock information from an XML feed and write it to some existing divs on my site.

UPDATE: Now I am using php proxy because of CORS . See code below.

UPDATE 2: Ok, get there. My updated jQuery below works for the first variable stockPrice , but not for the other three. The data for all of them are numbers, so I'm not sure why only one will work.

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 data through a 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: I still don’t get any errors in the console, and now I have the first variable displaying correctly, but the rest show only 0 (they should be -0.23 , some math with the previous variable and 5039270 respectively):

I think this is really just a syntax error in my jQuery, but I am not debugged well enough in my JS / jQuery to determine this. I am sure that someone more experienced can identify the problem in a second. Can someone tell me what I'm doing wrong here? Many thanks!

Answer 1

This is jQuery that ended up working with a PHP proxy, which 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> 

Answer 2

Please replace your code with the following. Hope this helps.

 $.ajax({ type: "GET", url: "http://xml.corporate-ir.net/irxmlclient.asp?compid=XXXXXX&reqtype=quotes", dataType: "xml", complete: function (xml) { var xmlDoc = (new DOMParser()).parseFromString(xml.responseText, "application/xml") var nodes = xmlDoc.querySelectorAll('IRXML StockQuotes Stock_Quote')[0]; var stockPrice = parseInt(nodes.querySelectorAll('Trade')[0].textContent); var changeValue = parseInt(nodes.querySelectorAll('Change')[0].textContent); // $(this).find('Change').text(); var changePercent = (changeValue / (stockPrice - changeValue)) * 100; var stockVolume = nodes.querySelectorAll('Volume')[0].textContent; //$(this).find('Volume').text(); $('#stockPrice').html('$' + stockPrice); $('#changePercent').html('+' + changeValue + ' (' + changePercent + '%)'); $('#stockVolume').html(stockVolume); }, error: function (errorData) { console.log('Error: request failed!'); console.log(errorData); } });