getJSON Synchronous

Question

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).

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.

$(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);          });     }  }); 

In my case, what I did was a get_from_db function call for getJSON to actually get data from database, with the data to be used to draw_polygon. But is that how it should be done? I'm a complete newbie and this is my first time to try getJSON 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 get_from_db with getJSON (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 $.ajax with async: false (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.

To make it more clearer, here's what I want to achieve:

1. @start of page, get data from database (currently through getJSON)
2. Paint or draw in canvas using the data
3. When I click the done button it will update the database
4. I want to AUTOMATICALLY get the data again to repaint the changes in canvas.

Answer 1

Since $.getJSON() uses ajax configurations, just set the global ajax configs:

// Set the global configs to synchronous  $.ajaxSetup({     async: false });  // Your $.getJSON() request is now synchronous...  // Set the global configs back to asynchronous  $.ajaxSetup({     async: true }); 

Answer 2

Asynchronusly does mean the Request is running in the background, and calls your function back when it got a response. This method is best if you want to have a result but allow to use your app within the request. If you want to have a direct response, take a look at a synchron request. this request will pause script execution until it got a response, and the user can not do anything until the response was recieved. You can toggle it via:

async: false, 

So for example:

$.ajax({     url: "myurl",     async: false,     ... })