Question

My JQuery code is posting, because the success function is firing. The problem is that the PHP $_POST request is not receiving the data. For debugging purposes, I tried to use alert(data) to display what I hoped would be an array and show me if there was a way to parse whatever was being passed. Instead, the alert box just shows “[object Object].” I need to get this data into a form I can use in PHP for the callback function.

Here’s the JQuery:

$(document).ready(function(){
//JQuery for the submission of a new list item.
    $('input.[class$="-arrow"]').click(function(e){
        e.preventDefault(); //put e in function.
        var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';

        if ($(this).hasClass('up-arrow')) {
            var arrowdirection = 'up';
            var entry = $(this).val();
        }
        else if ($(this).hasClass('down-arrow')) {
            var arrowdirection = 'down';
            var entry = $(this).val();
        }

        var data = {
            action: 'cb_lud_arrow_action',
            arrow: arrowdirection,
            entryID: entry
        };

        $.ajax ({
            type: 'POST',
            url: ajaxurl,
            data: data,
            datatype: "text",
            success: function(){
                alert(data);
                alert('Thanks for the vote!'); //for debug. Alert is showing! Still not submitting data to database though.
                $('.line-items-rows').fadeOut('fast').delay(1000).fadeIn('fast');
            }
        });
});
});

And here’s the callback PHP function (which is not updating the database as it should):

function cb_lud_arrow_callback(){       
    //Redefine basic variables
    global $wpdb;
    $cb_lud_prefix = $wpdb->prefix;
    $cb_lud_table = $cb_lud_prefix . 'cb_list_up_down';
//find the values posted to the form
    $cb_lud_arrow_keys = array_keys($_POST['arrow']);
    $cb_lud_arrow_values = array_values($_POST['entryID']);
    $cb_lud_entry_id = (int)$cb_lud_arrow_values[2];


        //set some variables to "up" or "down" depending on form input.
            if (strpos($cb_lud_arrow_keys[2], 'up-ID') > 0) {
                $cb_lud_arrow_direction = "up";
            }
            else if (strpos($cb_lud_arrow_keys[2], 'down-ID') > 0) {
                $cb_lud_arrow_direction = "down";
            }
            else {
                $cb_lud_arrow_direction = "nothing";
            }

        //Create the update query that will record the up and down votes.
            //Up votes
            if ($cb_lud_arrow_direction == "up" && $cb_lud_arrow_direction != "nothing") {
                $wpdb->query('UPDATE '.$cb_lud_table.' SET up_votes=up_votes+1
                    WHERE entry_ID='.$cb_lud_entry_id.'');
            }
            //Down votes
            else if ($cb_lud_arrow_direction == "down" && $cb_lud_arrow_direction != "nothing") {
                $wpdb->query('UPDATE '.$cb_lud_table.' SET down_votes=down_votes+1
                    WHERE entry_ID='.$cb_lud_entry_id.'');
            }   

die(); // this is required to return a proper result
} 

Answer 1

Use Firefox and install Firebug. Then go to the Firebug console and execute the jQuery event. It will show you all the AJAX transactions, what was sent, headers, post, etc, and what was received.

Also, you can really shorten your AJAX call to this:

$.post(ajaxurl, data, function(data){
  $('.line-items-rows').fadeOut('fast').delay(1000).fadeIn('fast');
});