もう一度助けが必要です...メインのカテゴリリストを一覧表示しようとしています。各カテゴリのほかに、サブを表示して同じページに表示するための表示ボタンがあります。これが私のコードです:
<table width="100%" align="center" style="margin-top:20px;">
<tr><td align="center"><font size="6">Categories</font></td></tr></table>
<?php
$sql = mysql_query("Select * FROM categories WHERE top_cat_id = 0")
?>
<div id="mainCat">
<form method="POST" id="viewSub" action="">
<table width="100%" align="center" class="categories">
<tr><td colspan="3" style="background-color:#000; color:#FFF; font-size:16px;">Main Categories</td></tr>
<tr><td align="center" width="10%" style="font-size:14px; font-weight:bold;">ID</td>
<td align="center" style="font-size:14px; font-weight:bold;">Categorie Name</td>
<td align="center" width="30%" style="font-size:14px; font-weight:bold;">Subcategories</td></tr>
<?php
while($data = mysql_fetch_array($sql))
{
echo '<tr><input type="hidden" name="cat_id" id="cat_id" value="'.$data['cat_id'].'"><td align="center">'.$data['cat_id'].'</td>';
echo '<td align="center">'.ucwords(strtolower($data['cat_name'])).'</td>';
echo '<td align="center"><input type="submit" name="submit" value="View" /></td></tr>';
}
?>
</table></form>
</div>
<script type="text/javascript">
$(function() {
$("#viewSub").bind('submit',function() {
var cat_id = $('#cat_id').val();
$.post('subcategories.php',{cat_id:cat_id}, function(data){
$("#subCat").html(data);
});
return false;
});
);
</script>
<div id="subCat">
</div>
ご覧のとおり、jQuery関数は最初の[表示]ボタンのみをリッスンしていると思います。ボタンをクリックしても、最初のメインカテゴリのサブのみが返されるためです。それを機能させる方法はありますか?onclickアクションを使用するのが好きですか?私はJavaScriptが苦手なので、これを機能させるには助けが必要です...
ありがとうございました。