Executing a PHP file from a jQuery / AJAX request

Question

I'm making a chat function where staff members with the appropriate privileges can delete a line that has been posted to the chat room.

I'd like this function to work without refreshing the page, but I can't seem to get the jQuery / AJAX part of it right? Nothing happens at all.

As a jQuery newbie I was hoping that someone could point out the line that I'd have to look at?

a href that needs to be clicked to delete line:

for (var i in json.lines) {
    lines.push("[<a class='delete' href='#' data-lineID='" + json.lines[i].id + "'>x</a>] " + json.lines[i].user + json.lines[i].divide + " " + json.lines[i].message);
}

jQuery:

$('a.delete').on('click', function(event) {
var id = $(this).data('lineID');

    /* Request to .php file */
    var request = $.ajax({
    url: "/communications/chat.php?page=delete",
    type: "POST",
    data: { id : id },
    dataType: "html"
    });

  event.preventDefault();
  return false;

});

Part of the PHP script to execute:

case 'delete' :

if(isset($_POST['id']) && !empty($_POST['id'])) {
    $id = $_POST['id'];

    try {
        $query = $udb->prepare("UPDATE `chat_lines` SET `deleted` = '1' WHERE `id` = ?");
        $query->bindValue(1,$id);
        $query->execute();
    } catch (Exception $e) {
        die($e->getMessage());
    }
}

break;

Any help is appreciated :)

Answer 1

This could be a long shot, but I think that your issue is caused by HTML element not being there when you load the Javascript.
jQuery will attach an event listener (in this case the click one) when the script is loaded.
If the element is added after the script loads, the listener is not attached so it won't trigger your code.

What you have to do is to use event delegation . This means that you have to change your javascript code to this:

$('#mainContainerOfYourChat').on('click', 'a.delete', function(event) {
    var id = $(this).data('lineID');

    /* Request to .php file */
    var request = $.ajax({
            url: "/communications/chat.php?page=delete",
            type: "POST",
            data: { id : id },
            dataType: "html"
        });

  event.preventDefault();
  return false;
});

In this way jQuery will listen to the main container of your page, when a click is fired, if it matches the a.delete selector, it will trigger your code.

Answer 2

If your PHP is deleting the post from the DB your only problem is it stays loaded on the client side until you reload the page. If that is so you'll only need to include a line to remove the comment if the ajax call is successful:

var request = $.ajax({
    url: "/communications/chat.php?page=delete",
    type: "POST",
    data: { id : id },
    dataType: "html",
    success: function(){
      $("a.delete[data-lineID="+id+"]").parent().remove();
     }
    });