2012-01-21 3 views
0

money.js 라이브러리를 사용하여 작은 통화 변환 스크립트를 만드는 중이며 .append(); 부품. 여기에 지금까지 무엇을 가지고 :jQuery --append() not working

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

를 추가 어떤 도움이라도 대단히 감사합니다.

+0

? 선언 된 곳은 어디입니까? 또한 스크립트 태그는 "준비된"처리기 안에 있습니다. 실제로 코드가 어떻게 생겼습니까? 그대로 달릴 방법이 없습니다. – Pointy

+0

또한 HTML5 문서에서 CDATA를 사용할 이유가 없습니다. – Pointy

+0

감사합니다, Pointy, 편집 및 정리하지만 놈의 일은 아직 못해. – Danny

답변

1

getJson()에서 값을 반환하기 전에 .append()을 호출하는 것이 문제였습니다. .getJson() 안에 .append()을두면 문제가 해결됩니다. 이 작품 :

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

불행히도 클래스를 id로 변경하면 Matthew에게 감사드립니다 .-( – Danny

+0

Ok . 또한 일부 스크립트 태그 및 것들을 정리 했으므로 모든 것을 확인하십시오. 또한 Google 크롬 개발자 도구를 사용하면 JavaScript 디버깅에 매우 유용합니다. 어떤 오류가 발생하는지 알려줍니다. Firefox에서 Firebug와 동일합니다. 행운을 빌어 요! –

+0

많은 감사합니다. Matthew, 지금은 더 깨끗해 보이고, 슬프게도 덧붙이 지 않습니다. - 도와 줘서 고마워요! – Danny

0

가 유효하지 않은 세미콜론

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') 
+0

슬프게도 .append() 문제를 해결하지 못했습니다 .--( – Danny

0

당신이 여분의 <script> 태그를 가지고있는 것처럼 보이는 :

<script type="text/javascript"> 

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

감사합니다. 편집하여 정리했습니다. – Danny

0

이 있는지 확인하시기 바랍니다이 제대로 닫기 당신의 Document ready 기능 (** 마감)

"FX"는 무엇입니까
$(document).ready(function() { 

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