CODEWITHSUNDEEP
phpjqueryhtmlmysqlajax
Peter
Peter

Reputation: 328

How to remove HTML row and delete entry from MySQL database using AJAX?

I'm currently using a combination of HTML, PHP, Javascript, and AJAX in order to create an HTML , populate it from a table in a MySQL database, then add a inside of the table in order to both remove the row, and delete the entry from the MySQL database as well. This is what I currently have:

<?php

echo '<table id="tag_table" border=1>
      <tr>
      <th>Tags</th>
      <th>Delete Tag</th>
      </tr>';

$iter = 0;

$rows = $statement->fetchAll(PDO::FETCH_ASSOC);

foreach($rows as $row) {
    echo "<tr id=" . $iter . "\">";
    echo "<td>" . $row['name'] . "</td>";

    echo "<td>";
    echo "<button id=\"delete\">Delete</button>";

    echo "</td> </tr>";    
}

?>

Now what I want to do is add .click() functionality to the delete button, but I'm stuck because I want to delete the row using the following Javascript: 

function deleteTag(btn) {  
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

But I also need to delete the corresponding entry in the MySQL database, requiring PHP (which I can't use inside the javascript file). If anyone has a possible solution or idea of how to accomplish these things, I'd be so grateful to know.

Thanks for any help.

Edit 1. My PHP code:

<?php
  $db = new PDO('my info here bla bla bla');

  $query = "DELETE FROM Tags WHERE name=" . $_POST['name'];

  $db->exec($query);

  $db = null;
?>

Upvotes: 1

Views: 1984

Answers (1)

Ivan
Ivan

Reputation: 40628

You can use the attribute onclick=? in your button tag in combination with your JS function: onclick=removeTag(this).

<?php

echo "
  <table class="tag_table" border=1>
    <tr>
      <th>Tags</th>
      <th>Delete Tag</th>
    </tr>";

$iter = 0;

$rows = $statement->fetchAll(PDO::FETCH_ASSOC);

foreach($rows as $row)
{
  echo "<tr class=" . $iter . ">";
  echo "<td>" . $row['name'] . "</td>";

  echo "<td>";
  echo "<button onclick=\"deleteTag(this)\" class=\"delete\">Delete</button>";

  echo "</td></tr>";
}

?>

JS: 

function deleteTag(btn) {
  // select the row that's concerned
  var row = btn.parentNode.parentNode;

  // select the name of this row
  var name = row.children[0].textContent;

  // remove the row on client side
  row.parentNode.removeChild(row);

  // AJAX call to remove the row server side
  $.ajax({
    url: 'removeRow.php', // this is the target PHP file
    type: "GET",
    data: ({
      name: name
    }),
    success: function(data) {
      // the following will be executed when the request has been completed
      alert('Entry has been deleted successfully!');
    }
  });

}

PHP: the trick is you need to retrieve the variable sent by AJAX with $_REQUEST['...'] not with $_GET['...'] or $_POST['...']

<?php

if($_REQUEST['name']) {

// if the variable has been successfully received
  $name = $_REQUEST['name'];

  $db = new PDO('my info here bla bla bla');

  $query = $db->prepare("DELETE FROM Tags WHERE name = :name");

  $query->execute(array('name' => $name));

  unset($db, $query)

}

Upvotes: 1

Related Questions