Question

I have tried to pass a value from the id attribute in my php script $row[‘coupon_id’] to the jquery but every time when the link is clicked the alert box will keep popping out the same id e.g in my case the ‘147’ for all the link that being clicked instead of showing out different id which are pulled from my database.

Could anyone lend me a hand on this?

<script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>

<script type="text/javascript"> 
$(document).ready(function() {
    function toggleDivs() {
        var deal_id = $('.buttonClicked').attr('id');
        alert(deal_id);     
}

    $('.buttonClicked').click(function(){
        toggleDivs();
    }); 
});     
</script>

<?php
    include('include/class_dbcon.php');
    $connect = new doConnect();
    $query_pag_data = "SELECT * FROM coupons "
                       . "WHERE coupon_status = 1 "
                       . " ORDER BY coupon_id DESC LIMIT 12";

    $result_pag_data = mysql_query($query_pag_data);
    $msg = "";
    while($row = mysql_fetch_array($result_pag_data)) {
    $msg .= "<span class='buttonClicked' id='"
            . $row['coupon_id']
            . "'><a href='#'>Detail</a></span></br>";
      } 

echo $msg;

?>

<div id='iframecall'></div>

Thanks
Fire

Answer 1

Your event handler’s wrong, change it to:

function toggleDivs() {
    var deal_id = this.id;
    alert(deal_id);     
}

$('.buttonClicked').click(toggleDivs); 

Your original code didn’t consider which element was clicked. The call to $('.buttonClicked').attr('id') got a set of all the links, and returned the id of the first one in the set.