How to execute function with Ajax promise?

Question

I have two functions, I need to execute an Ajax function (function 1) before function 2 runs. I am a little confused on how to do this, I think it needs to be done is via a promise but I am a little unclear on how to do that, can an example be given?

function 1:

function showDetails(str) {
    return new Promise(function (resolve, reject) {
        if (str == "") {
            document.getElementById("txtdetails").innerHTML = "";
            return;
        } else {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("txtdetails").innerHTML = this.responseText;
                }
            };
            $("#clientrowtestid").val(str);
            xmlhttp.open("GET", "getdetails.php?q=" + str, true);
            xmlhttp.send();
        }
        resolve("done");
    });
}

function 2:

function sendLate(str) {
    showDetails(str).then(function (response) {
        var clientn = $("#txtdetails").find("h2").html();
        var result;
        var r = confirm("Send client (" + str + ") " + clientn + " a late notice?");
        if (r == true) {
            var taxcb = $("#taxcb").is(":checked") ? 'y' : 'n';
            var taxrate = $('#taxrate').val();
            var bcctocb = $("#bcctocb").is(":checked") ? 'y' : 'n';
            var bcctotxt = $('#bcctotxt').val();
            var duedate = $('#duedate').val();
            var issuedate = $('#issuedate').val();
            var additemscb = $("#additemscb").is(":checked") ? 'y' : 'n';
            var additemname = $('#additemname').val();
            var additemprice = $('#additemprice').val();
            var dayslate = $('#dayslate').val();
            var rowid = str;
            $.ajax({
                type: 'POST',
                url: 'sendlate.php',
                data: { taxcb: taxcb, taxrate: taxrate, bcctocb: bcctocb, bcctotxt: bcctotxt, duedate: duedate, issuedate: issuedate, additemscb: additemscb, additemname: additemname, additemprice: additemprice, rowid: rowid, dayslate: dayslate },
                success: function (response) {
                    $('#result').html(response);
                }
            });
        } else {
            result = "Late notice aborted";
        }
        document.getElementById("result").innerHTML = result;
    });
}

As you can see I need to execute function 1 to propagate the field in which function 2 is gathering data from. Are promises the best way of doing this? Can someone give me an example?

Possible duplicate of [How do I chain three asynchronous calls using jQuery promises?](https://stackoverflow.com/questions/16026942/how-do-i-chain-three-asynchronous-calls-using-jquery-promises) — Ryan Shohoney, Oct 25 '18 at 06:07

score 0 · Answer 1 · answered Oct 25 '18 at 06:05

0

Yes Promises are the best way to follow async Javascript

function showDetails(str){
     return new Promise(function(resolve,reject){
           ......//
          document.getElementById("txtdetails").innerHTML = this.responseText;

          resolve("done")

     }
}

and in the function 2

    showDetails(str).then(function(response){
          // rest of the stuff after first function call
    })

Hope this helps you.

answered Oct 25 '18 at 06:05

siddhant sankhe

623
6
12

I tried it, but it is still executing after the call not before, code updated to show. This is what I was trying before I asked the question but I encountered the same problem I am now, it runs after the code. – Oct 25 '18 at 06:37
It should work. You need to update the code accordingly – Gangadhar Jannu Oct 25 '18 at 07:00
@Tony put your `resolve("done");` inside the `onreadystatechange` function , it should work – siddhant sankhe Oct 25 '18 at 07:23
@siddhantsankhe I commented the same thing to OP – Gangadhar Jannu Oct 25 '18 at 07:24

score 0 · Accepted Answer · answered Oct 25 '18 at 07:12

There are multiple issues in code like,

use the resolve method in appropriate code block
document.getElementById("result").innerHTML = "Late notice aborted"; is always executing.

I've changed your code little bit and let me know if it is working.

// function 1
function showDetails(str) {
    return new Promise(function (resolve, reject) {
        if (str == "") {
            document.getElementById("txtdetails").innerHTML = "";
            resolve("");
        } else {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("txtdetails").innerHTML = this.responseText;
                    resolve(this.responseText);
                }
            };
            $("#clientrowtestid").val(str);
            xmlhttp.open("GET", "getdetails.php?q=" + str, true);
            xmlhttp.send();
        }
    });
}
//  function 2
function sendLate(str) {
    // call function 1 and then execute the below
    showDetails(str).then(function (response) {
        var clientn = $("#txtdetails").find("h2").html();
        var r = confirm("Send client (" + str + ") " + clientn + " a late notice?");
        if (r == true) {
            var taxcb = $("#taxcb").is(":checked") ? 'y' : 'n';
            var taxrate = $('#taxrate').val();
            var bcctocb = $("#bcctocb").is(":checked") ? 'y' : 'n';
            var bcctotxt = $('#bcctotxt').val();
            var duedate = $('#duedate').val();
            var issuedate = $('#issuedate').val();
            var additemscb = $("#additemscb").is(":checked") ? 'y' : 'n';
            var additemname = $('#additemname').val();
            var additemprice = $('#additemprice').val();
            var dayslate = $('#dayslate').val();
            var rowid = str;
            $.ajax({
                type: 'POST',
                url: 'sendlate.php',
                data: { taxcb: taxcb, taxrate: taxrate, bcctocb: bcctocb, bcctotxt: bcctotxt, duedate: duedate, issuedate: issuedate, additemscb: additemscb, additemname: additemname, additemprice: additemprice, rowid: rowid, dayslate: dayslate },
                // below `respone` is from which scope?
                // is it from showDetails or from the ajax call in the current scope ?
                success: function (response) {
                    $('#result').html(response);
                }
            });
        } else {
            document.getElementById("result").innerHTML = "Late notice aborted";
        }

    });
}

Read about promises

How to execute function with Ajax promise?

2 Answers2