CODEWITHSUNDEEP
phpjquery
kalyan
kalyan

Reputation: 171

JQuery Function not response inside of php while loop

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>

Upvotes: 1

Views: 1100

Answers (4)

ohmygirl
ohmygirl

Reputation: 239

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.

Upvotes: 1

Thomas Nielsen
Thomas Nielsen

Reputation: 36

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.

Upvotes: 1

Guillaume Lhz
Guillaume Lhz

Reputation: 904

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>

Upvotes: 1

MrCode
MrCode

Reputation: 64526

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);
    }
});

Upvotes: 1

Related Questions