Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to pass $month and $year values via AJAX when previous/next links are clicked, but all I am getting is a -1 where the content should be. My JavaScript functions and AJAX call is located in a custom page template, page-calendar.php and functions.php, see all of the code here. To sum up though, here is the relevant AJAX script:

In functions.php:

/* draw_ajax_calendar($month, $year) function, see link above for that */

// Date variable settings
$month = (int) ($_POST['month'] ? $_POST['month']
                                : ($_GET['month'] ? $_GET['month'] 
                                                  : date('m')));

$year= (int) ($_POST['year'] ? $_POST['year']
                               : ($_GET['year'] ? $_GET['year'] 
                                                  : date('Y')));


// Adding the AJAX hooks
add_action('wp_ajax_nopriv_draw_ajax_calendar', 'draw_ajax_calendar');
add_action('wp_ajax_draw_ajax_calendar', 'draw_ajax_calendar');

Script in page-template.php (also calendar-script.js. see below):

function nextMonthSwap(nextMonthVal,nextYearVal) {
        jQuery("#calendar-container").html("<h1>LOADING</h1>").show();
        var url="<?php echo $_ajax; ?>";
        jQuery.post(url, {month: nextMonthVal, year: nextYearVal}, function(data){
            jQuery("#calendar-container").html(data).show();
        });
        return false;
    }

    // attach the link event handlers
    jQuery(document).ready(function($) {
        $('#prev-link').click(function(){ return prevMonthSwap(<?php echo $prevMonthVal; ?>,<?php echo $prevYearVal; ?>)});
        $('#next-link').click(function(){ return nextMonthSwap(<?php echo $nextMonthVal; ?>,<?php echo $nextYearVal; ?>)});
    });

Finally, the HTML also in page-template.php:

<div id="calendar-container">

    <?php echo draw_ajax_calendar($month,$year); ?>

    <a id="prev-link" href="<?php echo $prev_href; ?>">&larr; Previous</a>
                &nbsp;&nbsp;&nbsp;&nbsp;

    <a id="next-link" href="<?php echo $next_href; ?>">Next &rarr;</a>

</div>

I have referenced this similar post and tried moving my JS from the page-calendar.php to calendar-script.js and including the script with this in functions.php:

function enqueue_calendar_script() {

    // embed the javascript file that makes the AJAX request
    wp_register_script( 'calendar-script.js', get_bloginfo('stylesheet_directory').'/scripts/calendar-script.js');
    wp_enqueue_script( 'calendar-script.js' );

    // declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
    wp_localize_script( 'calendar-script.js', 'wp_ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); 

}
add_action('wp_head', 'enqueue_calendar_scripts');

Enqueueing the calendar-script.js like this reverts to passing the $month and $year values via the URL. The behavior is the same logged in and logged out and according to the page source, the script is being called.

Apologies if this is long winded, trying to be thorough. Any help is greatly appreciated!

share|improve this question
add comment

1 Answer

  1. Echo your output in your AJAX callback function
  2. Exit PHP after you echo your output using exit;
  3. Since you've localized the ajaxurl variable, use it in your AJAX request
  4. Pass action : 'my_special_action' into your AJAX request
  5. Whatever action you use, use the same for both nopriv and normal AJAX hooks

Here's how your AJAX call should look:

function prevMonthSwap(prevMonthVal,prevYearVal) {
    jQuery("#calendar-container").html("<h1>LOADING</h1>").show();
    jQuery.post(ajaxurl, {action: 'my_special_action', month: prevMonthVal, year: prevYearVal}, function(data){
        jQuery("#calendar-container").html(data).show();
    });
    return false;
}

Here's how your callback function should end:

function draw_ajax_calendar(){
    //Your other code here
    echo $calendar;
    exit;
}

Here's what your AJAX hooks should look like:

add_action('wp_ajax_nopriv_my_special_action', 'draw_ajax_calendar');
add_action('wp_ajax_my_special_ajax', 'draw_ajax_calendar');

Not sure what's going on with your date variables. Shouldn't you isolate these to a function?

Hope this helps you out.

share|improve this answer
    
exit appears to exit from all PHP scripts (possibly a PHP nuance I am missing..), removing the rest of the page. Without it, the page get stuck on 'Loading'. Thanks very much for your help! –  notlaura Sep 20 '11 at 21:29
1  
exit or die() should be used in your AJAX callback function. Without it, it won't produce the proper response. See more information at: codex.wordpress.org/AJAX_in_Plugins See my edit above. –  Brian Fegter Sep 20 '11 at 21:41
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.