<head>
<script type="text/javascript">
$(document).ready(function() {
$(".viewLink").click(function()
{
var requisiteId = $('.viewLink').attr('value');
alert(requisiteId);
var dataString = 'id='+ requisiteId;
$.ajax({
type: "POST",
url: "checkRequestExe.php",
data: dataString,
cache: false,
success: function(data)
{
$("#individualRequisite").show();
$("#eachRequisite tr").remove();
if (data != false)
{
$("#eachRequisite").prepend(data);
$("#eachRequisite").hide().fadeIn('slow');
}
}
});
return false;
});
});
</script>
</head>
<body>
<div style="width:752px; height:330px; overflow:auto;">
<table class="record" cellspacing="0" cellpadding="5">
<tr style="background-color:#808080; font-size:12px; color:white; font-weight:bold;">
<td width="400">Title</td>
<td width="100">Requestor</td>
<td width="145">Date Request</td>
<td width="80">Status</td>
</tr>
<?
$count=0;
while ($data = mysql_fetch_array($results))
{
$requisiteId = $data["RequisiteId"];
$title = $data["Title"];
$userId = $data["UserId"];
$date = $data["DateRequest"];
$status = $data["Status"];
$color = ($count%2==0)?'CCCCFF':'E8E8E8';
?>
<tr style="background-color:#<?=$color?>; color:black; font-weight:bold;">
<td><?=$title?></a></td>
<td><?=$userId?></a></td>
<td><?=$date?></td>
<td>
<?
if ($status == 0)
{
$word = "Pending";
}
else
{
$word = "Completed";
}
echo "<a href='#individualRequisite' class='viewLink' value='$requisiteId'>$word</a>";
?>
</td>
</tr>
<?
$count++;
}
?>
</table>
</div>
</body>
How can I uniquely identify the class viewLink so whenever any anchor with that class is clicked, the value of the anchor(“requisiteId”)is passed into jquery and subsequently being passed into another script to handle?
The current problem is that it will continuously being replaced with the latest requisiteId.
Any solution?
The problem is here [var requisiteId = $('.viewLink').attr('value');]
where the requisiteId will always be the same even I clicked the anchor of a different row.
I think instead of the line
you want