title: Getting "Parameter undefined" in jQuery with AJAX, MySQL and PHP
body: <p>I'm building a shopping site in PHP with mysqli database and I have a <code>"category"</code> and a <code>"brands"</code> sections in that. </p>
  
  <p>What I want is that the user can filter the products in the store by clicking on category &amp; brands section without page refreshing with help of ajax jQuery.</p>
  
  <p>For example on <strong>Category>Electronics</strong> and it will show him the Electronics products on site main page.</p>
  
  <p>Maybe with the code, it will be clearer.</p>
  
  <p><strong>This is the part of the HTML:</strong></p>
  
  <pre><code>        &lt;div class="panel panel-info"&gt;
             &lt;div class="panel-heading"&gt;Products&lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;div id="getProduct"&gt;&lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><strong>This is the PHP code in the "action.php" file:</strong></p>
  
  <pre><code>    &lt;?php
      if(isset($_POST["getSelectedCategory"])){
          $cid=$_POST["categoryID"];
          $sql="SELECT * FROM products WHERE productCat = '$cid' ";
          $run_query=mysqli_query($con, $sql);
          while($row=mysqli_fetch_arry($run_query)){
              $productID = $row["productID"];
              $productCat = $row["productCat"];
              $productBrand = $row["productBrand"];
              $productTitle = $row["productTitle"];
              $productPrice = $row["productPrice"];
              $productIMG = $row["productIMG"];
  
              echo " &lt;div class='col-md-4'&gt;
   &lt;div class='panel panel-info'&gt;
  &lt;div class='panel-heading'&gt;$productTitle&lt;/div&gt;
  &lt;div class='panel-body'&gt;
   &lt;img src='assets/$productIMG' style='width: 160px; height: 250px;'/&gt;
     &lt;/div&gt;
    &lt;div class='panel-heading'&gt;$productPrice.00$
      &lt;button pid='$productID' style='float: right;' class='btn btn-danger btn-xs'&gt;Add To Cart&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
       &lt;/div&gt; ";
  
   }
  
  }
  ?&gt;
  </code></pre>
  
  <p><strong>This is the jQuery code:</strong></p>
  
  <pre><code>   $("body").delegate(".category","click",function (event) {
          event.preventDefault();
          var cid = $(this).attr("categoryID");
  
          /*Used this alert to see if the
           right category number is shown, Here it says undefined*/
          alert(cid);
         $.ajax({
              url: "action.php",
              method: "POST",
              data: {getSelectedCategory: 1, categoryID: cid},
              success: function (data){
                  $("#getProduct").html(data);
              }
  
          })
      });
  </code></pre>
  
  <p>I can't seem to find the problem in my code.</p>