0
私は以下のようなHTMLファイルを持っています。jQuery AjaxがPHP提出のテキストを変更します
<!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 id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent().parent();
$.ajax({
type: "POST",
url: "action.php",
data: dataString,
cache: false,
success: function()
{
if(id % 2)
{
parent.fadeOut('fast', function() {$(this).fadeOut();$(this).fadeIn();});
}
else
{
parent.fadeOut('fast', function() {$(this).fadeOut();$(this).fadeIn();});
}
}
});
return false;
});
});
$(document).ready(function() {
$('.action_button').click(function() {
$(this).text($(this).text().trim() == 'Inactivate' ? 'Activate' : 'Inactivate');
var $col5 = $(this).closest('tr').find('.clickme2');
$col5.text($col5.text().trim() == 'Inactive' ? 'Active' : 'Inactive');
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="DataA1" 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="DataA1" 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="DataA1" 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="DataA1" class="action_button" style="width:80px;height:">
Activate</button>
</td>
</tr>
</table>
</td>
</td>
</body>
</html>
ページには、各行の最後にボタンが付いたテーブルが含まれています。ボタンにはテキストを変更する機能があります（ユーザーがボタンをクリックすると、ボタンのテキストとcol5のスワップがあらかじめ定義されています）。
「アクティブ化」ボタンをクリックすると、ボタンのテキストが「非アクティブ化」に変更され、col5のテキストが「アクティブ」に変更されます。また、 "Inactivate"ボタンをクリックすると、ボタンのテキストが "Activate"に変わり、col5テキストが "Inactive"に変わります。 PHPファイルは、正常に非アクティブ化された場合は "INACTIVATED"、アクティブ化が成功した場合は "ACTIVATED"と表示されます。ドキュメントがPHPの印刷データやコールバックを取得したときに、テキストを変更してぼかしたい。どのようにこれを可能にすることができますか？
ありがとうございました..そのうまくいって:) しかし、 "Inactivateボタン"にはいくつかのバグがあります。テキストはクリックで変更されません。 –
ajaxの結果が厳密に 'INACTIVATED'であることを確認します。それに続くスペースや改行はありません。 – Heikki