title: jQuery AJAX call returning an empty response
body: <p>I have a web page with a small form in it.</p>
  
  <p><img src="https://i.stack.imgur.com/ocAPv.png" alt="enter image description here"></p>
  
  <p>HTML code for the page.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="stylesheets/styles.css" /&gt;
  &lt;script type="text/javascript" src="scripts/jquery-1.8.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="scripts/scripts.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body id="body_services"&gt;
  
  &lt;?php
  
  include_once 'DatabaseHandler.php';
  $db = DatabaseHandler::getInstance();
  
  //loading taxi service names for updating combobox
  $queryLoadSids = $db-&gt;prepare("SELECT * FROM taxi_services ORDER BY SID");
  $queryLoadSids-&gt;execute();
  $dropdown = "&lt;select name='serviceID'&gt;";
  while ($row = $queryLoadSids-&gt;fetch(PDO::FETCH_ASSOC))
  {
      $dropdown .= "\r\n&lt;option value='{$row['SID']}'&gt;{$row['Name']}&lt;/option&gt;";
  }
  $dropdown .= "\r\n&lt;/select&gt;";
  
  ?&gt;
  
  &lt;div id="tasks"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a id="add" href="#"&gt;Add a new taxi service&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="update" href="#"&gt;Update a taxi service&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="delete" href="#"&gt;Delete a taxi service&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="view" href="#"&gt;View taxi services&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;form id="cmbServiceIDs" name="sids"&gt;
  &lt;table width="380" border="0"&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;label for="serviceId"&gt;Select the Service ID&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;?php echo $dropdown; ?&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input id="load" type="submit" value="Load" name="btnload" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  
  &lt;form id="frmUpdateService" name="Update" action="" method="post"&gt;
  &lt;table width="300" border="0"&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;label for="sid"&gt;Service ID&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="sid" value="" style="text-align:right" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;label for="name"&gt;Name&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="name" value="" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;label for="cost"&gt;Cost&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="cost" value="" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;label for="active"&gt;Active&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox" name="active" value="" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="reset" value="Cancel" /&gt; &lt;input type="submit" value="Update" name="update" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When the Load button is clicked, it should run a query against a DB, return the results to populate the textboxes in the form. I'm using jQuery AJAX for this task.</p>
  
  <pre><code>$(function()
  {
      $("#frmUpdateService").hide();
      $("#cmbServiceIDs").hide();
  
      $("#update").click(function()
      {
          $("#cmbServiceIDs").slideDown("slow");
          $("#frmUpdateService").hide();
      });
  
      $("#cmbServiceIDs").submit(function(e)
      {
          $("#frmUpdateService").fadeIn("slow");
          e.preventDefault();
  
          $.ajax(
          {
              type        : 'GET',
              url         : 'request.php',
              data        : {'serviceID' : $("#serviceID").val()},
              dataType    : 'json',
              success     : function(response)
              {
                  var loadedSID = response[0];
                  var loadedName = response[1];
                  var loadedCost = response[2];
                  var loadedActive = response[3];
  
                  $("#sid").append(loadedSID);
                  $("#name").append(loadedName);
                  $("#cost").append(loadedCost);
                  $("#active").append(loadedActive);
              }
          });
      });
  });
  </code></pre>
  
  <p>This is the <em>request.php</em> page.</p>
  
  <pre><code>&lt;?php
  
  include_once 'DatabaseHandler.php';
  $db = DatabaseHandler::getInstance();
  
  $param = $_GET['serviceID'];
  
  $queryLoadToUpdate = $db-&gt;prepare("SELECT * FROM taxi_services WHERE SID = :serviceID");
  $queryLoadToUpdate-&gt;bindParam(':serviceID', $param, PDO::PARAM_STR);
  $queryLoadToUpdate-&gt;execute();
  $results = $queryLoadToUpdate-&gt;fetchAll(PDO::FETCH_ASSOC);
  
  echo json_encode($results);
  
  ?&gt;
  </code></pre>
  
  <p>But when I run the page and click on the Load button, nothing appears in the textboxes. I looked into the response using Firebug and it shows an empty response. I checked the SQL query as well. No errors there either.</p>
  
  <p>I have no idea what I should check or do next. Can anyone give any suggestions as to why its not working properly here?</p>
  
  <p>Thank you. </p>