How to use jquery when on post with success callback

Question

I have an app that needs three different post requests to sync data, I only want one thing to happen when all three are completed but the jquery when is not working. All posts use the success function to process data that the server sent back. Here is my code:

var picUploads = $.post("http://www.epcmapp.co.za/php2/uploadPic.php", {Images: jsonPics}, function (res) {
    alert("Ajax Images return");    
    if(res != "" && res != "53554343455353")
        alert(res);
});

var pdfUploads = $.post("http://www.epcmapp.co.za/php2/uploadPDF.php", {PDFs: jsonPDF}, function (res) {
    alert("Ajax PDF return");        
    if(res != "" && res != "53554343455353")
        alert(res);
});

var sync = $.post("http://www.epcmapp.co.za/php2/sync.php", {data: json}, function (res) {
    alert("Ajax return");    
    var result = JSON.parse(res);    
    dropSyncTables();
    checkDB();
    for (var i in result) {
        populateDB(result[i].toString());
    }
    readDB();    

    loadProjects();
    loadAdditional();
    loadProcessRows();
    loadAttachments();                                
});

$.when(picUploads, pdfUploads, sync).then(function() {
    $("#loadIcn").attr("src", "images/check3.png");
});

The alerts in the posts do not pop up and the code inside the jquery then never runs. How am I supposed to do this then?

Have you ruled out the possibility that ajax calls are failing? — Wex, Feb 06 '16 at 07:35
Put an error handler in your `then` as well and see if one of your deferreds are failing. — zero298, Feb 06 '16 at 07:40
Does the $.when(picUploads, pdfUploads, sync).then(function() get called? — bestprogrammerintheworld, Feb 06 '16 at 07:47

score 1 · Answer 1 · edited May 23 '17 at 12:23

If you need a failure function, you can't use the $.get or $.post functions; you will need to call the $.ajax function directly. You pass an options object that can have "success" and "error" callbacks.

Instead of this:

$.post("/post/url.php", parameters, successFunction);

you would use this:

$.ajax({
    url: "/post/url.php",
    type: "POST",
    data: parameters,
    success: successFunction,
    error: errorFunction
});

There are lots of other options available too. The documentation lists all the options available.
ref This answer

score 0 · Accepted Answer · answered Feb 06 '16 at 08:08

First check your console.log. You would probably find the issue there. But even if you find it you would always want some kind of errorhandling and this is possible with the deffered objects:

$.when(picUploads, pdfUploads, sync)
    .then(function() {
        $("#loadIcn").attr("src", "images/check3.png");
    })
    .fail(function(ts) {
        alert('something failed');
        console.log(ts.responseText); //Check in console what went wrong here
    })

It is also possible to use done() and fail() with $.post (as of jQuery 1.5)

var picUploads = $.post("http://www.epcmapp.co.za/php2/uploadPic.php", {Images: jsonPics}, function (res) {
    alert("Ajax Images return");    
    if(res != "" && res != "53554343455353")
        alert(res);
})
.done(function() {
  alert( "second success" );
})
.fail(function() {
  alert( "error" );
});

I tested the web based app in an ipad and could not see console errors, but after I changed some code around to test it in the browser the console error was just a stupid mistake of trying to use a variable that is not global hehe — Charl Meyers, Feb 06 '16 at 08:39

How to use jquery when on post with success callback

2 Answers2