Using Ajax with a Class file

3 comments

1. The errors I’ve spotted in your code:

   One was pointed by @helgatheviking in a comment: the Ajax callback has to be a public method, not private.

   Not sure how are you initializing this class, but wp_enqueue_script&_style (in singular) has to be encapsulated inside a wp_enqueue_scripts hook (WP_DEBUG dumps a notice).

   You can drop the & from $this, that’s PHP 4. Follows a working example:

   class MyTheme
   {
       public function __construct()
       {
           add_action( 'wp_footer', array( $this, 'aux_function' ) );
           add_action( 'wp_enqueue_scripts', array( $this, 'init_plugin' ) );
           add_action( 'wp_ajax_process_reservation', array( $this, 'process_reservation' ) ); 
           add_action( 'wp_ajax_nopriv_process_reservation', array( $this, 'process_reservation' ) );
       }
   
       public function aux_function()
       {
           echo '<h4><a href="#" id="wpse">TEST AJAX</a></h4>';
       }
   
       public function init_plugin()
       {
           wp_enqueue_script( 
               'ajax_script', 
               plugins_url( '/test.js',__FILE__ ), 
               array('jquery'), 
               TRUE 
           );
           wp_localize_script( 
               'ajax_script', 
               'myAjax', 
               array(
                   'url'   => admin_url( 'admin-ajax.php' ),
                   'nonce' => wp_create_nonce( "process_reservation_nonce" ),
               )
           );
       }
   
       public function process_reservation()
       {
           check_ajax_referer( 'process_reservation_nonce', 'nonce' );
   
           if( true )
               wp_send_json_success( 'Ajax here!' );
           else
               wp_send_json_error( array( 'error' => $custom_error ) );
       }
   }
   new MyTheme();
   

   test.js

   jQuery(document).ready(function($) 
   {
       $('#wpse').click(function(e) 
       {
           e.preventDefault();
           var data = {
               action: 'process_reservation',
               nonce: myAjax.nonce
           };
   
           $.post( myAjax.url, data, function( response ) 
           {
               $('#wpse').html( response.data );
           });
       });
   });
   

2. The issue was that in my functions.php I was loading a file (reservations.php) using the after_setup_theme hook

   add_action('after_setup_theme', 'init_cpts');
   

   And then from within the file that was loaded I was requiring my class files with the init hook. I thought this would be ok since init loads after after_setup_theme, it looked like this”

   function load_classes(){
       require_once( PATH_TO_FILE .'/Class.php');
   }
   add_action('init','load_classes');
   

   The problem as mentioned in @brasofilo thread was that any action hook I attempted once in the class file would no longer work, because at this point the init had already been triggered.

   To fix this I simple removed the loaded_classes() as shown above, and instead just required_once within the file itself (which is loaded after_setup_theme). Then @brasofilo answer worked like a charm so make sure to +1 his response.

3. Please check your ajax call

   if you use make sure you put dataType : “json”

   
   $.ajax({
     dataType: "json",
     url: url,
     data: data,
     success: success
   });
   

   or use $.getJSON() function …

   Hope this fix the issue.

Comments are closed.