Wait for external method to complete before finishing?

Question

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*/
        echo ($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.

Please.. **do not use a string as the `data` param**. You can pass an object which will relieve you from having to take care about escaping things. — ThiefMaster, Feb 28 '11 at 11:06
he means the `output` variable should be a json object, that way jquery will escape any texts and pass the proper data, e.g. `{u_id':1,'title':'this is my title'}` — Val, Feb 28 '11 at 11:29
I've never taken the time to learn JSON, but that sounds like a really good idea.. I'll look into it. Thanks. — Leon Aves, Feb 28 '11 at 11:38

score 1 · Accepted Answer · answered Feb 28 '11 at 11:32

1

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.

answered Feb 28 '11 at 11:32

Scoobler

9,696
4
36
51

This is a great idea, if only I could get it to work. I'm getting the following error from addEvent.php: Call to a member function addEvent() on a non-object in /home/content/53/7316853/html/organiser/home/addEvent.php on line 44 line 44 is: $return = $eventlist->addEvent($u_id, $title, $type, $date, $time, $allday, $location, $dueby, $notes); – Leon Aves Feb 28 '11 at 11:47
Never mind, I was using a session variable to store a serialized version of my event list object, and my session expired :P – Leon Aves Feb 28 '11 at 11:49

Wait for external method to complete before finishing?

1 Answers1

Linked