jQuery Ajax mysql record delete not working

Question

I have a following php file to display SELECT data from database

$connection = mysql_connect(SQL_HOST, SQL_USERNAME, SQL_PASSWORD) or die("Pripojeni se       nezdarilo" . mysql_error());
mysql_select_db('svatepole');
$sql = "SELECT * FROM novinky";
$result = MySQL_Query($sql, $connection);


while($zaznam = MySQL_Fetch_Row($result)):

echo "<form class='newsholder'>";

echo "<input value='$zaznam[1]'>";
echo "<input value='$zaznam[2]'>";
echo "<textarea>$zaznam[3]</textarea>";
echo "<input id='prime' attr='id' value='$zaznam[0]'>";

echo "<div class='buttonsholder'>";
echo "<button id='deletebutton'>Smazat</button>";
echo "<button>Upravit</button>";
echo "</div>";
echo "<div class='clearfix'></div>";

echo "</form>";
endwhile;

and I'm trying to add jquery ajax

$('#deletebutton').on('click', function(){

var idVal = $(this).parent().parent().find('#prime').val();

alert(idVal)
$.post("deleterecord.php",
{id:idVal}

);

});

to find the row's ID and pass it to the DELETE file, so the row gets deleted on click.

$connection = mysql_connect(SQL_HOST, SQL_USERNAME, SQL_PASSWORD) or die("Pripojeni se     nezdarilo" . mysql_error());

$id = $_POST['id'];

if(! $connection )
{
  die('Could not connect: ' . mysql_error());
}
$sql = "DELETE FROM novinky WHERE id = $id" 
   ;

mysql_select_db('svatepole');
$retval = mysql_query( $sql, $connection );
if(! $retval )
{
  die('Could not enter data: ' . mysql_error());
}
echo "Entered data successfully\n";

mysql_close($connection);

However, I can't get this to work. According to Chrome console, there is an event handler attached only to the FIRST row, although the database contains a lot more. Also the added alert only pops out on the click of the very first button.

Any idea, what am I doing wrong and how to pass the data correctly to the DELETE query?

Thanks.

Please don't use `mysql_*` functions anymore, they are deprecated. See [Why shouldn't I use mysql_* functions in PHP?](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php) for details. Instead you should learn about [prepared statements](http://bobby-tables.com/php.html) and use either [PDO](http://php.net/pdo) or [MySQLi](http://php.net/mysqli). If you can't decide which, [this article](http://php.net/manual/en/mysqlinfo.api.choosing.php) will help you. If you pick PDO, [here is a good tutorial](http://wiki.hashphp.org/PDO_Tutorial_for_MySQL_Developers). — Marcel Korpel, Nov 23 '13 at 19:40
BTW, you're vulnerable to [SQL injection](https://www.owasp.org/index.php/SQL_Injection). And always use [`htmlspecialchars`](http://php.net/htmlspecialchars) when outputting to HTML to prevent [XSS](https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29). — Marcel Korpel, Nov 23 '13 at 19:41

score 1 · Accepted Answer · answered Nov 23 '13 at 20:11

1

echo "<button id='deletebutton'>Smazat</button>";

change this to

echo "<button class='deletebutton'>Smazat</button>";

and in jquery use.

$('.deletebutton').on('click', function(){
    var idVal = $(this).parent().parent().find('#prime').val();

    alert(idVal)
    $.post("deleterecord.php",{id:idVal},function(response){ alert(response);});

 });

when u are using id='deletebutton' .jquery checks for first element with id 'deletebutton'. so the event handler is attached to only first element with id="deletebutton"

answered Nov 23 '13 at 20:11

Bhadra

2,121
1
13
19

Great. This seemed to be the problem. Very stupid mistake though. Everything works great now, except that every now and than the delete button does not do anything. Maybe once in 10 attempts. Any idea how to ensure 100% functionality? – Filip Cicvarek Nov 24 '13 at 10:31
So it looks like Firefox can handle it every time while Safari and Chrome only sometimes or never respectively. Could the problem be in jQuery traversing to find the row's id?: var idVal = $(this).parent().parent().find('#prime').val(); – Filip Cicvarek Nov 24 '13 at 10:48

jQuery Ajax mysql record delete not working

1 Answers1