title: Bootstrap modal only shows after function completes, but not when I call it
body: <p>I'm creating a HTML5 tool for something at my work.</p>
  
  <p>My goal is: 
  Click the Go! button. Show the modal. Start the process of getting the lat long for all entered locations by starting the each loop and get the locations lat/lon via the ajax requests and closing the modal when these are all done.</p>
  
  <p>The modal can be shown by using the button TEST and it can also be shows after the function finishes but not when it starts.</p>
  
  <pre><code>$(document).ready(function () {
  
  
  
  $('#pleaseWaitDialog').click(function () {
          $('#pleaseWaitDialog').modal('hide');
      });
  
  
      $('#csvImportBtn').click(function () {
          $('#pleaseWaitDialog').modal('show');
          var csvText = $('#csvUpload').val();
          var data = csvUpload(csvText);
          $('#status').html('Getting lat long for: ' + data.length + 'devices...');
          getLatLon(data);
  
  
      });
  
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/VeldMuijz/10q7aqam/7/" rel="nofollow">Here</a> is the fiddle of the complete page, it doesn't seem to work for me from jsfiddle, but I can run it in a normal HTML page without errors.</p>
  
  <p>I've tested this in Chrome 'Version 38.0.2125.111 m'.</p>
  
  <p>Can anyone advise how I'll be able to show it on the start of the process (after clicking Go!)? Because I'm pretty lost right now.</p>
  
  <p>Edit:
  Here is the testdata to be pasted in the textarea:</p>
  
  <pre><code>device_id,address,city
  118001,Wipmolenweg 13,Almere
  118002,Wipmolenweg 14,Almere
  118003,Wipmolenweg 15,Almere
  118004,Wipmolenweg 16,Almere
  118005,Wipmolenweg 17,Almere
  118006,Wipmolenweg 18,Almere
  118007,Wipmolenweg 19,Almere
  118008,Wipmolenweg 20,Almere
  118009,Wipmolenweg 21,Almere
  118010,Wipmolenweg 22,Almere
  </code></pre>
  
  <p>Edit: Still stuck.. Can anybody help? Also changed the title for a better description.</p>