WordPress WP_ajax not working

3 comments

1. You should read http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/

   First separate the javascript file and use wp_enqueue_script to add it.
   Then use wp_localize_script to pass the nonce and ajaxurl to your javascript file.

   In function.php

   wp_localize_script( 'your-js-file', 'MyAjax', array(
       // URL to wp-admin/admin-ajax.php to process the request
       'ajaxurl'          => admin_url( 'admin-ajax.php' ),
   
       // generate a nonce with a unique ID "myajax-post-comment-nonce"
       // so that you can check it later when an AJAX request is sent
       'postCommentNonce' => wp_create_nonce( 'myajax-post-comment-nonce' ),
       )
   );
   
   
   // if both logged in and not logged in users can send this AJAX request,
   // add both of these actions, otherwise add only the appropriate one
   add_action( 'wp_ajax_AWNT_save', 'AWNT_save_callback' );
   add_action('wp_ajax_nopriv_AWNT_save', 'AWNT_save_callback' );
   
   function AWNT_save_callback() {
   
   //CHeck  nonce FIRST HERE
   
   $nonce = $_POST['postCommentNonce'];
   
   // check to see if the submitted nonce matches with the
   // generated nonce we created earlier
   if ( ! wp_verify_nonce( $nonce, 'myajax-post-comment-nonce' ) )
       die ( 'Busted!')
   
   update_option('current_form', 'foo');
   echo get_option('current_form');
   
   die();
   }
   

   In your javascript file

    jQuery(document).ready(function($) {
   $('#save').click(function() { 
           var data = {
               action: 'AWNT_save',
               postCommentNonce : MyAjax.postCommentNonce,
               form_name : $('#form_name').val(),
   customC: $('#customC').is(":checked"),
   no_throttle: $('#no_throttle').is(":checked"),
   form_code : $('#form_code').val()};
   
           jQuery.post( MyAjax.ajaxurl, data, function(response) {
               alert('Response: ' + response);
           });
       });
   });
   

   Log in to Reply

2. I did a quick test(crude one) and this was the working code for me.

   wp_enqueue_script( 'AWNT_save_form_data', get_stylesheet_directory_uri() . '/inc/save_form_data.js', array( 'jquery' ) );
   wp_localize_script( 'AWNT_save_form_data', 'MyAjax', array(
       // URL to wp-admin/admin-ajax.php to process the request
       'ajaxurl'          => admin_url( 'admin-ajax.php' ),
       // generate a nonce with a unique ID "myajax-post-comment-nonce"
       // so that you can check it later when an AJAX request is sent
       'postCommentNonce' => wp_create_nonce( 'myajax-post-comment-nonce' ),
       )
   );
   add_action('wp_ajax_AWNT_save', 'AWNT_save_callback');
   function AWNT_save_callback() {
       update_option('current_form', '5');
       $nonce = $_POST['postCommentNonce'];
       if ( ! wp_verify_nonce( $nonce, 'myajax-post-comment-nonce' ) )
           die ( 'Busted!');
       update_option('current_form', 'foo');
       echo get_option('current_form');
       die();
   }
   add_action( 'admin_menu', 'register_menu_pages', $priority = 10, $accepted_args = 1 );
   function register_menu_pages() {
       add_menu_page('AWNT', 'awnt custom', 'manage_options', 'awntCustom', 'awnt_menu', 'dashicons-admin-site', 6 );
   }
   function awnt_menu () {
       ?>
       <form method="post">
           <input type="text" id="form_name" name="form_name">
           <input type="text" id="form_code" name="form_code">
           <input type="checkbox" id="customC" name="customC">
           <input type="checkbox" id="no_throttle" name="no_throttle">
           <input type="submit" name="save" value="Save" id="save">
       </form>
       <?php
   }
   

   The Javascript code was:

   jQuery(document).ready(function($) {
       $('#save').on('click', function(e) {
           e.preventDefault(); 
           var data = {
               action: 'AWNT_save',
               postCommentNonce : MyAjax.postCommentNonce,
               form_name : $('#form_name').val(),
               customC: $('#customC').is(":checked"),
               no_throttle: $('#no_throttle').is(":checked"),
               form_code : $('#form_code').val()
           };
           jQuery.post( MyAjax.ajaxurl, data, function(response) {
               alert('Response: ' + response);
           });
       });
   });
   

   I think the same should work for you unless you are having any other javascript conflicts.

   Log in to Reply

3. This should be

   add_action( 'wp_ajax_AWNT_save_callback', 'AWNT_save_callback' );
   add_action('wp_ajax_nopriv_AWNT_save_callback', 'AWNT_save_callback' );
   

   I mean the hook name is wrong.

   Log in to Reply