Hubert Kubasiewicz
Hubert Kubasiewicz

Reputation: 375

JavaScript alert window after php script executed

here is may delete script - klient_usuwanie_script.php - It's working very well. BUT I would like it to present JavaScript alert when a record is deleted. So after the script deletes record it is a window with records shown - klient_usuwanie.php But I would like it to be this window with records but also with an alert saying "record deleted"

<?php
    $sql = "DELETE FROM Klienci WHERE  id= :del_klient";
    $stmt = $pdo->prepare($sql);
    
    $stmt->execute(array(
        'del_klient' => $_GET['id']
    ));
    header('Location:klient_usuwanie.php?msg='.urlencode($msg).'');
?>

So to clear it up. I have a page where I see records to delete - klient_usuwanie.php with a button "delete". When I press delete the script klient_usuwanie_script.php (which is included above) deletes a record. After that it redirects to the page klient_usuwanie.php and I can see other records and I can delete them. BUT after I delete a record I would like an alert window which says "Record deleted" that's all.

When I comment out

header('Location:klient_usuwanie.php?msg='.urlencode($msg).'');

and put

echo  .$stmt->rowCount();

Than it shows me that one record was deleted but I would like it to be in an alert window and ideally alert to be shown on a redirected page.

Upvotes: 0

Views: 226

Answers (4)

TomDK
TomDK

Reputation: 1411

Suggestion for modern approach:

Disclaimer: This answer is more related to the intention than the exact request. Why? Doing a full page reload for this sort of request is an outdated practice.

Nowadays, you'd more likely rely on AJAX calls for this sort of scenario. A delete endpoint would take in a request with the ID and respond the correct HTTP code to indicate if operation was successful.

  • Restful HTTP endpoints can of course be written in PHP to respond with data instead of HTML.
  • Check out Swagger with good endpoint examples: https://editor.swagger.io

In your front-end, you could then implement the necessary JavaScript code to execute the AJAX request and manipulate the DOM as necessary.

  • Though many would use a Framework like Angular or React to standardise this workflow.

User Experience

This approach is far nicer to users as the browser does not need to reload the entire page again. As it only triggers one tiny HTTP request, it's much faster and the scroll location doesn't jump around either.

I've put up an example for the HTML on JS-Fiddle with jQuery to simplify the AJAX call: https://jsfiddle.net/sny9hw73/3/

Example:

<div id="entry-<?=$id;?>" class="banner-message">
  <p>My Entry with real request</p>
  <button onClick="delete(<?=$id;?>);">Delete Entry</button>
</div>

<script>
function delete(id) {
  $.ajax({
  url: '/entry.php,
  data: { 'entryId': id },
  type: 'DELETE',
  success: function(result) {
      $('#entry-' + id).remove();
  },
  fail: alert('Delete Record No: ' + id + ' failed')
}
</script>

Note: Alerts are also not always great. While simple, they stop code execution and don't render well in some scenarios. I.e.: inside webviews or on mobile devices. They also cause fullscreen to exit.

A more professional approach is to have the notification played in the DOM. Angular Material's Snackbar is neater in that sense.

Upvotes: 0

echo '<script type="text/javascript" language="Javascript">alert("Record Deleted Thats all")
    </script>';

Upvotes: 0

Paweł Miłosz
Paweł Miłosz

Reputation: 109

Add to header('Location:klient_usuwanie.php?msg='.urlencode($msg).'');

header('Location:klient_usuwanie.php?msg='.urlencode($msg).'&skasowane=tak');

In the klient_usuwanie.php add someting like this:

if($_GET['skasowane']=="tak"){echo "<script>alert(\"I am an alert box!\");</script>";}

Upvotes: 2

glinda93
glinda93

Reputation: 8459

You can redirect with query string like this:

header('Location:klient_usuwanie.php?msg='.urlencode($msg).'&deleted=true');

And in klient_usuwanie.php, parse the query param and show alert with javascript like the following:

window.onload = function() {
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get("deleted") === "true") {
    alert("Record deleted");
  }
}

Upvotes: 3

Related Questions