$.get/$.getJSON not delaying execution of whole script? - php

Question

I'm using fullcalendar to present events of my site members. Everyone can add own event. Each event have to have unique ID which I'm getting using SELECT INCREMENT(MAX('id')) in PHP. Then proper var is passed to JavaScript and here is a problem. The number is given to the fullcalendar renderEvent function at the second try of adding new event. At first click on calendar, variable is empty as declared (in variable named newEventId).
Here is my code:
function showCalendar() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var newEventId = '';
$('#kalendarz').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
editable: false,
dayClick: function(e)
{
$.getJSON('/ajax/call/bands/AddEvent', function(data) {
newEventId = data.dane;
});
console.log(newEventId); // <- empty, then with ID at second click...
$("#kalendarz").fullCalendar('renderEvent',
{
title: 'Termin zajęty',
start: e,
id: newEventId
});
},
});
}
What is the problem? renderEvent function is not waiting for getJSON to finish job? Could I fix it?

Answer 1

$.getJSON is AJAX, AJAX is asynchronous! Set it inside $.getJSON callback function:
$.getJSON('/ajax/call/bands/AddEvent', function (data) {
newEventId = data.dane;
$("#kalendarz").fullCalendar('renderEvent', {
title: 'Termin zajęty',
start: e,
id: newEventId
});
});

Answer 2

getJson() initiates an AJAX request, which is asynchronous, getJSON returns after initiating the AJAX-request, but that doesn´t mean that the request itself has finished already. Therefore you can hand over a function onSuccess, which will be called with the received data when the request finished.
If the mechanism wouldn´t work this way you weren´t able to do anything while the request is sent - imagine clicking somewhere, that click calls a function and somehow a request is started, then everything would wait until the request would finish: at the highest level you couldn´t even move your mouse anymore until you receive some response data - that isn´t user-friendly at all ;)
Solving your problem is easy by putting all the code after your request which depends on its response inside the onSuccess-function (you have the function already)