trying to send data to a server and receive a response then proceed to display it

I am trying to send data to a server and receive a response then proceed to display it. But I keep getting The following error:
Uncaught TypeError: Cannot use ‘in’ operator to search for ‘2448’ in

My PHP CODE:

    <?php
header('Access-Control-Allow-Origin: *');
include ('connection.php');

    $album = $_POST["album"];

$sql = "
        SELECT 
        album.id as album,
                album.name as album_name,
        track.name as title,
        track.number as track_number,
        track.lyric as lyrics,
        track.details as track_url,
        artist.profile as artist,
        image.url as image

        FROM album 
        INNER JOIN track ON
        album.id = track.album_id
        INNER JOIN image ON
        image.details = album.id
        INNER JOIN artist ON
        artist.id = album.artist_id

        WHERE album.id='".$album."' ORDER BY track.number ASC";

$result = mysql_query($sql) or die ("Query error: " . mysql_error());

$records = array();

    while($row = mysql_fetch_assoc($result)) {
    $records[] = $row;
    }   
    mysql_close($con);

    echo $_POST['jsoncallback'] . '(' . json_encode($records) . ');';
?>

MY AJAX CALL:

    function load_album_tracks(album_id){
        document.getElementById("track_titles").innerHTML = "";
        alert(album_id);
    $.ajax ({
        type:'POST',
        data:  {album:album_id},
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        url: 'http://rediyoapp.com/assets/track_hunter.php',
        success: function(data){
            console.log(data);
        $.each(data, function(i,item){ 
        var track = /** DISPLAY RESULTS **/;    
        document.getElementById("track_titles").innerHTML += track;
        });

    },
     error: function(data){
                alert("Couldn't Load Tracks");  
                }
            });


}


Source: ajax

Leave a Reply