run php sql query through javascript/jquery to hide an entry

Question

On my website, I am trying to remove (hide) an sql entry in a table without refreshing the screen.

Currently, each visible entry is displayed in a div with an id of schedule000 where 000 is the id number of the entry. Each has a delete button:

<div id="btn_delete" class="schedule-delete" onclick="deleteEvent(schedule'.$row['id'].');"></div>

while the function is

function deleteEvent(id) {
    var delurl = "..schedule/index.php?d="+String(id.id.substring(8));
    $.get(delurl);
    $(id).hide('slow');
    return false;
}

I found that get function after searching the internet but I couldn't seem to get it to work. I'm looking for suggestions or a new solution.

Thanks

as a side note: this is part of the page that it is calling

if (isset($_GET['d'])) {
    $id = $_GET['d'];
    $query = "UPDATE schedule SET visible=0 WHERE id='$id'";
    if (!(mysql_query($query) or die(mysql_error()))) {
        echo 'failed to delete';
    }

EDIT: Using Sven's method, I now have:

function del_item() {
    try {
        var item_id = $(this).attr('item_id'); 
        var item = $(this).parent().parent(); //parent().paren... until you reach the element that you want to delete 
        $.ajax({
          type: 'POST',
          url: "../schedule/index.php",
          data: { id: item_id},
          success: function() {
              //fade away and remove it from the dom
              $(element).fadeOut(300, function() { $(this).remove(); });
          },
          error: function() {
              alert('failed to delete');
          }
        });
    } catch (err) {
        alert(err.message);
    }
}

along with the document ready function and

if (isset($_POST['action'])) {
    if ($_POST['action'] == 'd' && isset($_POST['id'])) {
        $id = $_POST['id'];
        $query = "UPDATE schedule SET visible=0 WHERE id='$id'";
        if (!(mysql_query($query) or die(mysql_error()))) {
            echo 'failed to delete';
        }
        die("J! :)");
    }

Answer 1

I would do it like this:

Add the item id to the delete button like this:

<div id="btn_delete" class="schedule-delete" item_id="' . $row['id'] . '"></div>

​The javascript of that page:

function del_item() {
    var item_id = $(this).attr('item_id'); 
    var item = $(this).parent(); //parent().paren... until you reach the element that you want to delete 

    $.ajax({
      type: 'POST',
      url: "url_to_your_remove_script.php",
      data: { id: item_id},
      success: function() {
          //fade away and remove it from the dom
          $(item).fadeOut(300, function() { $(this).remove(); });
      },
      error: your_error_func
    });
}

​$(document).ready(function() {
    $('.schedule-delete').click(del_item);
});​

And for the php delete page (url_to_your_remove_script.php):

<?php
    if(isset($_POST['id'])) {
        //your update query here

        die("J! :)");
    }

    //no id, return error
    header('HTTP/1.1 500 Internal Server Error :(');
?>

You can find more information about $.ajax here: click.

Hope this helps.

PS: Didn't tested the code, but it should work.

Answer 2

You are sending the id to delete as a string. The query becomes "WHERE id='001', but that should be "WHERE id=1". So, parse the id in your javascript as an integer with 'parseInt' before adding it to the delurl variable.

    var id = parseInt(id.id.substring(8));
var delurl = "../schedule/index.php?d="+id;
...etc

remove the '' from the query