I am not getting response from ajax request

Question

I am getting no response from ajax request . i am posting a ajax call to processor.php file and the processor.php file is processing the file and sending the processed file back to javascript i am gerring my result in my console log but it is not showing in the html. My javascript code is :

function add_to_cart(item_name,item_price){
  $('.user-info').slideUp('1200');
  $('.cart-status').slideDown('1200');

  var dataString = "item_name=" + item_name + "&item_price=" + item_price + "&page=add_to_cart";
  $.ajax({
    type: "POST",
    url: "php/processor/processor.php",
    data:dataString,
    beforeSend:function(){
      $(".cart-show-product").html('<h3>Your Cart Status</h3><img src="images/loading.gif" align="absmiddle" alt="Loading...." class="center" /><br><p class="center">Please Wait...</p>');
    },
    success: function(response){
      console.log(response);
      $(".cart-show-products").html(response);
    }
  });
}

and my php is :

if(isset($_POST['item_name']) && !empty($_POST['item_name']) && isset($_POST['item_price']) && !empty($_POST['item_price']))
{
  $sql = mysqli_query($conn, 
      'SELECT * FROM 
        products_added 
        where 
        username = "'.mysqli_real_escape_string($conn, $_SERVER['REMOTE_ADDR']).'" 
        and 
        item_added="'.mysqli_real_escape_string($conn, $_POST['item_name']).'"'
);
if(mysqli_num_rows($sql) < 1)
{
  mysqli_query($conn, 
        "INSERT INTO products_added values(
          '', 
          '".mysqli_real_escape_string($conn, $_SERVER['REMOTE_ADDR'])."', 
          '".mysqli_real_escape_string($conn, $_POST['item_name'])."', 
          '".mysqli_real_escape_string($conn, $_POST['item_price'])."', 
          '".mysqli_real_escape_string($conn, '1')."', 
          '".mysqli_real_escape_string($conn, $_POST['item_price'])."'
          '".mysqli_real_escape_string($conn, date("d-m-Y"))."')"
  );
?>
<table class="cart-show-products">
  <thead>
    <tr>
      <td>Sl.No</td>
      <td>Item</td>
      <td>Qty</td>
      <td>Price</td>
      <td>Action</td>
    </tr>
  </thead>
<tbody>
<?php
  $sl_no = 1;
  $sql = mysqli_query(
          $conn, 
          'SELECT sum(amount) as grandtotal
                FROM products_added
                WHERE username = "'.mysqli_real_escape_string($conn, $_SERVER['REMOTE_ADDR']).'"
                ORDER BY id'
  );
  $row = mysqli_fetch_array($sql);
  $grandtotal = strip_tags($row['grandtotal']);
  $sql = mysqli_query(
                $conn, 
                'SELECT 
                id,
                item_added,
                price,
                quantity
                FROM products_added
                WHERE username = "'.mysqli_real_escape_string($conn, $_SERVER['REMOTE_ADDR']).'"
                ORDER BY id'
  );
  $row = mysqli_fetch_array($sql);
  $item_id = strip_tags($row['item_id']);
  $item_name = strip_tags($row['item_added']);
  $item_price = strip_tags($row['price']);
  $quantity = strip_tags($row['price']);
  ?>
    <tr class="items_wrap items_wrap<?php echo $item_id; ?>">
      <td><?php echo $sl_no++; ?></td>
      <td><?php echo $item_name ?></td>
      <td><?php echo $quantity ?></td>
      <td><?php echo $item_price ?></td>
      <td><a href="javascript:void(0);" class="remove-from-cart" onclick="remove_this_item('<?php echo $item_id; ?>')"><i class="fa fa-times"></i></a></td>
    </tr>
  </tbody>
</table>
<?php
}

Answer 1

If you're getting a response in the console, then the issue must be with your HTML. I think part of the problem is you've created a section on the HTML page wiht a class that is the same as the table the AJAX call is bringing into the page. I would suggest changing the HTML element to us an ID instead. Something like

<div id="products-table"></div>

And then change your JavaScript to

function add_to_cart(item_name,item_price){
  $('.user-info').slideUp('1200');
  $('.cart-status').slideDown('1200');

  var dataString = "item_name=" + item_name + "&item_price=" + item_price + "&page=add_to_cart";
  $.ajax({
    type: "POST",
    url: "php/processor/processor.php",
    data:dataString,
    beforeSend:function(){
      $("#products-table").html('<h3>Your Cart Status</h3><img src="images/loading.gif" align="absmiddle" alt="Loading...." class="center" /><br><p class="center">Please Wait...</p>');
    },
    success: function(response){
      console.log(response);
      $("#products-table").html(response);
    }
  });
}

If you stay with the class names you've used, subsequent updates are going to have problems because you'll have 2 elements on the page with the same class. Your script could potentially be confused about which one to change.

Answer 2

If this is your actual code, then you have a syntax error in your PHP file. There are a missing close bracket for:

if(isset($_POST['item_name']) && !empty($_POST['item_name']) && isset($_POST['item_price']) && !empty($_POST['item_price']))

The second problem is, you are not print anything, if this condition has failed.

Note

You do not need to use isset , if you are checking empty . empty will return false, if the variable not set.

You can debug your respons by check NET tab in your web developer tools, or see, what is the response of the AJAX.