Changing specific html table row by jquery.ajax - php

Question

I have an HTML table generated by PHP querying from MySQL table.
<table>
<tr>
<th>Sl</th>
<th>ID</th>
<th>Article Name</th>
<th>Publish Status</th>
</tr>
<?php
$i = 1;
foreach ($obj->showAllFromTable('pattern') as $pattern) {
extract($pattern);
?>
<tr>
<td><?php echo $i++; ?></td>
<td><?php echo $id; ?></td>
<td><?php echo $pattern_name; ?></td>
<td id="publish_<?php echo $id; ?>" class="status_pattern">
<?php echo $publish; ?>
</td>
</tr>
<?php
}
?>
</table>
I want to change the status of any article by clicking on the 'publish' cell of the corresponding article row. I am trying to use ajax method of jquery for this purpose as shown in the following:
<script type="text/javascript">
$(document).ready(function(){
$('.status_pattern').click(function(){
var thisid = $(this).attr('id');
$.ajax({
url: "status_change_pattern.php",
data: {
id: thisid
},
success: function (response) {
alert(response);
}
});
});
});
</script>
In the "success" block, instead of "alert", I want to create a functionality to change the text of the specific cell which I clicked. The "status_change_pattern.php" has just a text "Hey Hey".
Can anyone help? Please.
Thanks.

Answer 1

You have to use closure to preserve the id.
<script type="text/javascript">
$(document).ready(function(){
$('.status_pattern').click(function(){
var thisid = $(this).attr('id');
$.ajax({
url: "status_change_pattern.php",
data: {
id: thisid
},
success: function (id) {
return function (response) {
$("#" + id).html(response);
}
}(thisid)
});
});
});
</script>

Answer 2

You need to write,
success: function (response) {
$(thisid).html(response);
}
Here in response, you need to get new status.

Answer 3

The solution provided by SajithNair works. Thanks to SajithNair. But it can also be done without using closure. As shown below:
$('.status_pattern').click(function() {
var thisid = $(this).attr('id');
$.ajax({
url : "status_change_pattern.php",
data : {
id : thisid
},
success : function(response) {
$('#' + thisid).html(response);
}
});
});
Thanks