I've used jQuery to create a page where users can click on a cell in a table that says, "delete," and it will send an ajax request to delete that entry from a database based on the id of the cell and then it will alter the CSS to hide the cell.I created a test page while I was creating/tweaking the jQuery code. This page works perfectly. Here is the code:\[code\]<html><head><script src="http://stackoverflow.com//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>\[/code\]Now I'm working on getting the code to work in the actual page that it's going to be used in. This page has a short form where users can select their name and a date. This form sends an ajax request that returns the results in a div. The data that is returned is a table , and this is where I'm trying to get my function to work. This table has a tablesorter script attached to it and also my function attached to it.The tablesorter still works fine, but nothing happens when I click the cell with "delete" in it. I used FireBug to look at the issue and it gives me the error, "TypeError: $(...).deleterow is not a function"Here is the code for the main page where the user submits a form and where the result is loaded in a div:\[code\]<html><head><script src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type='text/javascript' src='http://stackoverflow.com/questions/15904984/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>\[/code\]Here is the code for the page that is inserted into the div underneath the form. This is the page where the tablesorter works, but I cannot get my function to work. I've also made sure that I include these script libraries in the head of the main page where this div is.\[code\]<script src='http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script><script type='text/javascript' src='http://stackoverflow.com/questions/15904984/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>\[/code\]I've done many searches based on the error I'm getting, but I just can't seem to fix the problem. Any help would be greatly appreciated.
TypeError: $(…) not a function
- Thread starter amy_3159
- Start date