Question

http://kiwilocals.com.au/dev/

Hello, here is the ajax requests on a category in the middle of the page under the banner. Work everywhere, in addition to all versions of IE.
I checked the developer’s tools, a query gives the correct structure, but nothing on the loading icon does not appear after loading. In what may be the reason? Thank you.

function scat(th) {
wait_loading('sub_lst');

if (request = create_request()) {

    request.open("GET", "get_subcat.php?id=" + th + "&site=1", true);
    request.onreadystatechange = function () {
        //alert(request);
        if (this.status == 200) {
            if (this.readyState == 4) {

                var doc3 = document.getElementById('sub_lst');
                //alert(doc3);
                doc3.innerHTML = this.responseText;
                if (!scroll_start) {
                    $('.sub_scroll').jScrollPane({
                        animateScroll: true
                    });
                    $('.hidden_control').show();
                    scroll_start = true;
                }
            }
        }
    }
    request.send(null);
}
}

function create_request() {
var request = false;
try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
    try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e2) {
        try {
            request = new XMLHttpRequest();
        } catch (e3) {
            request = false;
        }
    }
}
if (!request) {
    alert("Невозможно выполнить Ajax запрос.");
    return false;
} else return request;
}

function wait_loading(el_id) {
document.getElementById(el_id).innerHTML = "<center><img style=\"padding-top: 60px;\" width=\"64\" height=\"64\" src=\"images/loading.gif\"></center>";

}

Answer 1

The problem is with your use of ‘this’ in the readstatechange event.

Give this a shot.

if(request = create_request()) {

    request.open("GET", "get_subcat.php?id="+th+"&site=1", true);
    request.onreadystatechange = function() {

        if(request.status == 200) {
            if( request.readyState == 4 ) {
                var doc3 = document.getElementById('sub_lst');
                doc3.innerHTML=request.responseText;

                if(!scroll_start) {
                    $('.sub_scroll').jScrollPane({animateScroll: true});
                    $('.hidden_control').show();
                    scroll_start=true;
                } 
            }
        }
    }
    request.send(null);
}

But one question… you use jQuery throughout your code, except for this. Why not use:

$('#sub_lst').load("get_subcat.php?id="+th+"&site=1", function(){
    if(!scroll_start) {
        $('.sub_scroll').jScrollPane({animateScroll: true});
        $('.hidden_control').show();
        scroll_start=true;
    } 
});