Question

我是codeigniter和ajax的新手。我可以将商品添加到购物车并将其删除。但是当我试图更新第一行的数量时，它工作正常。但是，如果我改变其他行的数量，当我离开鼠标它更新价格*量，但它不会采取我们输入的数量，而是采取第一行数量的值。任何人都可以帮助我。

查看文件：

<html>
<head>
    <title>Codeigniter Shopping Cart with Ajax JQuery</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
 <br /><br />

 <div class="col-lg-6 col-md-6">
  <div class="table-responsive">
   <h3 align="center">Codeigniter Shopping Cart with Ajax JQuery</h3><br />
   <?php
   foreach($product as $row)
   {
    echo '
    <div class="col-md-4" style="padding:16px; background-color:#f1f1f1; border:1px solid #ccc; margin-bottom:16px; height:400px" align="center">
     <img src="'.base_url().'images/'.$row->product_image.'" class="img-thumbnail" /><br />
     <h4>'.$row->product_name.'</h4>
     <h3 class="text-danger">$'.$row->product_price.'</h3>
     <input type="text" name="quantity"  class="form-control quantity" id="'.$row->product_id.'" /><br />
     <button type="button" name="add_cart" class="btn btn-success add_cart" data-productname="'.$row->product_name.'" data-price="'.$row->product_price.'" data-productid="'.$row->product_id.'" />Add to Cart</button>
    </div>
    ';
   }
   ?>

  </div>
 </div>
 <div class="col-lg-6 col-md-6">
  <div id="cart_details">
   <h3 align="center">Cart is Empty</h3>
  </div>
 </div>

</div>
</body>
</html>
<script>
$(document).ready(function(){

 $('.add_cart').click(function(){
  var product_id = $(this).data("productid");
  var product_name = $(this).data("productname");
  var product_price = $(this).data("price");
  var quantity = $('#' + product_id).val();
  if(quantity != '' && quantity > 0)
  {
   $.ajax({
    url:"<?php echo base_url(); ?>shopping_cart/add",
    method:"POST",
    data:{product_id:product_id, product_name:product_name, product_price:product_price, quantity:quantity},
    success:function(data)
    {
     alert("Product Added into Cart");
     $('#cart_details').html(data);
     $('#' + product_id).val('');
    }
   });
  }
  else
  {
   alert("Please Enter quantity");
  }
 });

 $('#cart_details').load("<?php echo base_url(); ?>shopping_cart/load");
//  $(document).ready(function(){
//  $("input").blur(function(e){
//   e.preventDefault();

// }).blur(function() {
//      alert("opo");
// });
// });
 $(document).on('mouseleave', '#myqty', function(){




    var rowid = $(this).attr("class");

    var product_price = $(this).attr("title");  

    //var proqty = $('#myqty').val();
     var fieldId = $(this).attr("class");     
    var proqty = $('#myqty').val();
    alert(proqty);

      $.ajax({
         url:"<?php echo base_url();?>shopping_cart/update",
        method:"POST",
        data : {rowid:rowid,proqty:proqty,product_price:product_price},
        //data: "rowid="+rowid+"&proqty="+proqty+"&product_price="+product_price,
       success:function(data)
       {

           $('#cart_details').html(data);
         }

       });



});

 $(document).on('click', '.remove_inventory', function(){
  var row_id = $(this).attr("id");
  if(confirm("Are you sure you want to remove this?"))
  {
   $.ajax({
    url:"<?php echo base_url(); ?>shopping_cart/remove",
    method:"POST",
    data:{row_id:row_id},
    success:function(data)
    {
     alert("Product removed from Cart");
     $('#cart_details').html(data);
    }
   });
  }
  else
  {
   return false;
  }
 });

 $(document).on('click', '#clear_cart', function(){
  if(confirm("Are you sure you want to clear cart?"))
  {
   $.ajax({
    url:"<?php echo base_url(); ?>shopping_cart/clear",
    success:function(data)
    {
     alert("Your cart has been clear...");
     $('#cart_details').html(data);
    }
   });
  }
  else
  {
   return false;
  }
 });

});
</script>

控制器文件：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Shopping_cart extends CI_Controller {

 function index()
 {
  $this->load->model("shopping_cart_model");
  $data["product"] = $this->shopping_cart_model->fetch_all();
  $this->load->view("shopping_cart", $data);
 }

 function add()
 {
  $this->load->library("cart");
  $data = array(
   "id"  => $_POST["product_id"],
   "name"  => $_POST["product_name"],
   "qty"  => $_POST["quantity"],
   "price"  => $_POST["product_price"]
  );
  $this->cart->insert($data); //return rowid 
  echo $this->view();
 }

 function load()
 {
  echo $this->view();
 }

 function remove()
 {
  $this->load->library("cart");

  $row_id = $_POST["row_id"];
  $data = array(
   'rowid'  => $row_id,
   'qty'  => 0
  );
  $this->cart->update($data);
  echo $this->view();
 }

 function clear()
 {
  $this->load->library("cart");
  $this->cart->destroy();
  echo $this->view();
 }


 function view()
 {
  $this->load->library("cart");
  $output = '';
  $output .= '

  <h3>Shopping Cart</h3><br />
  ';
   echo count($this->cart->contents()); 
   $output .= '
  <div class="table-responsive">
   <div align="right">
    <button type="button" id="clear_cart" class="btn btn-warning">Clear Cart</button>
   </div>
   <br />
   <table class="table table-bordered">
    <tr>
     <th width="40%">Name</th>
     <th width="15%">Quantity</th>
     <th width="15%">Price</th>
     <th width="15%">Total</th>
     <th width="15%">Action</th>
    </tr>

  ';
  $count = 0;
  foreach($this->cart->contents() as $items)
  {
   $count++;
   $output .= '
   <tr> 
    <td>'.$items["name"].'</td>

    <td><input id="myqty" title="'.$items["price"].'" class="'.$items['rowid'].'" type="number" min="1" value="'.$items['qty'].'">
    </td>
    <td><span id='.$items["price"].'>'.$items["price"].'</span></td>
    <td>'.$items["subtotal"].'</td>
    <td><button type="button" name="remove" class="btn btn-danger btn-xs remove_inventory" id="'.$items["rowid"].'">Remove</button></td>
   </tr> 

   ';
  }
  $output .= '
   <tr>
    <td colspan="4" align="right">Total</td>
    <td><span>'.$this->cart->total().'</span></td>
   </tr>
  </table>

  </div>
  ';

  if($count == 0)
  {
   $output = '<h3 align="center">Cart is Empty</h3>';
  }
  return $output;
 }
    function update(){
        $this->load->library("cart");
    // Recieve post values,calcute them and update
    $rowid = $_POST['rowid'];
    $price = $_POST['product_price'];

    $qty = $_POST['proqty'];

    $data = array(
        'rowid' => $rowid,
        'price' => $price,          
        'qty' => $qty
        );
    $this->cart->update($data);
  echo $this->view();

    }
}

Answer 1

npm start

这将不起作用“ quantity = document.getElementById（“ qty_set”）。value;“

//使用此var数量= $（this）.val（）;

 <input class="qty_set" name="quantity" data-rowid="your rowid" type="number" value="5">

codeigniter ajax购物车更新数量

1 个答案: