How to call two javascript function one after the other on onclick event

Question

I have a hyperlinked image, clicking on image should call a javascript function named downloadReport() as given below,

<a href="#" title="Export" target="self"><img onclick="downloadReport()" align="right" id="exportFile" src='<c:url value="resources/img/excel_download.jpg"/>'></a>

again this function contains two more functions within it.

function downloadReport() {
    upload();
    download();

}
function upload(){
    from = getFrom();
    to =getTo();
    all = getAll();
    approved =getApproved();
    rejected = getRejected();
    pending = getPending();

    _("multiphase").method = "get";
    _("multiphase").action = "/curation/export";
    _("multiphase").submit();


}
function download(){
    _("multiphase").method = "get";
    _("multiphase").action = "/curation/download";
    _("multiphase").submit();

    }

Issue with this code is that, second function download() is getting called prior to upload, how to wait to complete upload function and then call download function? since i am beginner to javascript and doesn't have much information about Ajax or JQuery too.

Download isn't being called before upload, it's being called before upload finishes since upload is async. You'll need to use a callback, or Promises, or something similar. — Carcigenicate, Oct 25 '17 at 11:43
Possible duplicate of [Call a function after previous function is complete](https://stackoverflow.com/questions/5000415/call-a-function-after-previous-function-is-complete) — Bernat, Oct 25 '17 at 11:51

score 0 · Answer 1 · answered Oct 25 '17 at 11:48

0

you can call first method upload() through the ajax post ajax, then on the basis of ajax success response, you can call the second method.

answered Oct 25 '17 at 11:48

kevinSpaceyIsKeyserSöze · Answer 2 · 2017-10-25T11:57:10.500

It should look something like this:

function downloadReport() {
    upload().then(function() {
         download().then(function() {
             // do other stuff when all finished
         });
    });
}

function upload(){
    return $.Deferred(function(def) {
        from = getFrom();
        to = getTo();
        all = getAll();
        approved = getApproved();
        rejected = getRejected();
        pending = getPending();

        _("multiphase").method = "get";
        _("multiphase").action = "/curation/export";
        // _("multiphase").submit(); should have some sort of callback if it's async. Maybe it already returns a promise?!
        _("multiphase").submit(function(){ def.resolve(); });
        // the function(){ def.resolve(); } should represent the submit callback 
    });
}

function download() {
    return $.Deferred(function(def) {
        _("multiphase").method = "get";
        _("multiphase").action = "/curation/download";
        _("multiphase").submit(function() { def.resolve(); });
    });
}

score 0 · Answer 3 · answered Oct 25 '17 at 12:07

0

You should return the value from first function and add condition if first function execute successfully then the other one will work. something like below example

<script type="text/javascript">
function downloadReport() {
    var x = upload();
    if(x){
        download();
    }
}
function upload(){
    alert("Waseem");
    if(response){
        return true;    
    }
    return false;

}

function download(){
    alert("Xax");
}
</script>

answered Oct 25 '17 at 12:07

waseem asgar

664
8
20

that was a suggestion, not working code and if you follow the process (ajax success/fail function) then it will work. @kevinSpaceyIsKeyserSöze – waseem asgar Oct 25 '17 at 12:25
Maybe this should be in your answer then? – kevinSpaceyIsKeyserSöze Oct 25 '17 at 12:29

How to call two javascript function one after the other on onclick event

3 Answers3