Ajax на готовом документе не работает

Я делаю конвертер валют, и то, что я намереваюсь сделать, это когда страница загружается, она использует функцию document.ready для вызова ajax для отображения стандартной валюты. Но это не так.Ajax на готовом документе не работает

Существует функция нажатия клавиш, чтобы сделать то же самое, и она работает. Таким образом, проблема в том, что она не отображается при загрузке страницы, но только при нажатии клавиши.

Кому-то можно дать руку?

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

источник

2013-06-10 Anonymous

Проверьте консоль, то, что она показывает при загрузке страницы? – tymeJV

Проблема заключается в том, что вы подмешать асинхронный с синхронизацией:

$(document).ready(function() 
{ 
    getRate(); 
    showConvertion(); 
});

Когда ShowConvertion вызвана, AJAX позвонить вам сделать в getRate не вероятно, еще вернулись, так что ваша rate переменные вам использование в ShowConvertion, вероятно, не установлено в то время. Вы должны обернуть ShowConvertion вызов в функцию успеха вашего AJAX вызова:

success : function(data) 
{ 
    rate = parseFloat(data.rate); 
    showConvertion(); 
}

источник

2013-06-10 14:26:30

Ajax на готовом документе не работает

ответ

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