CODEWITHSUNDEEP
javascriptjquery
Danny
Danny

Reputation: 290

jQuery - .append() not working

I'm in the process of creating a small currency conversion script using the money.js library and have run into a problem with the .append(); part. Here is what I have so far:

<script type="text/javascript">
$(document).ready(function () {

    function pfxCurrencyConverter() {
        //get the users options from the form and store in variables
        var pfxFromCurrency = $('#pfx-from-currency').val();
        var pfxToCurrency = $('#pfx-to-currency').val();
        //set base options
        fx.base = pfxFromCurrency
        fx.settings = {
            from: pfxFromCurrency
        };
        //  get the amount input by the user
        var inputAmount = $('#pfx-input-amount').val();

        // Load exchange rates data via the cross-domain/AJAX proxy:
        $.getJSON('http://openexchangerates.org/latest.json', function (data) {
            // Check money.js has finished loading
            if (typeof fx !== "undefined" && fx.rates) {
                fx.rates = data.rates;
                fx.base = data.base;
            } else {
                // If not, apply to fxSetup global:
                var fxSetup = {
                    rates: data.rates,
                    base: data.base
                }
            }
            var convertedValue = fx.convert(inputAmount, {to: pfxToCurrency});

            $("#currencies").append("<li>New Value" + convertedValue + "</li>");
        });
    } //end pfxCurrencyConverter
    $(document).ready(function () {
        pfxCurrencyConverter();
    });
</script> 

</head>
<!-- output form for user to populate -->

<!-- Output the front end form, include external stylesheet and define customisable css -->

</head>
<!-- output form for user to populate -->
<body>
<form method="get" onsubmit="return pfxCurrencyConverter();">
Amount: <input type='text' id='pfx-input-amount' /><br />
From: <select id='pfx-from-currency'>
    <option>Please Choose</option>
    <option>GBP</option>
</select><br />
To: <select id='pfx-to-currency'>
    <option>Please Choose</option>
    <option>USD</option>
</select><br />
<input type='submit' value='Convert' />
</form>
<ul id="currencies"></ul>
</body>
</html>

I have also this in the html right after the submit button, it works fine with just a string but stops working once I add + convertedValue

<script>document.write("New Value" + convertedValue);</script>

Any help is greatly apprecited

Upvotes: 0

Views: 8443

Answers (4)

Matt Cashatt
Matt Cashatt

Reputation: 24238

The problem was that the .append() was being called before the value was returned from getJson(). Placing the .append() inside the .getJson() solved the problem. This works:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="http://josscrowcroft.github.com/money.js/money.js"></script>
        <script type="text/javascript">

            function ConvertMoney(to, from, amt) {
                // Load exchange rates data via the cross-domain/AJAX proxy:
                $.getJSON('http://openexchangerates.org/latest.json',
                        function (data) {
                            // Check money.js has finished loading:
                            if (typeof fx !== "undefined" && fx.rates) {
                                fx.rates = data.rates;
                                fx.base = data.base;
                            } else {
                                // If not, apply to fxSetup global:
                                var fxSetup = {
                                    rates: data.rates,
                                    base: data.base
                                };
                            }

                            var result = "<li>" + fx.convert(amt, { from: from, to: to }) + "</li>";
                            $("#result").append(result);
                        });
            }

            $("#convert").live("click", function () {
                var from = $("#pfx-from-currency").val();
                var to = $("#pfx-to-currency").val();
                var amt = $("#pfx-input-amount").val();

                ConvertMoney(to, from, amt);
            });

$(document).keypress(function(e) {
    if(e.keyCode == 13) {
          var from = $("#pfx-from-currency").val();
                var to = $("#pfx-to-currency").val();
                var amt = $("#pfx-input-amount").val();

                ConvertMoney(to, from, amt);
    }
});

        </script>
    </head>
    <body>
    Amount:
    <input type='text' id='pfx-input-amount' /><br />
    From:
    <select id='pfx-from-currency'>
        <option>Please Choose</option>
        <option>GBP</option>
    </select><br />
    To:
    <select id='pfx-to-currency'>
        <option>Please Choose</option>
        <option>USD</option>
    </select><br />
    <input type='button' id="convert" value='Convert' />
    <ul id="result">
    </ul>
</body>
</html>

Upvotes: 1

Sanooj
Sanooj

Reputation: 2637

please make sure that properly Closing your Document ready function ( ** closing )

$(document).ready(function () {

    ........
    .......... 
          });
        } //end pfxCurrencyConverter
    **});**
    $(document).ready(function(){
    pfxCurrencyConverter();
    });

Upvotes: 0

ryankeairns
ryankeairns

Reputation: 808

Looks like you have an extra <script> tag:

<script type="text/javascript">

$(document).ready(function(){
<script type="text/javascript">

Upvotes: 0

mplungjan
mplungjan

Reputation: 178402

Looks like you have an object terminated by a semicolon

var convertedValue = fx.convert(inputAmount, {to: pfxToCurrency; });

that is not valid, try changing it to 

var convertedValue = fx.convert(inputAmount, {to: pfxToCurrency });

Also I would expect

var pfxToCurrency = document.getElementById('pfx-to-currency').value

and not just

var pfxToCurrency = document.getElementById('pfx-to-currency')

Upvotes: 0

Related Questions