title: AJAX JSON Parser error PHP
body: <p>Here is my code. I keep getting a json parser error. The ajax never goes into done. Help!</p>
  
  <pre><code>&lt;input type="submit" class="button" name="insert" value="load"/&gt;
  &lt;div id="wines"&gt;
      &lt;!-- Javascript will print data in here when we have finished the page --&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>jQuery(document).ready(function() {
      var $ = jQuery;
      var baseUrl = [location.protocol, '//', location.host, location.pathname].join('');
  
      $('.button').click(function(){ // This event fires when a button is clicked
          var button = $(this).val();
          $.ajax({ // ajax call starts
              url: baseUrl, // JQuery loads serverside.php
              data: 'action=' + $(this).val(), // Send value of the clicked button
              dataType: 'json', // Choosing a JSON datatype
          }).done(function(data) { // Variable data contains the data we get from serverside
              console.log("j");      
          }).fail(function(data,error) { 
              console.log(error);  
         })
      });
  });
  </code></pre>
  
  <pre class="lang-php prettyprint-override"><code>&lt;?php
      $action = req('action');
      // Red wine table
      $red = array('Chianti', 'Barolo', 'Pinot Noir');
      $white = array('Chardonnay', 'Cava', 'Chablis');
  
      // Combine red and white tables into one multidimensional table
  
      $winetable = array(
        "red" =&gt; $red,
        "white" =&gt; $white,
      );
  
      // Finally depending on the button value, JSON encode our winetable and print it
      if ($action == "load") {
            print json_encode($red);
            header('Content-Type: application/json');
      }
  ?&gt;
  </code></pre>
  
  <p>UPDATE:
  Error message shows this in the console:</p>
  
  <pre><code>"Initializing System Events for WUH..." common_admin.js:22
  "["Chianti","Barolo","Pinot Noir"]
  &lt;input type="submit" class="button" name="insert" value="load"/&gt;
  &lt;div id="wines"&gt;
    &lt;!-- Javascript will print data in here when we have finished the page --&gt;
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
  jQuery(document).ready(function() {
  
      var $ = jQuery;
      var baseUrl = [location.protocol, '//', location.host, location.pathname].join('');
  
    $('.button').click(function(){ // This event fires when a button is clicked
      var button = $(this).val();
      $.ajax({ // ajax call starts
        url: baseUrl, // JQuery loads serverside.php
        data: 'action=' + $(this).val(), // Send value of the clicked button
        dataType: 'json', // Choosing a JSON datatype
      })
      .done(function(data) { // Variable data contains the data we get from serverside
        console.log("j");      
      })
      .fail(function(data,error) { 
        console.log(data.responseText+error);  
       })
    });
  });
  &lt;/script&gt;parsererror"
  </code></pre>