Javascript execute function after other function completes

Question

I have a function called save:

function save(callback){
    var ed=tinyMCE.get('body');
    var data=ed.getContent();
    $('#saving').show();
    $('#save_err').hide();
    $.post('/article/ajax/save',{title:$('#title').val(),body:data,token:token,aid:<?php echo $article_id; ?>},function(d){
        $('#saving').hide();
        if(d.suc==1){
            $('#saved').show();
            setTimeout(function(){$('#saved').hide()},2000);
        }else{
            $('#save_err').html(d.err).show();
        }
        return true;
   },"JSON");
};

When the element #preview is clicked, I would like save to execute, and a redirect to happen after the function completes.

$('body').on('click','#preview',function(){
    save(function(){
        window.open('/article/preview/<?php echo $article_id; ?>','_blank');
    });
});

I have used both the accepted answer and the highest rated answer from here, neither are working. The redirect occurs before the function completes. Execute jquery function after another function completes

What I have also tried:

$('body').on('click','#preview',function(){
    $.when(save()).done(function(){
        window.open('/article/preview/<?php echo $article_id; ?>','_blank');
    });
});

What am I doing wrong?

`$.when` does only work on functions that return promises. (and is unnecessary then) — Bergi, Jun 02 '15 at 20:34
What exactly do you consider the "completion" of the `save` function? When the ajax request loaded? when the `#saved` animation is done? — Bergi, Jun 02 '15 at 20:35
You created param callback, but didn't use it. Where does it must be called? — Microshine, Jun 02 '15 at 20:37

score 1 · Accepted Answer · answered Jun 02 '15 at 20:36

In context of the following method

$('body').on('click','#preview',function(){
    save(function(){
        window.open('/article/preview/<?php echo $article_id; ?>','_blank');
    });
});

You need to call the callback method which you are passing as argument.

function save(callback){
    $.post(url,function(d){

        $('#saving').hide();
        if (d.suc == 1) {
            $('#saved').show();
            setTimeout(function () {
                $('#saved').hide();

                //CALL THE METHOD
                callback();  
            }, 2000);
        } else {
            $('#save_err').html(d.err).show();
        }
   },"JSON");
};

score 1 · Answer 2 · answered Jun 02 '15 at 20:38

You never invoke callback function, so it never redirects. You need to call it when timeout is over:

function save(callback) {
    var ed = tinyMCE.get('body');
    var data = ed.getContent();
    $('#saving').show();
    $('#save_err').hide();
    $.post('/article/ajax/save', {
        title: $('#title').val(),
        body: data,
        token: token,
        aid: <? php echo $article_id; ?>
    }, function (d) {
        $('#saving').hide();
        if (d.suc == 1) {
            $('#saved').show();
            setTimeout(function () {
                $('#saved').hide();
                callback();  // <---- call callback
            }, 2000);
        } else {
            $('#save_err').html(d.err).show();
        }
    }, "JSON");
};

Javascript execute function after other function completes

2 Answers2

Linked