CODEWITHSUNDEEP
javascriptjqueryajax
Aurora
Aurora

Reputation: 725

How do I fire a function immediately after another function is finished?

I have the following code:

<script>
function refreshChat() {
    var id = "'.$convers_id.'";
    var receiver = "'.$system->getFirstName($second_user->full_name).'";
    $.get("'.$system->getDomain().'/ajax/refreshChat.php?id="+id+"&receiver="+receiver, function(data) {
        $(".conversation-content").html(data);
    });
    var scroller = $(".conversation-message-list").getNiceScroll(0);
    $(".conversation-message-list").getNiceScroll(0).doScrollTop($(".conversation-content").height(),-1); 
}
window.setInterval(function(){
    refreshChat();
}, 2000);

function sendMessage() {
    var user2 = "'.$user2.'";
    var message = $("#message");
    if(message.val() != "" && message.val() != " ") {
        $.get("'.$system->getDomain().'/ajax/sendMessage.php?id="+user2+"&msg="+encodeURIComponent(message.val()), function(data) {
        $(".conversation-content").html(data);
            message.val("");
        });
    }
}
$(document).keypress(function(e) {
    if(e.which == 13) {
        sendMessage();
    }
});
</script>

Right now, the refreshChat function calls an ajax script every 2 seconds. When you have entered a message and press enter, it calls a different ajax script. What I would like it to do, is call both functions at the same time. So the script calls the sendMessage function first and refreshes afterwards.

How can I do this? I have already tried changing it to:

<script>
function refreshChat() {
    var id = "'.$convers_id.'";
    var receiver = "'.$system->getFirstName($second_user->full_name).'";
    $.get("'.$system->getDomain().'/ajax/refreshChat.php?id="+id+"&receiver="+receiver, function(data) {
        $(".conversation-content").html(data);
    });
    var scroller = $(".conversation-message-list").getNiceScroll(0);
    $(".conversation-message-list").getNiceScroll(0).doScrollTop($(".conversation-content").height(),-1); 
}

function sendMessage() {
    var user2 = "'.$user2.'";
    var message = $("#message");
    if(message.val() != "" && message.val() != " ") {
        $.get("'.$system->getDomain().'/ajax/sendMessage.php?id="+user2+"&msg="+encodeURIComponent(message.val()), function(data) {
            $(".conversation-content").html(data);
            message.val("");
        });
    }
}
$(document).keypress(function(e) {
    if(e.which == 13) {
        sendMessage();refreshChat();
    }
});
</script>

But this only enters the message first, and it only refreshes on the second keypress (enter). I would like to thank everybody beforehand on helping me out.

Upvotes: 0

Views: 269

Answers (3)

Aurora
Aurora

Reputation: 725

MY WORKING AWNSER

Considering for what i asked, i have marked Wes Foster's awnser as correct. What made it work for me is also applying a promises after the get function. This way, the ajax script get's called twice as needed. I hope it will help someone in the future. (Look at me... travelling through time...). You will find my code underneath:

function refreshChat() {
var id = "'.$convers_id.'";
var receiver = "'.$system->getFirstName($second_user->full_name).'";
$.get("'.$system->getDomain().'/ajax/refreshChat.php?id="+id+"&receiver="+receiver, function(data) {
    $(".conversation-content").html(data);
});
var scroller = $(".conversation-message-list").getNiceScroll(0);
$(".conversation-message-list").getNiceScroll(0).doScrollTop($(".conversation-content").height(),-1); 
}

function sendMessage() {
    var user2 = "'.$user2.'";
    var message = $("#message");
    if(message.val() != "" && message.val() != " ") {
        $.get("'.$system->getDomain().'/ajax/sendMessage.php?id="+user2+"&msg="+encodeURIComponent(message.val()), function(data) {
            $(".conversation-content").html(data);
            message.val("");


            refreshChat();
        }).done(refreshChat);
}
}
$(document).keypress(function(e) {
    if(e.which == 13) {
        sendMessage();


    }
});

Upvotes: 0

rojobo
rojobo

Reputation: 486

Have you tried using callbacks, that may be what you need?

Here is a link for reference.

http://www.impressivewebs.com/callback-functions-javascript/

Upvotes: 0

Wes Foster
Wes Foster

Reputation: 8900

This is actually an illusion. Both functions are being called, but the chat window is refreshing before the chat message is able to save them.

To fix this, you should refresh the chat window only once the new message has been successfully saved:

function refreshChat() {
    // Removed for brevity
}

function sendMessage() {
    var user2 = "'.$user2.'";
    var message = $("#message");
    if(message.val() != "" && message.val() != " ") {
        $.get("'.$system->getDomain().'/ajax/sendMessage.php?id="+user2+"&msg="+encodeURIComponent(message.val()), function(data) {
            $(".conversation-content").html(data);
            message.val("");

            // Now, this will only be called once the ajax is complete
            refreshChat();
        });
    }
}

$(document).keypress(function(e) {
    if(e.which == 13) {
        sendMessage();

        // I removed the refreshChat() call from here and moved it
        // into the $.get() callback above ^^
    }
});

As you can see, I moved your refreshChat() method to now be called from within the jQuery $.get() callback.

Upvotes: 2

Related Questions