Wait for external method to complete before finishing?

I'm making a little calendar app, in PHP and JavaScript. To populate the events div on the first page, I run this function:

function populateEvents() {

    $.ajax({  
        type: "GET",  
        url: "populateEvents.php",
        success: function(data, textStatus, XMLHttpRequest) {  
            $('#events').html(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert("Status: " + textStatus + ". Error thrown: " + errorThrown);
        }
    });
}

Pretty simple, populateEvents.php does most of the work.

Now, when I want to add an event, I call the following function:

function createEvent(u_id) {
    var title = $("#titleInput").val();
    var type = $("#typeSelect").val();
    var location = $("#locationInput").val();
    var date = $("#inputDate").val();
    var time = $("#inputTime").val();
    var allday = $('#allDaySelect:checked').val() !== undefined ? '1' : '0';
    var duedate = type == 'todo' ? date : '';
    var notes = $("#inputNotes").val();
    var output = 'u_id=' + u_id + '&title=' + title + '&type=' + type + '&location=' + location + '&date=' + date + '&time=' + time + '&allday=' + allday + '&duedate=' + duedate + '&notes=' + notes;


    $.ajax({  
        type: "GET",  
        url: "addEvent.php", 
        data: output,
        success: function(data, textStatus, XMLHttpRequest) {  
            if (data == '') {
                toggleNewEvent();
                populateEvents();
            } else {
                // extract form problems from formProblems, in form: title=empty&date=empty&...

                var errorArray = data.split("&");
                var fields = '';
                $.each(errorArray, function(index, value) {
                    var field;
                    var smallArray = value.split("=");
                    field = smallArray[0];
                    fields = fields + field + ', ';
                });
                alert('You must fill in the following fields: ' + fields);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert("Status: " + textStatus + ". Error thrown: " + errorThrown);
        }
    });
}

A bit more complicated, but I'm sure you get the gist. Values sent to addEvent.php, return string parsed, etc, events repopulated. Now, I just restructured the whole PHP side, to implement an eventlist class and an event class. Previously, the addevent.php file did all the actual backend work, but now, that file (after some validation) boils down to this:

if ($return == '') {
        /*If return is empty, everything is fine, carry on.*/
        $eventlist->addEvent($u_id, $title, $type, $date, $time, $allday, $location, $dueby, $notes);
    } else {
        /*Throw an error*/
        ec开发者_StackOverflowho ($return);
    }

As a result however, this file returns to the JavaScript function when it's sent that request to the eventlist object to execute the addEvent method. The function then tries to populate the event div immediately, and as a result, it doesn't work, because the addEvent method hasn't finished. When you refresh the page, however, it works fine, so I know it is inserting them correctly, it just needs to wait for that second PHP file to finish.

Why not return the $eventlist->addEvent($u_id, $title, $type....... part to the script, echo $eventlist->addEvent($u_id, $title, $type........

Then in your addEvent method return something, i.e. the ID of the event.

Then instead of checking the page is blank, you are checking for an ID ( if (!isNaN(data)) isNotANumber ), thus you know you have finished inserting your event as your page wouldn't return until it has the ID.