CODEWITHSUNDEEP
javascriptjquery
Dan Barr
Dan Barr

Reputation: 93

outputting html with jQuery is creating a random 'Â' when I put in a £ sign

I have the following function that is used to populate a bunch of spans with some text when i select a new option from a drop down.

     jQuery('#finance_option').on('change', function() {
        var totalPrice = jQuery('.summary .price ins .woocommerce-Price-amount.amount').text();
        var number = Number(totalPrice.replace(/[^0-9\.]+/g,"")); 
        number = parseFloat(number);
        var productGuid = this.value;

        arr = lookup_table(productGuid);

        var apr = parseFloat(arr.apr);
        var duration = parseFloat(arr.duration);
        var calculation = parseFloat(arr.calculation);

        var deposit = round((number / 100) * 10);
        var monthly = round((number - deposit) * calculation);
        var final = monthly;
        var loan_amount = round(number - deposit);
        var loan_repayment =round(monthly * (duration -1) + final);
        var cost = round(loan_repayment - (number - deposit));
        var total = round(loan_repayment + deposit);

        jQuery('#deposit').html('10%');
        jQuery('#monthly').html('£' + monthly);
        jQuery('#final').html('£' + monthly);
        jQuery('#cash').html('£' + number);
        jQuery('#deposit_to_pay').html('£' + deposit);
        jQuery('#loan_amount').html('£' + loan_amount);
        jQuery('#loan_repayment').html('£' + loan_repayment);
        jQuery('#cost').html('£' + cost);
        jQuery('#total').html('£' + total);
        jQuery('#number').html(duration);

    });
});

It works fine the majority of the time and displays the output correctly into a html table like below.

Deposit               |     10%
Monthly Payment       |     £81.11
Final Installation    |     £81.11
Cash price            |     £1800   
Deposit to Pay        |     £180
Loan Amount           |     £1620
Loan Repayment        |     £1946.64
Cost of Loan          |     £326.64
Total Amount Payable  |     £2126.64
Number of Payments    |     24

however sometimes when I reload, or select a new option the output looks like this.

Deposit               |     10%
Monthly Payment       |     £81.11
Final Installation    |     £81.11
Cash price            |     £1800   
Deposit to Pay        |     £180
Loan Amount           |     £1620
Loan Repayment        |     £1946.64
Cost of Loan          |     £326.64
Total Amount Payable  |     £2126.64
Number of Payments    |     24

The html being output looks like this for each line

  <td id="loan_repayment">£1946.64</td>

What is this 'Â', where does it come from and how can I stop it?

Upvotes: 1

Views: 84

Answers (2)

warch
warch

Reputation: 2609

try to escape the pound sign with 

&#163;

e.g.:

jQuery('#total').html('&#163;' + total);

Upvotes: 3

Sami Kuhmonen
Sami Kuhmonen

Reputation: 31203

The problem is with encoding. Most likely you've saved the file with UTF-8 and are not serving it as such, so the functions will write two characters out.

The happy coincidence is that £ has codepoint U+00A3 which encoded as UTF-8 is 0xC2 0xA3 so it looks like an additional character was added to the pound sign and is not complete garbage.

So check the encoding of the file saved, the encoding the server gives out, the encoding of the page etc. It should all match properly.

Upvotes: 2

Related Questions