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! :)");
    }

Using GET method for actually deleting data is a bad idea, that is what POST is for. Please stop writing new code with the ancient mysql_* functions. They are no longer maintained and community has begun the deprecation process. Instead you should learn about prepared statements and use either PDO or MySQLi. If you care to learn, here is a quite good PDO-related tutorial. (Also: send data to ../schedule/, not ..schedule/.) — user1233508
– user1233508, Commented Aug 19, 2012 at 14:28
Thank you so much for pointing out my '/' error. I understand why you say don't use get for that, but how could I use POST without the page refreshing? (Within the GET I'm going to add a check for who is trying to use the function. Also, I will look into your PDO suggestion — AKrush95
– AKrush95, Commented Aug 19, 2012 at 14:35
You are allowing a user to update your database through the url, make sure they are a valid user with the proper credentials. — Philip
– Philip, Commented Aug 19, 2012 at 14:59

Sven van Zoelen · Accepted Answer · 2012-08-19 16:19:25Z

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.

edited Aug 19, 2012 at 16:19

answered Aug 19, 2012 at 14:46

Sven van Zoelen

7,2595 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AKrush95 Over a year ago

After some editing of your code, I got it to work. Thanks! I wish I could up you..but I don't have 15 rep.

Dirk McQuickly · Accepted Answer · 2012-08-19 14:41:02Z

0

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

answered Aug 19, 2012 at 14:41

Dirk McQuickly

2,1391 gold badge17 silver badges19 bronze badges

1 Comment

Pevara Over a year ago

perhaps he has set his id as a string in his database. Would not be the smartest thing, but no way to know...

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related