title: Update php generated content without page refresh
body: <p>I've created a php function (called "category_page" in "category-page.php") which reads data from a file into an associative array and then generates some html to display the information on products.php (the page calling the "category_page" function)</p>
  
  <p>My aim is to allow the user to select from a drop down in order to sort the displayed information without refreshing the page.</p>
  
  <p>I have so far managed to achieve this using <code>document.formname.submit</code> on change of the dropdown and then using <code>$_GET</code> to choose which key in the array to sort by, however, this causes the page to reload.</p>
  
  <p>I have a <em>little</em> knowledge of php, javascript/jquery and have done a fair bit of searching/reading on AJAX to enable an update without refresh/reload, but can't seem to put all the pieces together.</p>
  
  <p>So, in products.php, I have the following javascript/jquery:</p>
  
  <pre><code>function sort_products() {
  queryString = "?sort_list="+$("#sort_list").val();
  $.ajax({   
      type: 'GET',                                   
      url: 'category-page.php',         
      data: 'sort_list='+queryString
  })
  }
  
  $("#sort_list").on("change", function() { sort_products() });
  </code></pre>
  
  <p>and then in category-page.php:</p>
  
  <pre><code>if(isset($_GET['sort_list'])) {
      $sort = $_GET['sort_list'];
  } 
  else {
      // set default sort order
  } 
  </code></pre>
  
  <p>I've verified in Chrome's network panel that a request for <code>category-page.php?sort_list=price</code> is being sent, but the page isn't updating. Any help would be appreciated!</p>