Refresh database information on page without refreshing the same page

Question

I have two post methods one get information and the other add information to the same database. Now i want the other post method to get information after adding the new data for it. Here is my first POST method:

$(".selectedMessageEmail").click(function(){
    var id = $(this).attr('id');
    $.post('messageSystem.php', {id, id}, function(result){
        $("#rightBody").html(result);
    });
    show = id;
});

Here is my second POST method:

$("#replyButton").click(function(){
    var getValue = $.trim($("#sendMessageTextArea").val());
    if(getValue != ""){
        $.post('messageReplySystem.php', {replyMessagePost : reply_form.send_message_text_area.value, show : show}, function(resultTwo){
            $("#sendMessageTextArea").val("");
        });
    }
});

In other words how to show the updated database information in only one div without refreshing the whole page and also without duplicating my code.

Answer 1

You could create a function that updates #rightBody and then call it in both instances.

var show;

function updateRightBody(id) {
    $.post('messageSystem.php', {id, id}, function(result){
        $("#rightBody").html(result);
    });
}

$(".selectedMessageEmail").click(function(){
    var id = $(this).attr('id');
    updateRightBody(id);
    show = id;
});

$("#replyButton").click(function(){
    var getValue = $.trim($("#sendMessageTextArea").val());
    if(getValue != ""){
        $.post('messageReplySystem.php', {replyMessagePost : reply_form.send_message_text_area.value, show : show}, function(resultTwo){
            $("#sendMessageTextArea").val("");
        });
        updateRightBody(show);
    }
});