5

My PHP file doing 2 operations: 1. Submits data from form into db table, 2. Sends email.

What I want to do is to show status messages via ajax. For example, "First operation done, please wait for second" and then when second one will be finished show the next message "Second operation done too". Now my ajax looks like that.

How can I modify it?

//add status data to form
        form.data('formstatus', 'submitting');

        if (validate()) {
            //send data to server for validation
            $.ajax({
                url: formUrl,
                type: formMethod,
                dataType: "json",
                data: formData,
                success: function (data) { 
                    $.notifyBar({
                        cls: data.status,
                        html: data.message
                    });
                    form.data('formstatus', 'idle');
                }
            });

        }
halfer
  • 19,824
  • 17
  • 99
  • 186
Tural Ali
  • 22,202
  • 18
  • 80
  • 129

2 Answers2

3

If you've to do two operations that have different execution times, just send two different AJAX queries, and get the responses from them.

Divide your PHP service in two parts. If the second part depends on the first, instead of sending the two requests at the same time, send the second request when the first one returns.

In other words, in your success callback, you're going to notify the user that the first operation has been completed and you proceed to call the second operation, whose success callback will inform that the second operation has been completed.

stivlo
  • 83,644
  • 31
  • 142
  • 199
  • is there anyway to do it from one and only ajax function? Please give an example code for your description – Tural Ali Nov 12 '11 at 13:52
  • yes, but you can't give partial feedback about the two operations, the two operations will be one. Sample code? Like in the example from roselan the `sendMail()` function will be another `$.ajax` call to the other service. – stivlo Nov 12 '11 at 14:02
3

in the success block you can perform another ajax call. That's the simplest. You can do it to in .success(), .ajaxSucces(), .complete(), or .then() function like this: $.ajax(...).success(...);

ideally you would embed the code in a function, by example

$.ajax({
    url: formUrl,
    type: formMethod,
    dataType: "json",
    data: formData,
    success: function (data) {
        notifyResponse(data); 
        form.data('formstatus', 'idle');
        sendMail();
    }
});

function sendMail() {
    $.get(mailUrl, function(data) {   // or $.post(...
        notifyResponse(data);
    });
}

function notifyResponse(data) {
    $.notifyBar({
        cls: data.status,
        html: data.message
    });
}
roselan
  • 3,755
  • 1
  • 20
  • 20
  • what will look like sendMail(func)? – Tural Ali Nov 12 '11 at 13:53
  • exactly like your $.ajax function, with another url. The main point is that you can store informations usefull for sending mail inside the session, or send them with ajax. I prefer the first method, because less data is sent, but the seconds allows you to avoid another layer (the session saving/retrieving part in your server side language). – roselan Nov 12 '11 at 14:22