Question

I’m trying to have a div refresh after a callback using ajax functions. Basically, I want /includes/view_game/achievements.inc.php to be reloaded in the div #achievements_tab. The callback (I didn’t include it in codes below) works well and triggers the AchievementRefresh function found below (the opacity of the div changes to 0.5, but it remains like this and the refresh is not made).

Those two functions are used for another similar ajax refresh on my site that works well. So I tried to modify the code, but since it’s for a slightly different purpose, maybe I have the wrong approach.

function AjaxPost(url, success_function) {
    xmlHttp = GetXmlHttpObject();
    if (xmlHttp == null) {
        alert("Your browser doesn't support AJAX. You should upgrade it!")
        return
    }
    xmlHttp.onreadystatechange = success_function;
    xmlHttp.open("POST", url, true);
    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}

This AjaxPost function is used in the other function below:

function AchievementRefresh() {
    div('achievements_tab').style.opacity = 0.5;
        div('highscore_pages').innerHTML = '<img src="'+site_url+'/images/loader.gif" />';

    AjaxPost(site_url+"/includes/view_game/achievements.inc.php?", '',
    function () {
        div('achievements_tab').innerHTML = xmlHttp.responseText;
        div('achievements_tab').style.opacity = 1;
    }
    )
}

Answer 1

Use load

$('#achievements_tab').load('/includes/view_game/achievements.inc.php');

See: http://api.jquery.com/load/

Edit
E.g.

function AchievementRefresh() {
    $('#achievements_tab').css('opacity', 0.5);
    $('#highscore_pages').html('<img src="'+site_url+'/images/loader.gif" />');

    $('#achievements_tab').load('/includes/view_game/achievements.inc.php')
        .success(function() {
            $('#achievements_tab').css('opacity', 1);
        });
}