AJAX "success" not called

Question

All of this worked before, I haven't changed anything and now it doesn't. I have two elements named with id="live_title" and id="live_game". AJAX purpose is to update them.

My jQuery:

var tytul = function getTitle(){
    $.ajax({
        type : 'GET',
        dataType: 'json',
        url : 'ajax/getTitle.php',
        success : function(data) {
            for (var prop in data) {
                $('#live_'+prop).html(data[prop]);
            }
        }
    });
}
setInterval( tytul, 10000 );

AJAX response as seen in Firebug:

{"title":"Some title title...","game":"Name of the game"}

PHP Code sending stuff:

header('Content-Type: application/json');
// creating assoc array here
echo json_encode(array( 'title' => $title, 'game' => $game));

JavaScript console is empty.

When I visit ajax/getTitle.php in my browser, there is no error and displayed is the same thing as normally in Firebug. Response gives correct header (it's "Content-Type: application/json").

I've added

error : function(data) {
    alert(data);
}

To my .ajax() function. It pops [object Object]. for alert(data.title) or alert(data['title']) it's undefined

Answer 1

Try to console your ajax response first and then step forward to further operations

var tytul = function getTitle(){
$.ajax({
    type : 'GET',
    dataType: 'json',
    url : 'ajax/getTitle.php',
    success : function(data) {
       //if successfull           
       console.log(data);

    },
    error:function(data){
    //if error
    console.log(data);
    }
  });
}
setInterval( tytul, 10000 );