Jquery change text ajax request problem
- by blasteralfred
Hi,
I have an html file as coded below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.style1 {
background-color: #c3d9ff;
font-family:arial,sans-serif;
}
.style2 {
text-align: center;
font-weight: bold;
}
.style3 {
background-color: #FFFFFF;
font-family:arial,sans-serif;
text-align: center;
font-weight: bold;
}
.style4 {
background-color: #FFFFFF;
font-family:arial,sans-serif;
text-align: left;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
background-color: ;
}
.action_button {
font-weight:bold;
float:right;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">$(function() {
$('.action_button').click(function() {
var $button = $(this);
$.ajax({
type: 'POST',
url: 'action.php',
data: 'id='+ $(this).attr('id'),
cache: false,
success: function(result) {
var $row = $button.closest('tr');
var $col = $row.find('.clickme2');
$row.fadeOut('fast', function() {
if (result == 'ACTIVATED') {
$button.text('Activate');
$col.text('Active');
} else if (result == 'INACTIVATED') {
$button.text('Inactivate');
$col.text('Inactive');
}
}).fadeIn();
}
});
return false;
});
});
</script>
</head>
<body>
<table style="width: 90%" align="center" class="style1">
<tr>
<td colspan="7" class="style2">MANAGER</td>
</tr>
<tr>
<td class="style3" style="width: 139px">Col1</td>
<td class="style3" style="width: 139px">Col2</td>
<td class="style3" style="width: 139px">Col3</td>
<td class="style3" style="width: 139px">Col4</td>
<td class="style3" style="width: 139px">Col5</td>
<td class="style3" style="width: 200px">Col6</td>
<td class="style3" style="">Action</td>
</tr>
</table>
<td id="main" class="main">
<td class="update">
<table style="width: 90%" align="center" class="style1">
<tr>
<td class="style4" style="width: 139px">DataA1</td>
<td class="style4" style="width: 139px">DataA2</td>
<td class="style4" style="width: 139px">DataA3</td>
<td class="style4" style="width: 139px">DataA4</td>
<td class="style4 clickme2" style="width: 139px">Inactive</td>
<td class="style4" style="width: 200px">DataA6</td>
<td>
<button href="#" id="DataA1" class="action_button" style="width:80px;height:">
Activate</button>
</td>
</tr>
<tr>
<td class="style4" style="width: 139px">DataB1</td>
<td class="style4" style="width: 139px">DataB2</td>
<td class="style4" style="width: 139px">DataB3</td>
<td class="style4" style="width: 139px">DataB4</td>
<td class="style4 clickme2" style="width: 139px">Inactive</td>
<td class="style4" style="width: 200px">DataB6</td>
<td>
<button href="#" id="DataB1" class="action_button" style="width:80px;height:">
Activate</button>
</td>
</tr>
<tr>
<td class="style4" style="width: 139px">DataC1</td>
<td class="style4" style="width: 139px">DataC2</td>
<td class="style4" style="width: 139px">DataC3</td>
<td class="style4" style="width: 139px">DataC4</td>
<td class="style4 clickme2" style="width: 139px">Active</td>
<td class="style4" style="width: 200px">DataC6</td>
<td>
<button href="#" id="DataC1" class="action_button" style="width:80px;height:">
Inactivate</button>
</td>
</tr>
<tr>
<td class="style4" style="width: 139px">DataD1</td>
<td class="style4" style="width: 139px">DataD2</td>
<td class="style4" style="width: 139px">DataD3</td>
<td class="style4" style="width: 139px">DataD4</td>
<td class="style4 clickme2" style="width: 139px">Active</td>
<td class="style4" style="width: 200px">DataD6</td>
<td>
<button href="#" id="DataD1" class="action_button" style="width:80px;height:">
Inactivate</button>
</td>
</tr>
<tr>
<td class="style4" style="width: 139px">DataE1</td>
<td class="style4" style="width: 139px">DataE2</td>
<td class="style4" style="width: 139px">DataE3</td>
<td class="style4" style="width: 139px">DataE4</td>
<td class="style4 clickme2" style="width: 139px">Inactive</td>
<td class="style4" style="width: 200px">DataE6</td>
<td>
<button href="#" id="DataE1" class="action_button" style="width:80px;height:">
Activate</button>
</td>
</tr>
</table>
</td>
</td>
</body>
</html>
The fage contain a table with 5 rows with a button at the end of the row. On click, the button submits data to a php file and then changes text and blurs according to the response from php file. The blur function and change text function in col5 is working well. But the change text function in button got really buggy. The button text should change accordingly. the text of button "Activate" should change to "Inactivate" and the text of button "Inactivate" should change to "Activate" on click / successful submission.. This is not working..
Below is the php file code
<?php
$id = $_POST[id];
if($id=="DataA1"){
echo "ACTIVATED";
}
if($id=="DataB1"){
echo "ACTIVATED";
}
if($id=="DataE1"){
echo "ACTIVATED";
}
if($id=="DataC1"){
echo "INACTIVATED";
}
if($id=="DataD1"){
echo "INACTIVATED";
}
?>
Thanks in advance.. :)
blasteralfred
