Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

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! :)");
    }
share|improve this question
1  
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/.) – DCoder Aug 19 '12 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 Aug 19 '12 at 14:35
1  
You are allowing a user to update your database through the url, make sure they are a valid user with the proper credentials. – Philip Aug 19 '12 at 14:59

2 Answers

up vote 1 down vote accepted

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.

share|improve this answer
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. – AKrush95 Aug 19 '12 at 15:28
Good that you got it working! No problem man. – Sven Aug 19 '12 at 16:26
up vote 0 down vote

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

share|improve this answer
perhaps he has set his id as a string in his database. Would not be the smartest thing, but no way to know... – PeterVR Aug 19 '12 at 15:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.