title: Ajax on document ready not working properly
body: <p>I'm doing a currency converter and what I intend to do is when the page is loaded it use document.ready function to call a ajax to show a standard currency. But it doesn't.</p>
  
  <p>There's a keypress function to do the same and it works. So, the problem is that it doesn't show when load the page but only on keypress function.</p>
  
  <p>Some one can give a hand?</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="layout.css"&gt;
          &lt;script src='jquery.js'&gt;&lt;/script&gt;
          &lt;title&gt;Calculator Teste&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
              &lt;div id="logo"&gt;Money Converter&lt;/div&gt;
          &lt;/header&gt;
          &lt;div id="wrapper"&gt;
      &lt;div id="from_select"&gt;
          &lt;select name="from" id="from"&gt;
              &lt;option selected="selected" value="USD"&gt;United States Dollars - USD&lt;/option&gt;
              &lt;option value="EUR"&gt;Euro - EUR&lt;/option&gt;
              &lt;option value="GBP"&gt;United Kingdom Pounds - GBP&lt;/option&gt;
              &lt;option value="CAD"&gt;Canada Dollars - CAD&lt;/option&gt;
              &lt;option value="AUD"&gt;Australia Dollars - AUD&lt;/option&gt;
              &lt;option value="JPY"&gt;Japan Yen - JPY&lt;/option&gt;
              &lt;option value="INR"&gt;India Rupees - INR&lt;/option&gt;
              &lt;option value="NZD"&gt;New Zealand Dollars - NZD&lt;/option&gt;
              &lt;option value="CHF"&gt;Switzerland Francs - CHF&lt;/option&gt;
              ...
          &lt;/select&gt;
      &lt;/div&gt;
  
  
      &lt;div id="to_select"&gt;
          &lt;select name="to" id="to"&gt;
          &lt;option selected="selected" value="EUR"&gt;Euro - EUR&lt;/option&gt;
              &lt;option value="USD"&gt;United States Dollars - USD&lt;/option&gt;
              &lt;option value="GBP"&gt;United Kingdom Pounds - GBP&lt;/option&gt;
              &lt;option value="CAD"&gt;Canada Dollars - CAD&lt;/option&gt;
              &lt;option value="AUD"&gt;Australia Dollars - AUD&lt;/option&gt;
              &lt;option value="JPY"&gt;Japan Yen - JPY&lt;/option&gt;
              ...
          &lt;/select&gt;
      &lt;/div&gt;
  
          &lt;div id="result"&gt;&lt;i&gt;getting info...&lt;/i&gt;&lt;/div&gt;
          &lt;input type="number" class="amount" name="amount" id="amount" value="1.00" autofocus/&gt;
      &lt;/div&gt;
      &lt;/body&gt;
           &lt;script&gt;
              var rate = null;
               getRate = function() {
                  // Getting Values
                  var from = $('#from').val();
                  var to = $('#to').val();
                  url = "http://rate-exchange.appspot.com/currency?from=" + from + "&amp;to=" + to + "&amp;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();
              });
           &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>