jQuery - .append() не работает

Я создаю небольшой скрипт конвертации валюты, используя библиотеку money.js, и столкнулся с проблемой с .append(); часть. Вот то, что я до сих пор:jQuery - .append() не работает

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

Я также это в HTML сразу после кнопки отправки, она отлично работает с только строки, но перестает работать, как только я добавить + convertedValue

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

Любые помощь с благодарностью

источник

2012-01-21 Danny

Что такое "FX"? Где это объявлено? Также ваш тег скрипта находится внутри вашего «готового» обработчика. На самом деле, как выглядит ваш код? Нет никакого способа, который бы бежал так, как есть. – Pointy

Также нет причин использовать CDATA в документе HTML5. – Pointy

Спасибо, заодно, отредактировано и прибрано, но чертовски все еще не пойдет. – Danny

Проблема заключалась в том, что вызывалось, что номер .append() был возвращен с getJson(). Размещение .append() внутри .getJson() решило проблему. Это работает:

<!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>

источник

2012-01-21 18:52:40

Спасибо за внимание Мэтью, к сожалению, изменение класса на id не показало никакого эффекта :-( – Danny

Ok Я также очистил некоторые скриптовые теги и все, поэтому обязательно проверьте все это. Кроме того, использование инструментов Google Chrome Developer очень полезно при отладке JavaScript. Он расскажет вам, какая ошибка вызывается. То же самое касается Firebug в Firefox Удачи! –

Еще раз спасибо Мэтью, теперь выглядит намного чище, к сожалению, еще нет append(), - оцените вашу помощь! – Danny

Похоже, у вас есть объект, заканчивающуюся точкой с запятой

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

, который не действует, попробуйте изменить его

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

Также я хотел бы ожидать

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

и не только

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

источник

2012-01-21 18:59:23 mplungjan

Спасибо, хорошо заметили, к сожалению, что не исправить проблему .append() :-( – Danny

Похоже, у вас есть дополнительный <script> тег:

<script type="text/javascript"> 

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

источник

2012-01-21 19:09:12 ryankeairns

Спасибо, изменен и очищен :-) – Danny

пожалуйста, убедитесь, что правильно Закрывая Document ready функция (** закрытие)

$(document).ready(function() { 

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

источник

2012-01-21 19:49:57 Sanooj

jQuery - .append() не работает

ответ

Смежные вопросы