I have a table (created by php) whose last colum has input boxes in each of it cells: php:
echo "<table id='booklist'><tr>
<th>Edit</th>
<th class='coursename'><a href='#' class='Course_Name'>Course Name</a></th>
<th class='startdate'><a href='#' class='Start_Date'>Start Date</a></th>
<th class='booktitle'><a href='#' class='Book_Title'>Book Title</></th>
<th class='bookauthor'><a href='#' class='Book_Author'>Book Author</a></th>
<th class='bookisbn'><a href='#' class='Book_Isbn'>Book ISBN</a></th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>
<td><input type='checkbox'></input></td>
<td class='coursename'>" . $row['Course Name'] . "</td>
<td class='startdate'>" . $row['Start Date'] . "</td>
<td class='booktitle'>" . $row['Book Title']. "</td>
<td class='author'>" . $row['Book Author']. "</td>
<td class='isbn'><input class='ISBN_number' type='text' value='' size='13' maxlength='13'></input></td>
</tr>";
}
echo "</table>";
I am trying to make a jquery function that does an ajax call to validate the content and if valid, to put a picture of a checkmark. Here is the jquery:
//validates a manually inputed ISBN number
$(document).ready(function() {
$(".ISBN_number").change(function(){
var isbnNum = $(this).val();
console.log("isbnNum = " . isbnNum);
$.get("validate_isbn.php", {isbn: isbnNum},
function(answer)
{
console.log(answer);
if (answer == true)
{
$(this).after("<img src='pics/green_checkmark.png' class='checkmark'>");
}
else
{
}
});
});
The ajax calls validate_isbn.php and returns a true or false (and I know that file works, I have used it in other situations). But when I put a value in the input box nothing happens. None of my console.logs print out, all I get is the following message: "event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future." I am not sure what this means and what is wrong with my code.
An error has been occurred during the whole JS run. Install FireBug and go to Console tab to see what's happening wrong.
Your code seems to suffer from a few minor errors. Try this:
http://jsfiddle.net/mblase75/YfDPb/
$(document).ready(function() {
$(".ISBN_number").change(function() {
$this = $(this); // store the current 'this'
var isbnNum = $this.val();
console.log("isbnNum = "+isbnNum); // + not . to concatenate strings in JS
$.get("validate_isbn.php", { // make sure this is the correct relative path
isbn: isbnNum
}, function(answer) {
console.log($this);
if (answer==='true') { // answer will be a string of text, not a boolean
$this.after("<img src='pics/green_checkmark.png' class='checkmark'>");
} else {
$this.after("nope"); // to verify that something's happening
}
});// end callback
});//end change
});//end ready