JQuery Function not response inside of php while loop

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>

It's very difficult to understand what you're asking. Can you maybe take the time to reformat the question and the code block, and try to phrase your problem more clearly. We'd like to help, but at the moment its very difficult. — Mutation Person
– Mutation Person, Commented Oct 14, 2013 at 13:48

MrCode · Accepted Answer · 2013-10-14 13:48:41Z

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

answered Oct 14, 2013 at 13:48

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guillaume Lhz · Accepted Answer · 2013-10-14 13:50:03Z

1

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>

answered Oct 14, 2013 at 13:50

Guillaume Lhz

9045 silver badges16 bronze badges

1 Comment

Rahul Gupta Over a year ago

Yes, this would be correct but do not put the jquery code inside the loop !

Thomas Nielsen · Accepted Answer · 2013-10-14 13:51:21Z

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.

ohmygirl · Accepted Answer · 2013-10-14 13:53:30Z

1

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.

answered Oct 14, 2013 at 13:53

ohmygirl

2391 silver badge5 bronze badges

Collectives™ on Stack Overflow

JQuery Function not response inside of php while loop

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related