jQueryを使用して、ユーザーが「削除」というテーブル内のセルをクリックできるページを作成しました。セルのIDに基づいてデータベースからそのエントリを削除するためのajaxリクエストを送信し、次にCSS を変更してセルを非表示にします。
jQueryコードの作成/調整中にテストページを作成しました。このページは完全に機能します。コードは次のとおりです。
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
(function( $ ){
$.fn.deleterow = function(event) {
if (!confirm('Are you sure you want to delete this student?')) {
return false;
}
var id = event.target.id;
$.ajax({
url: 'delete.php',
type: 'GET',
data: 'id=' + id,
});
$(this).parent().css('display', 'none');
}
})( jQuery );
});
</script>
</head>
<table border="1">
<tr>
<td>Cell 2, Row 2</td><td onclick="$(this).deleterow(event);" id="13376">delete</td>
</tr>
</table>
<html>
現在、コードを実際に使用するページでコードを動作させる作業を行っています。このページには、ユーザーが自分の名前と日付を選択できる短いフォームがあります。このフォームは、結果を div で返す ajax リクエストを送信します。返されるデータは table であり、ここで関数を機能させようとしています。このテーブルには、tablesorter スクリプトが添付されており、関数も添付されています。
テーブルソーターは引き続き正常に動作しますが、「削除」が含まれるセルをクリックしても何も起こりません。問題を確認するために FireBug を使用したところ、「TypeError: $(...).deleterow は関数ではありません」というエラーが表示されました。
ユーザーがフォームを送信し、結果が div に読み込まれるメイン ページのコードを次に示します。
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src='jquery.tablesorter.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$('#myTable').tablesorter();
}
);
</script>";
</head>
<body id="my-students">
<?php include 'header.php'; ?>
<?php include 'nav-tutoring.php'; ?>
<div id="content">
This is where you can view students whom you have assigned to tutoring.
<p>
You may change the way each column is sorted by clicking on the column header.
<p>
<b>Select your name and the date to view students you have assigned for that day.</b>
<form> My form is here; removed to make post shorter </form>
<script>
$('#submit').click(function()
{
$.ajax({
type: 'POST',
url: "mystudents.php",
data: $('#name').serialize(),
success: function(data) {
$("#list").empty();
$('#list').append(data);
}
});
return false;
});
</script>
<div id="list"></div>
フォームの下の div に挿入されるページのコードを次に示します。これは tablesorter が機能するページですが、関数を機能させることができません。また、この div があるメイン ページの head にこれらのスクリプト ライブラリを含めるようにしました。
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='jquery.tablesorter.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$('#myTable').tablesorter();
(function($) {
$.fn.deleterow = function(event) {
if (!confirm('Are you sure you want to delete this student?')) {
return false;
}
var id = event.target.id;
$.ajax({
url: 'delete.php',
type: 'GET',
data: 'id=' + id,
});
$(this).parent().css('display', 'none');
}
})(jQuery);
});
</script>
<table id='myTable' class='tablesorter' border="1">
<thead><tr><th>ID Number</th><th>Last</th><th>First</th><th>Tutoring<br>Assignment</th><th>Assigning Teacher</th><th>Delete?</th></tr></thead><tbody>
<?php
while($row = mysql_fetch_array($data)){
echo "<tr><td>".$row['id']. "</td><td>". $row['last']. "</td><td>". $row['first']."</td><td>". $row['assignment']."</td><td>". $row['assignteacher']."</td><td onclick='$(this).deleterow(event);' id='".$row['pk']."'>Delete</td></tr>";
}
?>
</tbody></table>
発生しているエラーに基づいて多くの検索を行いましたが、問題を解決できないようです。どんな助けでも大歓迎です。