Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Finding XML nodes with jQuery and putting into existing HTML table

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):

My front-end result

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!

like image 294
dmoz Avatar asked May 03 '17 15:05

dmoz


1 Answers

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>
like image 168
dmoz Avatar answered Oct 26 '22 22:10

dmoz