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.

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

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