title: Loading Indicator does not appear when the radio button is chosen and the 'add' button is clicked
body: <p>I am using Rails4 version.
  Here are the choices that I need to make:</p>
  
  <p><img src="https://i.stack.imgur.com/DbXx2.png" alt="enter image description here"> </p>
  
  <p>When I do my choice for the first time and click the 'Add' button, the loading indicator doesn't appear. When I do it second time and click the 'Add' button the loading indicator appears and working fine. I am not really good with javascript, so I do not really know how to trigger the loading indicator to appear at first attempt. Here is my code:</p>
  
  <p>My VIEW file:</p>
  
  <pre><code>&lt;div id="loading-indicator" style="display:none"&gt;
   &lt;%=" Wait..."%&gt;&lt;%= image_tag("/images/ajax-loader-8.gif", :id =&gt; "loading-indicator") %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS file:</p>
  
  <pre><code>#loading-indicator {
    left: 10px;
    top: 10px;
    }
  </code></pre>
  
  <p>My 'create.js' file:</p>
  
  <pre><code>$(document) 
  
  .ajaxStart(function() {
  
  
  $('#loading-indicator').show();// show on any Ajax event.
  $("#notice").html("&lt;%= escape_javascript(render :partial =&gt; 'layouts/flash' , 
  :locals =&gt; {   :flash =&gt; flash }).html_safe %&gt;").hide();
  })
  .ajaxStop(function() {
  
  $("#notice").html("&lt;%= escape_javascript(render :partial =&gt; 'layouts/flash' , 
  :locals =&gt; { :flash =&gt; flash }).html_safe %&gt;").show();
  $('#loading-indicator').hide(); // hide it when it is done.
  
  });
  
  $("#transaction_paypal").html("&lt;%= escape_javascript(render :partial =&gt; 'trans')%&gt;");  
  </code></pre>
  
  <p>Thank you.</p>