Using AJAX to generate front end / viewer end pages

Question

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'));

}

Answer 1

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' ),