Update variable with ajax in wordpress

Question

I am displaying events with a date filter in wordpress. Current date is preselected and so events on the current day display by default. If someone clicks on another date, I call function newDate.

Problem: I pass the new variable with post method successfully, but can't pass it to php. Variable is in the unix timestamp format.

//calendar.js
function newDate(selectedDate){

var sendDate = selectedDate;
    $.ajax({
        type : 'POST',
        url: ajax_date.ajaxurl,
        data: {  
            action: 'submit_date',
            sendDate : sendDate
            }
     });
}

In my functions php I enqueue, localize the scrip and call the functions

//functions.php   
wp_enqueue_script( 'calendar', get_template_directory_uri() . 
 '/resources/js/calendar.js', array( 'jquery' ), '1.0', true);


wp_localize_script('calendar', 'ajax_date', array(
    'ajaxurl' => admin_url('admin-ajax.php'));

add_action( 'wp_ajax_nopriv_submit_date', 'submit_date' );
add_action( 'wp_ajax_submit_date', 'submit_date' );

function submit_date(){

$newdate = $_POST['sendDate'];
wp_die(); 

};

And finally my php file for displaying events. var_dump prints out null and echo also displays no content.

<div id ="events-container">

<?php

  echo $newdate;

  var_dump($newDate);

?>

EDIT - FIXED Thank you, it worked, my code as follows:

//events-page.php
<div id ="events-container">
<?php
 echo get_events($args);
 ?>
</div>

//calendar.js
$.ajax({
        type : 'POST',
        url: ajax_date.ajaxurl,
        data: {  
            action: 'submit_date',
            sendDate1 : date1,
            sendDate2 : date2
        }
    }).done(function(data) {
              console.log( data ); // will log the data you get back from             your PHP function.
              // Now you can display it on the view
              $('#events-container').html(data);
        })

//functions.php
wp_enqueue_script( 'calendar', get_template_directory_uri() . '/resources/js/calendar.js', array( 'jquery' ), '1.0', true);

wp_localize_script('calendar', 'ajax_date', array(
    'ajaxurl' => admin_url('admin-ajax.php')));


//ajax actions

add_action( 'wp_ajax_nopriv_submit_date', 'submit_date' );
add_action( 'wp_ajax_submit_date', 'submit_date' );

function submit_date(){

$newdate1 = $_POST['sendDate1'];
$newdate2 = $_POST['sendDate2'];

$args = array( 
        'post_type' => 'epsa_events', 
        'posts_per_page' => 5,
        'order' => 'ASC',
        'meta_query' => array  (
            array(
            'key' => 'start_time',
            'value' => array($newdate1, $newdate2),
            'compare' => 'BETWEEN'
            )
        ));
    get_events($args);
    wp_die(); 
    };

function get_events($args){
$loop = new WP_Query( $args ); 
while ( $loop->have_posts() ) : $loop->the_post();

  echo '<div class="entry-content">';
      the_title();
      the_content();
      $startTime = DateTime::createFromFormat('Y-m-d H:i',         get_field('start_time'));
  echo date_format($startTime, 'H:i a d.m.');
  echo '</div>';
endwhile;
}

where are you sending your ajax date after getting post in submit_date function ? you have to deal with date after getting the date and echo the content before wp_die() then grab it in ajax success function and show the filtered results. — wui
– wui, Commented Jan 8, 2016 at 17:42

enguerranws · Accepted Answer · 2016-01-08 17:43:12Z

2

You need a callback on your $.ajax() method. Right now, you just send the data to your PHP function, but you don't get it back on front.

//calendar.js
function newDate(selectedDate){

var sendDate = selectedDate;
    $.ajax({
        type : 'POST',
        url: ajax_date.ajaxurl,
        data: {  
            action: 'submit_date',
            sendDate : sendDate
            }
  }).done(function(data) {
      console.log( data ); // will log the data you get back from your PHP function.
      // Now you can display it on the view
      $('#events-container').html(data);

  });
}

More information : http://api.jquery.com/jquery.ajax/

edited Jan 8, 2016 at 17:43

answered Jan 8, 2016 at 17:33

enguerranws

8,2338 gold badges53 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wui · Accepted Answer · 2016-01-08 17:51:35Z

1

You need to process ajax date after getting date in $_POST['sendDate'] in submit_date function either by applying WP_Query or any your custom written function of your plugin and you need to echo processed results before wp_die() then you can get the data in ajax success function and with jquery can insert your results.

A thorough guide you can check here:

https://www.creare.co.uk/blog/simple-wp_query-ajax

answered Jan 8, 2016 at 17:51

wui

4004 silver badges11 bronze badges

Collectives™ on Stack Overflow

Update variable with ajax in wordpress

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related