Question

I’m trying to make Jquery delete function, here is the code, that I wrote –

$("a.delete").click(function(){         
        var target = $(this).attr("id");            
        var c = confirm('Do you really want to delete this category?');
        if(c==true) {
    $(target+"ul").delay(3000).fadeOut(200);
  }
  else {
    return false;
  }
    }); 

Okay now to problem, when I press, button a with class delete, it correctly, shows up the dialog (and the id is correct), but after I press yes, it will delete it with php, without jquery fadeOut effect.
My php code –

  public function deleteCategory() {
    if(isset($_GET['action']) && $_GET['action'] == 'delete') {
      $id = (int)$_GET['id'];
      $sql = "DELETE FROM `categories` WHERE `id` = '".$id."'";
      mysql_query($sql);
    }
  }

Not sure where is the problem but I think it’s inside $(target+”ul”), since I’m not sure, if it will add the target value and ul together.

In additional, how can I prevent the delete, if I press no? Currently, if I press no, it will still delete the category.

If you need any other information – ask.

Full code –

  public function showCategories() {
    if(isset($_SESSION['logged_in']) && isset($_SESSION['user_level']) && $_SESSION['user_level'] == 'admin') {
      $sql = "SELECT * FROM `categories`";
      $q = mysql_query($sql);
      if(mysql_num_rows($q) > 0) {
        ?>
          <div class="recentorders" style="display: none;" id="categoryBox">
            <h5 class="colr">Categories</h5>
              <div class="account_table" style="width: 688px;">
                  <ul class="headtable" style="width: 680px;">
                      <li class="order">ID</li>
                      <li class="action" style="width: 430px;">Category Name</li>
                      <li class="action nobordr">Options</li>
                  </ul>
        <?php
        while($row = mysql_fetch_array($q)) {
          ?>
            <ul class="contable" style="width: 680px;" id="cat<?php echo $row['id']; ?>ul">
                <li class="order"><?php echo $row['id']; ?></li>
                <li class="action" style="width: 430px;"><?php echo $row['name']; ?></li>
                <li class="action nobordr"><a href="?action=edit&id=<?php echo $row['id']; ?>#" class="first">Edit</a><a class="delete" id="cat<?php echo $row['id']; ?>" href="?action=delete&id=<?php echo $row['id']; ?>#">Delete</a></li>
            </ul>          
          <?php 
        }
        ?>
              </div>
          </div>
        <?php
      }
      else {
        // No categories created, please create one first.
      }
    }
    else {
      header('location: account.php');
    }
  }

  public function deleteCategory() {
    if(isset($_GET['action']) && $_GET['action'] == 'delete') {
      $id = (int)$_GET['id'];
      $sql = "DELETE FROM `categories` WHERE `id` = '".$id."'";
      mysql_query($sql);
    }
  }

Answer 1

If you’re searching by ID you need to prefix your selector with a “#”:

100% working sample on jsFiddle:

http://jsfiddle.net/E7QfY/

Change

 $(target+"ul").delay(3000).fadeOut(200); 

to

 $('#' + target+"ul").delay(3000).fadeOut(200); 

OR

 $(this).closest('ul').delay(3000).fadeOut(200);

I would also modify the code to this:

 $("a.delete").click(function(event){           
      if(confirm('Do you really want to delete this category?') == true){               
           $(this).closest('ul').delay(3000).fadeOut(200);
           window.location.href = $(this).attr('href'); //OR use AJAX and do an event.preventDefault();
      }
      else
           event.preventDefault();
 });