Ajax sends data but php doesn't recieve it

Question

I am using ajax to send data to a php function. The end goal is to display rows of data based on $tweetdate. Here is my ajax script:

jQuery('#bootstrapModalFullCalendar').fullCalendar({
    dayClick:  function(date, event, jsEvent, view) {
            var date = date.format();
        jQuery.ajax({
            type: "POST",
            url: ajaxurl,
            data: {
                'action': 'show_scheduled_tweets',
                'tweetdate': date
            },
            beforeSend: function() {
                console.log('before')
            },
            success: function(){
                console.log('success')
            },
            error: function(){
                console.log('error')
            },
        });
    }
});

Here is my php function (add_action is for WordPress usage):

<?php
    add_action('wp_ajax_show_scheduled_tweets', 'show_scheduled_tweets');
    function show_scheduled_tweets () {
        global $wpdb;
        $tweetdate = $_POST["tweetdate"];
        $query = "SELECT * FROM wp_tweettweet WHERE tweetdate='$tweetdate'";
        $results = $wpdb->get_results($query, ARRAY_A);

        foreach($results as $result) {
            $tweet2 =  $result[text];
            $recycleOption = $result[recycle];
            $id = $result[id];

            $currentDateTime = $result[time];
            $time = date('h:i A', strtotime($currentDateTime));


        ?>

            <form class="tweetclass form-inline" action="" method="post">
                <input type="checkbox" name="recycle" <?php if($recycleOption == 1){ echo "checked";} ?>>Recycle Tweet?
                <input class="tweetinput" type="text" name="tweetupdate" value="<?php echo $tweet2; ?>">
                <input type="hidden" name="id" value="<?php echo $id; ?>">
                <input type="text" name="timepicker" class="timepicker" value="<?php echo $time; ?>"/>
                <input class="tweetsubmit" type="submit" value="Save">
                <input class="tweetdelete" type="submit" value="delete">
            </form>
        <?php
        }
    }
    show_scheduled_tweets();
?>

fullCalendar is a jQuery event calendar. When the user clicks on a day (dayClick) that day is saved to date. That date is what I am trying to save to "tweetdate" in my ajax.

In chrome, when I use the network tab on the inspector I can see the ajax result and the date clicked on is set to "tweetdate". That isn't getting picked up by my php function. In my php "tweetdate" is not getting a value assigned to it.

Now, if I go into my php function and set "tweetdate" to an actual date instead of $_POST["tweetdate"]; e.g. 2016-06-15 than everything works perfectly.

I'm not quite sure what is going on.

Answer 1

To make it work, you need one more essential thing:

add_action('wp_enqueue_scripts', 'my_custom_scripts'); 
my_custom_scripts(){
    // Here you register your script for example located in a subfolder `js` of your active theme
    wp_enqueue_script( 'ajax-script', get_template_directory_uri().'/js/script.js', array('jquery'), '1.0', true );
    // Here you are going to make the bridge between php and js
    wp_localize_script( 'ajax-script', 'my_ajax', array( 'ajaxurl' =>   admin_url( 'admin-ajax.php' ) ) );
}

See that 'ajax-script' is in both functions wp_enqueue_script() and wp_localize_script()…

Then you will retrieve 'ajaxurl' and 'my_ajax' in your js combined in url:my_ajax.ajaxurl,:

jQuery(document).ready(function($) {

    jQuery('#bootstrapModalFullCalendar').fullCalendar({
        dayClick:  function(date, event, jsEvent, view) {
                var date = date.format();
            jQuery.ajax({
                type: "POST",
                url: my_ajax.ajaxurl,// Here 'my_ajax' & 'ajaxurl' from wp_localize_script()
                data: {
                    'action': 'show_scheduled_tweets',
                    'tweetdate': date
                },
                beforeSend: function() {
                    console.log('before')
                },
                success: function(){
                    console.log('success')
                },
                error: function(){
                    console.log('error')
                },
            });
        }
    });
});

Now you can get the $_POST["tweetdate"];in your php!!!

---

Update: May be you need to add to your php function (for front end):

add_action('wp_ajax_nopriv_show_scheduled_tweets', 'show_scheduled_tweets');

And to and die();at the end inside your function. so you will have:

add_action('wp_ajax_show_scheduled_tweets', 'show_scheduled_tweets'); // backend
add_action('wp_ajax_nopriv_show_scheduled_tweets', 'show_scheduled_tweets'); // fronted
function show_scheduled_tweets () {
    global $wpdb;
    $tweetdate = $_POST["tweetdate"];
    $query = "SELECT * FROM wp_tweettweet WHERE tweetdate='$tweetdate'";
    $results = $wpdb->get_results($query, ARRAY_A);

    foreach($results as $result) {
        $tweet2 =  $result[text];
        $recycleOption = $result[recycle];
        $id = $result[id];

        $currentDateTime = $result[time];
        $time = date('h:i A', strtotime($currentDateTime));


    ?>

        <form class="tweetclass form-inline" action="" method="post">
            <input type="checkbox" name="recycle" <?php if($recycleOption == 1){ echo "checked";} ?>>Recycle Tweet?
            <input class="tweetinput" type="text" name="tweetupdate" value="<?php echo $tweet2; ?>">
            <input type="hidden" name="id" value="<?php echo $id; ?>">
            <input type="text" name="timepicker" class="timepicker" value="<?php echo $time; ?>"/>
            <input class="tweetsubmit" type="submit" value="Save">
            <input class="tweetdelete" type="submit" value="delete">
        </form>
    <?php
    }
    die(); // very important to get it working
}

---

Update 2: important! — It should work this time!

• I have made a little typing error:
  It's add_action('wp_ajax_nopriv_ … instead of add_action('wp_ajax_no_priv_ …

• These php codes needs to be on the function.php file of your active theme (or child theme).

Then you will call your function somewhere else or you can hook it with some add_action() hooks.

show_scheduled_tweets();

---

References:

• Wordpress passing ajax value to a specific page using Wordpress

• Using AJAX With PHP on Your WordPress Site Without a Plugin

• How to use Ajax with your WordPress Plugin or Theme?