Delete button not sending data through Ajax

Question

I have multiple delete buttons on a custom admin page in the backend of my wordpress account which effect a public webpage. In my html file I've got:

<td><button value = "2" onclick = "del(this.value)">Delete Project 2 Names</button></td>

with my script being

<script>        
        var ajaxurl = '<?=admin_url('admin-ajax.php'); ?>';
        function del(val){
                        var CellNum = val;
                        console.log(CellNum);
                        // url of the data that is to be delete
                        
                        $.post(ajaxurl, {
                            
                            action: 'DeleteProject',
                            data: CellNum,
                            
                        }), function (data, status) {};
                      }


</script>

Then in my custom_function.php:

function DeleteProject()
  { 
    global $wpdb;
    
    $DelNum = $_POST['data'];
    echo $DelNum;
    print_r($DelNum);

    $wpdb->query($wpdb->prepare('DELETE `fxq4_projectsignup1` WHERE ProjectNumber = %d', $DelNum));

    die();

  }

I am seeing the CellNum in the console.log but there is no sign that the DeleteProject Function is being entered.

Any clues?

Thank you very much!

Eve

I've got 1.12.4 at the moment – Eve Pitt Jun 19 '22 at 17:06 — Eve Pitt, Jun 19 '22 at 17:06

score 0 · Answer 1 · answered Jun 19 '22 at 22:56

In the end I've rejigged the code, potentially the problem lay in the creating the function inside the 'onclick' attribute. Now I've got:

<html>
<td><button id = button2 value = 2>Delete Project 2 Names</button></td>
</html>

<script>
var ajaxurl = '<?=admin_url("admin-ajax.php"); ?>';
          jQuery(document).ready(function ($) {
$('#button1').click(function(){          
                  
              let CellNum = $("#button1").attr("value");
                  console.log(CellNum);
                  // url of the data that is to be delete
                  
                  $.post(ajaxurl, {
                      
                      action: 'DeleteProject',
                      data: CellNum,
                      
                  }), function (data, status) {
                  };
                });   
        });

          
      </script>

score 0 · Accepted Answer · answered Jun 20 '22 at 07:43

The problem will be that you register the click event for id button1, but it does not exist. You also have a misspelt success callback for the jQuery.post.

Try this code:

<button value="2" id="button1">Delete Project 2 Names</button>

<script>
    var ajaxurl = '<?=admin_url("admin-ajax.php"); ?>';
    
    jQuery(document).ready(function ($) {
        $('#button1').click(function () {
            let CellNum = $(this).attr("value");
    
            // url of the data that is to be delete
            $.post(ajaxurl, {
                action: 'DeleteProject',
                data: CellNum,
            }, function (data, status) {
                // success callback
            });
        });
    });
</script>

Delete button not sending data through Ajax

2 Answers2