title: Echo php array result outside while loop - to update html div using jquery
body: <p>Ok so this one has been racking my brain. I have the following page <strong>product_main.php</strong>. This is my main product display page for my application. I am using the following code to display products based on a specific category link on another page. This works fine and displays the products based on their category:</p>
  
  <pre><code>&lt;?php
  
      $q = $_GET['cat'];
  
      include 'db_connect.php';
  
      $result = mysqli_query($con, "SELECT * FROM product_info WHERE ProductCat= '".$q."'");
  
      while($row = mysqli_fetch_array($result)) {
  
          $pro_id = $row['ProductID'];
          $pro_tit = $row['ProductTitle'];
          $pro_des = $row['ProductDesc'];
          $pro_img = $row['ProductImg'];
  
          echo "
  
          &lt;div class='product-display'&gt;
              &lt;img id='prodImage' src='Images/$pro_img.jpg' alt='product photo'&gt;
              &lt;h3&gt;$pro_tit&lt;/h3&gt;
              &lt;h3&gt;$pro_des&lt;/h3&gt;
          &lt;/div&gt;
  
          ";
  
      }
  ?&gt;
  </code></pre>
  
  <p>Now what I want to do is add a filter drop down to select a different category whilst on the same page. I have the following code to grab the output of <strong>function_load_product.php</strong> and update the div element on my page:</p>
  
  <pre><code>&lt;script&gt;
  
  function selectCat(str) {
  if (str == "") {
      document.getElementById("prodArea").innerHTML = "";
      return;
  } else { 
      if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
      } else {
          // code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 &amp;&amp; this.status == 200) {
              document.getElementById("prodArea").innerHTML = this.responseText;
          }
      };
  
      xmlhttp.open("GET","function_load_product.php?cat="+str,true);
      xmlhttp.send();
    }
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This again works fine at 'attempting' to grab the output from <strong>function_load_product.php</strong>.</p>
  
  <p>I thought that using the same code as per the main display page - I would get the same functionality - but I seem to be having trouble getting anything to display. </p>
  
  <p>I think I have narrowed it down to a scope issue - with the Jquery not returning anything as the echo statement is contained within the while loop.</p>
  
  <p>I have attempted the following code as this did work for me on another project to return a table of results from a PHP file into a HTML doc and update the div. Sadly this does not work either! - It just returns an empty div to the main page:</p>
  
  <pre><code>&lt;?php
  
      $q = $_GET['cat'];
  
      include 'db_connect.php';
  
      $result = mysqli_query($con, "SELECT * FROM product_info WHERE ProductCat= '".$q."'");
  
  echo "&lt;div class='product-display'&gt;";
  
  while($row = mysqli_fetch_array($result)) {
  
          echo "&lt;img id='prodImage' src='Images/" . $row['ProductImg'] . ".jpg' alt='product photo'&gt;";
          echo "&lt;h3&gt;" . $row['ProductTitle'] . "&lt;/h3&gt;";
          echo "&lt;h3&gt;" . $row['ProductDesc'] . "&lt;/h3&gt;";
  
      }
  
     echo "&lt;/div&gt;";
  
  ?&gt;
  </code></pre>
  
  <p>Not really sure where to go from here and to be honest I have sneaky suspicion that I am approaching the whole 'product filter' idea in the least efficient way possible! Any pointers are appreciated....</p>
  
  <p>EDIT - Oh and I have also attempted to use global variables and then echo the result outside of the while loop - but it just returned an empty result to the main product page.</p>
  
  <p><strong>CORRECT ANSWER:
  It was something small all along! This was the option code I had:</strong></p>
  
  <pre><code>&lt;div class="product-filter-bar"&gt;
          &lt;div&gt;
              &lt;form class="product-filter-cat" onchange="selectCat(this.value)"&gt;
              &lt;select&gt;
                  &lt;option&gt;Select a category:&lt;/option&gt;
                  &lt;option&gt;Top&lt;/option&gt;
                  &lt;option&gt;Jacket&lt;/option&gt;
                  &lt;option&gt;Dress&lt;/option&gt;
                  &lt;option&gt;Jeans&lt;/option&gt;
                  &lt;option&gt;Skirt&lt;/option&gt;
              &lt;/select&gt;
              &lt;/form&gt;
          &lt;/div&gt;   
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>But this should have been:</strong></p>
  
  <pre><code>&lt;div class="product-filter-bar"&gt;
          &lt;div&gt;
              &lt;form&gt;
              &lt;select class="product-filter-cat" onchange="selectCat(this.value)"&gt;
                  &lt;option&gt;Select a category:&lt;/option&gt;
                  &lt;option&gt;Top&lt;/option&gt;
                  &lt;option&gt;Jacket&lt;/option&gt;
                  &lt;option&gt;Dress&lt;/option&gt;
                  &lt;option&gt;Jeans&lt;/option&gt;
                  &lt;option&gt;Skirt&lt;/option&gt;
              &lt;/select&gt;
              &lt;/form&gt;
          &lt;/div&gt;   
      &lt;/div&gt;
  </code></pre>
  
  <p>**I simply had the function call attached to the "form" tag and should have had it attached to the "select" tag.</p>