CODEWITHSUNDEEP
javascriptjqueryajax
Charl Meyers
Charl Meyers

Reputation: 115

How to use jquery when on post with success callback

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?

Upvotes: 3

Views: 2084

Answers (2)

bestprogrammerintheworld
bestprogrammerintheworld

Reputation: 5520

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" );
});

Upvotes: 0

Mohammad Javad
Mohammad Javad

Reputation: 584

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

Upvotes: 1

Related Questions