2013-06-10 5 views
0

저는 통화 변환기를 사용하고 있으며, 페이지를로드 할 때 document.ready 함수를 사용하여 표준 통화를 표시하는 ajax를 호출합니다. 그러나 그렇지 않습니다.문서의 Ajax가 제대로 작동하지 않습니다.

동일한 기능을하는 키 누르기 기능이 있으며 작동합니다. 그래서 문제는 페이지를로드 할 때 표시되지 않지만 키 누르기 기능에서만 표시된다는 것입니다.

손으로 줄 수있는 사람이 있습니까? 그래서 당신의 rate 변수 당신에게,

$(document).ready(function() 
{ 
    getRate(); 
    showConvertion(); 
}); 
ShowConvertion가 호출

에서, AJAX는 아마 당신은 아직 반환되지 않은 getRate에서 확인 전화 :

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="layout.css"> 
     <script src='jquery.js'></script> 
     <title>Calculator Teste</title> 
    </head> 
    <body> 
     <header> 
      <div id="logo">Money Converter</div> 
     </header> 
     <div id="wrapper"> 
    <div id="from_select"> 
     <select name="from" id="from"> 
      <option selected="selected" value="USD">United States Dollars - USD</option> 
      <option value="EUR">Euro - EUR</option> 
      <option value="GBP">United Kingdom Pounds - GBP</option> 
      <option value="CAD">Canada Dollars - CAD</option> 
      <option value="AUD">Australia Dollars - AUD</option> 
      <option value="JPY">Japan Yen - JPY</option> 
      <option value="INR">India Rupees - INR</option> 
      <option value="NZD">New Zealand Dollars - NZD</option> 
      <option value="CHF">Switzerland Francs - CHF</option> 
      ... 
     </select> 
    </div> 


    <div id="to_select"> 
     <select name="to" id="to"> 
     <option selected="selected" value="EUR">Euro - EUR</option> 
      <option value="USD">United States Dollars - USD</option> 
      <option value="GBP">United Kingdom Pounds - GBP</option> 
      <option value="CAD">Canada Dollars - CAD</option> 
      <option value="AUD">Australia Dollars - AUD</option> 
      <option value="JPY">Japan Yen - JPY</option> 
      ... 
     </select> 
    </div> 

     <div id="result"><i>getting info...</i></div> 
     <input type="number" class="amount" name="amount" id="amount" value="1.00" autofocus/> 
    </div> 
    </body> 
     <script> 
      var rate = null; 
      getRate = function() { 
       // Getting Values 
       var from = $('#from').val(); 
       var to = $('#to').val(); 
       url = "http://rate-exchange.appspot.com/currency?from=" + from + "&to=" + to + "&calback=jsonpCallback"; 
       $.ajax({ 
       url: url, 
       type: "POST", 
       async: false, 
       dataType: "jsonp", 
       success : function(data) 
       { 
        rate = parseFloat(data.rate); 
       } 
       }); 
      }; 
      getRate(); 

      showConvertion = function(){ 
       var amount = $('#amount').val(); 
       result = amount * rate; 
       // alert(result); 
       $('#result').html(result.toFixed(2)); 
      }; 

      $(document).ready(function(){ 
       getRate(); 
       showConvertion(); 
      }); 
      $('#from').change(function(){ 
       getRate().then(showConvertion); 
      }); 
      $('#to').change(function(){ 
       getRate().then(showConvertion); 
      }); 

      $('#amount').keypress(function(){ 
       showConvertion(); 
      }); 
     </script> 
</html> 
+0

페이지를로드 할 때 콘솔이 표시되는지 확인하십시오. – tymeJV

답변

1

문제는 당신이 동기와 비동기를 믹스 인 것이다 ShowConvertion에서의 사용은이 시간에 설정되지 않은 것 같습니다. ShowConvertion 호출을 ajax 호출의 성공 함수로 래핑해야합니다.

success : function(data) 
{ 
    rate = parseFloat(data.rate); 
    showConvertion(); 
} 
관련 문제