AJAX/jQuery alert() works, .html() or .text() doesn't

I'm newbie to jquery and AJAX and I have a really annoying problem with returning AJAX response simply into a div.

Code

$(document).ready(function() {
    $.ajax({
        method: "GET",
        url: "lists2.php",
        cache: false,
        dataType: "html",
        beforeSend: function() {
            $("#sidebar-content").text("Loading..");
        },
        complete: function() {
            $("#sidebar-content").text("");
        },
        success: function(lists) {
            $("#sidebar-content").text(lists);
        },
        error: function() {
            alert("Something went wrong..");
        }
    });
});

Code fires fine and no error appears, Firebug shows also no errors and if I put for example alert(lists) instead of .text() or .html() it works and alerts the data. But .text() or .html() don't work.

lists2.php is a complex file that analyzes data from SQL db and outputs the content inside a bootstrap sidebar. It worked fine in the old version without AJAX.

What am I doing wrong?

Answers 1

  • Complete() fires after success(), and is clearing your content.

    Complete

    A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request ("success", "notmodified", "nocontent", "error", "timeout", "abort", or "parsererror"). As of jQuery 1.5, the complete setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.

    http://api.jquery.com/jquery.ajax/


Related Articles