Delete button not sending data through Ajax-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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>