title: Filter by links and order by dropdowns on the same page with ajax and php
body: <p>I'm new to this site, php and ajax.  I've tried searching for the solution but can only find partial of it.  Here's what I'm trying to do, I have a page with 2 links (Make, and Model) and 2 dropdowns (Sort By, and ASC/DESC).   When user click on the Make link, the page with refresh and display all cars by Make (i.e. all Toyotas).  If click on the Models, it will refresh the page showing all cars by Model (i.e. all Camrys).  And if the user also click on the Sort By (i.e. Year), it needs to show either Make/Model and sort by year.  And same goes with the ASC/DESC.  I found some sample codes from this site to do the Sort By part, but don't know how to make the other drop down and links to work.  Here's what i have so far... Please help!!  Thanks!</p>
  
  <pre><code>inventory.php
  
  &lt;script type="text/javascript"&gt;
  function changeContent(strOrderBy, strMake)  
  {  
      alert(strOrderBy + " " + strMake");
      if (strOrderBy=="")
      {
          // if blank, we'll set our innerHTML to be blank.
          document.getElementById("content").innerHTML="";
          return;
      } 
      if (window.XMLHttpRequest)
      { // code for IE7+, Firefox, Chrome, Opera, Safari
          // create a new XML http Request that will go to our generator webpage.
          xmlhttp=new XMLHttpRequest();
      }
      else
      {  // code for IE6, IE5
          // create an activeX object
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      // on state change
      xmlhttp.onreadystatechange=function()
      {
          // if we get a good response from the webpage, display the output
          if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
          {
          document.getElementById("content").innerHTML=xmlhttp.responseText;
          }
      }
      // use our XML HTTP Request object to send a get to our content php. 
      xmlhttp.open("GET","getinventory.php?orderby="+strOrderBy+"&amp;make="+strMake, true);
      xmlhttp.send();
  }
  &lt;/script&gt;
  
  &lt;body&gt;
  
      &lt;div class="colrecNav4"&gt;Sort By:&amp;nbsp;
          &lt;select name="sort" id="sort" onchange="changeContent(this.value, ???)"&gt;
              &lt;option value="year"&gt;Year&lt;/option&gt;
              &lt;option value="trim"&gt;Trim&lt;/option&gt;
              &lt;option value="price"&gt;Price&lt;/option&gt;
              &lt;option value="miles"&gt;Miles&lt;/option&gt;
          &lt;/select&gt;&amp;nbsp;&amp;nbsp;
          &lt;select name="dir" id="dir" onchange="changeContent(this.value)"&gt;
              &lt;option value="asc"&gt;Ascending&lt;/option&gt;
              &lt;option value="desc"&gt;Descending&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;?php
          //reading data from the database
          echo '&lt;div class="makemodel"&gt;&lt;a href="#" id="byMake"&gt;' . $makeFromDb . '&lt;/a&gt;&lt;/div&gt;';
          echo '&lt;div class="makemodel"&gt;&lt;a href="#" id="byModel"&gt;' . $modelFromDb . '&lt;/a&gt;&lt;/div&gt;';
      ?&gt;
      &lt;script&gt;
      $(".makemodela").bind("click", function(event){
              var div_id=$(this).attr("id");
      $.ajax({
          type:'POST',
          url: 'getinventory.php',
          success: function(data){
              changeContent($('#sort').val(), div_id);
          }
      });
      });
      &lt;/script&gt;
  ....
  &lt;/body&gt;
  
  getinventory.php 
  &lt;?php
  ...
      $sql = "SELECT * FROM inventory ORDER BY " . $_REQUEST['orderby'];  
      $result = mysql_query($sql);  
  
      while (...) {
      echo "results...."
      }
  ?&gt;
  </code></pre>
  
  <p>Experts:  So i added another parameter to the changeContent function, updated the code, now I can see the values from the alert message in the changeContent function when I click on the Make or Model links.  But I can only see it the first time.  After that, it doesn't do anything.  Could someone please help?  Thanks!</p>
  
  <p>EDIT:
  So my inventory.php page after the sortby dropdown</p>
  
  <pre><code>&lt;?php
      $make_results = $db-&gt;get_results("SELECT * FROM tblmake ORDER BY Make");
      foreach ($make_results as $make_result) {
          echo '&lt;div class="makemodel"&gt;&lt;a href="#" id="' . $make_result-&gt;Make . '"&gt;' . $make_result-&gt;Make . '&lt;/a&gt;&lt;/div&gt;
      ....
      //similar for model link
  ?&gt;
  &lt;script&gt;
  $(".makemodel a").bind("click", function(event){
          var div_id=$(this).attr("id");
          $.ajax({
              type:'POST',
              url: 'getinventory.php',
              success: function(data){
                  changeContent($('#sort').val(), div_id);
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>and my getinventory.php page
      
  
  <pre><code>$orderby = $_REQUEST['orderby'];        
  $make = $_REQUEST['make'];
  
      $search_results = $db-&gt;get_results("SELECT qry WHERE MAKE=" . $make . " ORDER BY " . $orderby)
      //display results
  ?&gt;
  </code></pre>