JQuery Function not response inside of php while loop - php

Question

here i want to passing the product_id value into addcart.php file through the jQuery Function.here 'Add Cart' button generated dynamically by php while loop. every button set as a invidual product id, there is fine until this..
what's my problem is All Button pass the same value to addcart.php file when i clicked each one...i want to pass the value of individual one(button)..
Please Give me a Solution... addcart.php just contain code like
"echo $_POST['pid']; only"
<?php
include('includes/db-config.php');
$shop_id=$_GET['sid'];
$get_product_q = mysql_query("select product from shops where sid = $shop_id");
$get_product_f = mysql_fetch_array($get_product_q);
$product_id = explode(',', $get_product_f['product']);
$count_product_id = count($product_id);
for($i=0;$i<$count_product_id;$i++){
$get_product_q = mysql_query("select * from products where pid = $i");
$get_product_f = mysql_fetch_array($get_product_q);
$product_id = $get_product_f['pid'];
?>
<script>
$(document).ready(function(){
$('.but').click(function(){
$.ajax({
type: 'POST',
url:"addcart.php",
data : { pid : '<?php echo $product_id?>'},
success:function(result){
$("#div1").html(result);
}});
});
});
</script>
<?php
$product_name = $get_product_f['name'];
$product_description = $get_product_f['description'];
$product_price = $get_product_f['price'];
echo $product_name;
echo '<br>';
echo $product_description;
echo '<br>';
echo $product_price;
echo '<br>';
echo '<input class="but" type="button" value="Add Cart" />';
echo '<br><br>';
}
?>
<div id="div1"></div>

Answer 1

You are repeating the entire Javascript for every product. Move the Javascript out of the loop and set the product ID as a data-productid attribute on the button:
echo '<input class="but" type="button" value="Add Cart" data-productid="' . htmlspecialchars($product_id) . '" />';
Then when you make the ajax call (on click), read the product ID and set it as the POST data:
$.ajax({
type: 'POST',
url:"addcart.php",
data : { pid : $(this).data('productid') },
success:function(result){
$("#div1").html(result);
}
});

Answer 2

Try this :
replace : echo '<input class="but" type="button" value="Add Cart" />'; by this : echo '<input class="but" type="button" rel="'.htmlspecialchars($product_id).'" value="Add Cart" />';
and your script :
<script>
$(document).ready(function(){
$('.but').click(function(){
$.ajax({
type: 'POST',
url:"addcart.php",
data : { pid : $(this).attr('rel'),
success:function(result){
$("#div1").html(result);
}});
});
});
</script>

Answer 3

The problem is that you're binding it to a click on all elements with the class ".but", if you on the other hand gave the button an id like
echo '<input data-pid="'. sha1($product_id) . '" class="but" type="button" value="Add Cart" />';
and then in your jquery function would do the following (outside the loop):
<script>
$(document).ready(function(){
$('.but').click(function(){
$.ajax({
type: 'POST',
url:"addcart.php",
data : $(this).data(),
success:function(result){
$("#div1").html(result);
}
});
});
});
</script>
Then you would get around the problem, as it then listens for the click event on each element, but the data is varying on each element.
I hope this helps.

Answer 4

in you loop ,.but was bind an function each time,so the last bind one works .try to give the .but elements an unique id such as "id=$product_id";
and you can bind the function once (outside the loop).this simply like:
$(document).ready(function(){
$('.but').click(function(){
var data = $(this).attr("id");
$.ajax({
type: 'POST',
url:"addcart.php",
data : { pid : data},
success:function(result){
$("#div1").html(result);
}});
});
});
be lucky.