title: AJAX and PHP - Two Different Errors Depending on Use of JSON dataType
body: <p>I'm trying to bring my web skills into the 21st century by learning AJAX and PHP but have hit a wall.  I want to populate a select control "recipe" with options depending on what was chosen from an initial select control "category".  The option items for the secondary control "recipe" will be the parsed results from an AJAX query executed against a PostgreSQL database table.  The function "makeAjaxRequestCategory" shown in the code below is a jQuery AJAX call which includes the property dataType: 'json'.  This is where the problem is.  Best I can figure, the problem comes when I include that property and let the code run, which, instead of returning something with results I can parse, returns as an error... BUT the response object also indicates status 200 (which is "OK"... so why is it being interpreted as an error?).  The responseText property of the response object includes the following:  </p>
  
  <pre><code>responseText:"&lt;br /&gt;↵&lt;b&gt;Parse error&lt;/b&gt;:  syntax error, unexpected '}', expecting ',' or ';' in &lt;b&gt;C:\Bitnami\wampstack-5.5.38-0\apache2\htdocs\ajaxSelectCategory.php&lt;/b&gt; on line &lt;b&gt;8&lt;/b&gt;&lt;br /&gt;↵
  </code></pre>
  
  <p>When I remark-out the dataType property and run it without, I get a different error:</p>
  
  <pre><code>jquery.min.js:4 Uncaught TypeError: Cannot use 'in' operator to search for '179' in &lt;br /&gt;(…)
  </code></pre>
  
  <p>It seems like the proper way to do this is to set dataType to JSON and then parse the JSON object that I get back from PHP but instead I seem to be getting a contradictory response, both an error and a response of 200 at the same time. Note that the initial PHP call to populate the "category" control works fine. Any guidance you can give on getting a successful response that I can parse would be most appreciated!</p>
  
  <p>Here's my development environment:</p>
  
  <ul>
  <li>Local development with "localhost" on a Windows 10 laptop </li>
  <li>Apache web server v. 2.4.23 (Win32)</li>
  <li>PostgreSQL version 9.6.1</li>
  <li>Running it in Chrome and using Chrome's DevTools for troubleshooting</li>
  </ul>
  
  <p>Here's the main file 'recipesystem.php' that I run in the browser:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
  &lt;body&gt;
  
  Version 317.0&lt;br&gt;&lt;br&gt;
  
  &lt;div class = 'selection'&gt;
  &lt;table id='selectiontable'&gt;
    &lt;tr&gt;
      &lt;td&gt;Select Recipe Category&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;select id="category"&gt;
        &lt;option value='Select a category...'&gt;&lt;/option&gt;
        &lt;?php
          $connection = pg_connect("host=localhost port=5432 dbname=recipes user=postgres password=XXXXXXXX");
          $result = pg_query($connection,"SELECT category FROM recipesystem.recipe ORDER BY category;");
          while ($row = pg_fetch_assoc($result)) {
            unset($category);
            $category = $row['category'];
            echo '&lt;option value="'.$category.'"&gt;'.$category.'&lt;/option&gt;';
          };
        ?&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;br&gt;
  
  &lt;select id="recipe"&gt;
  &lt;option value='Select a recipe...'&gt;&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script&gt;
    // This is for the Category selector...
    $('#category').on('change', function(){
      $('#recipe').empty();
      var selected = $(this).val();
      makeAjaxRequestCategory(selected);
      })
    function makeAjaxRequestCategory(opts){
      $.ajax({
        type: 'POST',
        data: { opts: opts },
        dataType: 'json',
        url: 'ajaxSelectCategory.php',
        success: function(res) {
          console.log("Success...")
          console.log(res)
          $.each(res, function(i, value) {
            console.log(value)
           })
          },
        error: function(res){
          console.log("There was an error...")
          console.log(res)
          }
      })
    }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>ajaxSelectCategory.php</p>
  
  <pre><code>&lt;?php
      echo "&lt;script&gt; console.log('Starting PHP script....');&lt;/script&gt;";
      $connection = pg_connect("host=localhost port=5432 dbname=recipes user=postgres password=XXXXXXXX") or die("Connection Error");
      $result = pg_query($connection,"SELECT name, category FROM recipesystem.recipe ORDER BY category;");
      while ($row = pg_fetch_assoc($result)) {
          echo "$('#recipe').append('&lt;option&gt;newvalue&lt;/option&gt;');"
      };
  ?&gt;
  </code></pre>