Javascript function not defined when called on input onclick() - web

Question

I keep getting a
ReferenceError: del is not defined.
Before it was working where it would refresh the page, but I set it up so that it would only refresh the div when clicking.
while($row = $result->fetch_assoc()) {
$fileID = $row['fileID'];
echo "<tbody><tr>";
echo "
<td bgcolor='white'>
<input type='checkbox' checked>
</td>
<td bgcolor='white'>
{$row['name']}
</td>
<td bgcolor='white'>
{$row['type']}
</td>
<td bgcolor='white'>
{$row['size']}
</td>
<td bgcolor='white'>
{$row['created']}
</td>
<td>
<input type='button' name='download' value='Download' onclick='window.location="get_file.php?fileID=$fileID";'>
</td>
<td>
<script type='text/javascript'>
function del() {
console.log('Im working!');
var r = confirm('Do you want to remove this file?');
if (r == true) {
$.ajax({url: 'delete.php',
data: {action: '<?php print $fileID;?>'}
type: 'post';
success: function() {
$('#fileTable').load(document.URL + ' #fileTable');
}
});
}
}
</script>
<input type='button' name='delete' value='Delete' onclick='del()'>
</td>

Answer 1

You're duplicating your function for every row, and when you press a button, the function does not know what ID you're after.
Change it to something like:
echo <<<EOHTML
<script type='text/javascript'>
function del(id) {
console.log('Im working!', id);
var r = confirm('Do you want to remove this file?');
if (r == true) {
$.ajax({url: 'delete.php',
data: {action: id.toString()}
type: 'post';
success: function() {
$('#fileTable').load(document.URL + ' #fileTable');
}
});
}
}
</script>
EOHTML;
while($row = $result->fetch_assoc()) {
$fileID = $row['fileID'];
echo <<<EOHTML
<tbody><tr>
<td bgcolor='white'>
<input type='checkbox' checked>
</td>
<td bgcolor='white'>
{$row['name']}
</td>
<td bgcolor='white'>
{$row['type']}
</td>
<td bgcolor='white'>
{$row['size']}
</td>
<td bgcolor='white'>
{$row['created']}
</td>
<td>
<input type='button' name='download' value='Download' onclick='window.location="get_file.php?fileID={$fileID}";'>
</td>
<td>
<input type='button' name='delete' value='Delete' onclick='del({$fileID})'>
</td>
EOHTML;
}