Question 69562 in Ajax Question posted in
You can find the official documentation here.

Delete button not sending data through Ajax – Jquery ajax

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search