title: getJSON Synchronous
body: <p>GOAL: What I'm after is to get data from database and refresh main.php (more evident through draw_polygon) every time something is added in database (after $.ajax to submit_to_db.php).</p>
  
  <p>So basically I have a main.php that will ajax call another php to receive an array that will be saved to database, and a json call another php to return an array will be used by main.php.</p>
  
  <pre><code>$(document).ready(function() {
      get_from_db();
      $('#button_cancel').click(function(){
         $.ajax({
            url: 'submit_to_db.php',
            type: 'POST',
            data: {list_item: selected_from_list},
  
            success: function(result){
               ...
               get_from_db();
            }
         });
      });
      function get_from_db(){
           $.getJSON('get_from_db.php', function(data) {
               ...
               draw_polygon(data);
           });
      }
   });
  </code></pre>
  
  <p>In my case, what I did was a <code>get_from_db</code> function call for <code>getJSON</code> to actually get data from database, with the data to be used to <code>draw_polygon</code>. But is that how it should be done? I'm a complete newbie and this is my first time to try <code>getJSON</code> and ajax too to be honest. So my question: How does asynchronous work actually? Is there another workaround for this instead of having to call function <code>get_from_db</code> with <code>getJSON</code> (it isn't synchronous, is it? is that why it doesn't update the page when it isn't within a function?) All the time - like <code>$.ajax</code> with <code>async: false</code> (I couldn't get it to work by the way). My approach is working, but I thought maybe there are other better ways to do it. I'd love to learn how. Thanks in advance. I hope I'm making any sense.</p>
  
  <p>To make it more clearer, here's what I want to achieve:</p>
  
  <ol>
  <li><code>@start</code> of page, get data from database (currently through <code>getJSON</code>)</li>
  <li>Paint or draw in <code>canvas</code> using the <code>data</code></li>
  <li>When I click the done button it will update the database</li>
  <li>I want to AUTOMATICALLY get the data again to repaint the changes in canvas.</li>
  </ol>