1

I am currently trying to send certain data via POST method from code in the widget of my plugin to the theme's archive.php page.

The code that contains the data for jquery/ajax is :

<a class="ajax-post" data-year="'.$previous ->year .'" data-month="'.$previous->month.'" data-category="'.$category.'" href="' . filter_date_link($category,$previous->year, $previous->month, $day=false) . '" title="' . esc_attr( sprintf(__('View posts for %1$s %2$s'), $wp_locale->get_month($previous->month), date('Y', mktime(0, 0 , 0, $previous->month, 1, $previous->year)))) . '" id="previous_link">&laquo; ' . $wp_locale->get_month_abbrev($wp_locale->get_month($previous->month)) . '</a></td>';

$calendar_output .= "\n\t\t".'<td colspan="3" id="next"><a class="ajax-post" data-year="'.$next ->year .'" data-month="'.$next->month.'" data-category="'.$category.'"href="' . filter_date_link($category,$next->year, $next->month, $day=false) . '" title="' . esc_attr( sprintf(__('View posts for %1$s %2$s'), $wp_locale->get_month($next->month), date('Y', mktime(0, 0 , 0, $next->month, 1, $next->year))) ) . '" id="next_link">' . $wp_locale->get_month_abbrev($wp_locale->get_month($next->month)) . ' &raquo;</a></td>';

The js code is:

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

     $('#next_link').click(function(e){
         e.preventDefault();

         var $aid =$('#next_link'),
         year =$aid.data('year'),
         month =$aid.data('month'),
         category =$aid.data('category');

     });

    $('#previous_link').click(function(e){
         e.preventDefault();

         var $aid =$('#previous_link'),
         year =$aid.data('year'),
         month =$aid.data('month'),
         category =$aid.data('category');

     });

    console.log('category: ' + category);

    $.ajax({
         cache: false,
         timeout: 8000,
         type: 'POST',
         data: {year : year, month: month, category: category},
         url: '/path/myfile.php',
         success: function(data) {},
         error: function() {}
    });

});

And the page where this code will be used is:

<?php
//Specific class for post listing */
$blog_type = sq_option('blog_type','masonry');
$template_classes = $blog_type . '-listing';
if ($blog_type == 'standard' && sq_option('blog_meta_status', 1) == 1) { $template_classes .= ' with-meta'; }

add_filter('kleo_main_template_classes', create_function('$cls','$cls .=" posts-listing '.$template_classes.'"; return $cls;'));

if(isset($_POST['category'])){

        $category=$_POST['category'];

        $year=$_POST['year'];

        $month=$_POST['month'];

        if(isset($_POST['day'])) {

            $args = array('category_name' => $category , 
            'date_query' => array(             
                                  array(
                                    'year' => $year,                     
                                    'month' => $month,                                           
                                    'day' => $day,
                                    ),                                                               
                                    'column' => 'post_date',                          

                                ),
            );

The $args array will be used to create a new query in the WP Loop.

I am fairly experienced with php yet AJAX and jQuery are a bit new to me.

What am I missing what do I need to add/ take away to make it work.

UPDATES:

  • when using the code above and checking console in the debugger I get: Failed to load resource: the server responded with a status of 404 (Not Found)
  • fixed the above issue by using the solution suggested by the kaiser, however I now get this mistake, on line 29 of my jQuery : Uncaught ReferenceError: category is not defined .
  • Question that for now I failed to find a comprehensible answer to : ' Where do I include the localisation and call to jQuery so that the variables are actually passed in post format?

Here is the code where I use enqueue to attach the script in my plugins file ( not sure if the right place or the right way ):

add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

function theme_enqueue_scripts() {

  // Enqueue and Localize AJAX JavaScript Functions File 
  wp_enqueue_script( 'ajax-categories-js', plugins_url( 'events-calendar-manager/inc/js/js.js' ), array('jquery'));

}
  • In the tag archive of ajax you will find some starting points on how WP runs AJAX. Further more you are using closures attached to the click events. This means that the scope of the variables is inside the functions and does not bleed outside. Your result therefore always will be an undefined variable in your AJAX call. – kaiser Jul 28 '14 at 14:41
0

Your are pointing to a non existing AJAX file.

$.ajax( {
     // ...
     url : '/path/myfile.php',
     // ...
} );

WordPress has a predefined file for that:

admin_url( 'admin-ajax.php' )

When you are running public queries, then you need to add it to

wp_localize_script( 'your-script-handle', 'yourJavaScriptAccessibleObject', array(
    'ajaxurl' => esc_js( admin_url( 'admin-ajax.php' ) ),
) );

If you are just running admin facing calls, then you can even leave that out and simply use

ajaxurl

in your JavaScript file as the variable is prefilled. In case you have a single setup, you can use this hack for Apaches .htaccess file.

Keep in mind that you want to secure your AJAX calls by using a NONCE:

'_ajax_nonce' => wp_create_nonce( 'your-script-handle' ),
  • sry kaiser I still can't give you vote up :( my rep is 2 low – dev3078 Jul 28 '14 at 17:57
  • @dev3078 you can select it as solution by ticking the checkmark below the voting arrows. – kaiser Jul 28 '14 at 18:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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