title: $.jquery ajax returned data (json) displays as 'undefined'
body: <p>Here I have a simple php script which displays some values from a database in json format.</p>
  
  <pre><code>$source = $_GET['source'];
  
  $query = mysql_query("SELECT * FROM images WHERE big_thumb = '" . $source . "'");
  
  $results = array();
  
  while($row = mysql_fetch_array($query))
  {
     $results[] = array(
        'title' =&gt; $row['title'],
        'date' =&gt; $row['upload_date'],
        'time' =&gt; $row['upload_time']
     );
  }
  
  $json = json_encode($results);
  
  echo $json;
  </code></pre>
  
  <p>This displays fine, heres an output example:</p>
  
  <pre><code>[{"title":"Torus","date":"2012-04-04","time":"23:06:14"}]
  </code></pre>
  
  <p>Then when an image is clicked this jquery is called:</p>
  
  <pre><code>var image_src = $(this).attr("alt"); // &lt;= This works fine
  
      $.ajax({
          url: 'inc/get_image_details.php',
          data: {source : image_src},
          dataType: "json",
          success: function(data)
          {
              title = data.title;
              alert(title);
  
              date = data.date;
              alert(date);
  
              time = data.time;
              alert(time);
          }
      });
  </code></pre>
  
  <p>However, the (title, date &amp; time) variables display as 'undefined' in the alert box.
  I've tried multiple ways of implementing the ajax call and the same thing happens every time.
  It is the first time I've tried it alright but I can't figure it.</p>