3

In spite of many similar posts, all the proposed solutions didn't work for me, so here we are.

I have the following script :

jQuery('#term').keyup(ajaxChange);

        function ajaxChange(){
            var newFormChange = jQuery("#term").val();
            alert (newFormChange);
            jQuery.ajax({
                type:"POST",
                action: "my_test_action",
                url: "/wp-admin/admin-ajax.php",
                data: newFormChange,
                success:function(data){
                    console.log(data);
                }
            });

        return false;
        }

And the PHP looks like this :

function my_test_action() {

    $var = "this is a test";
    wp_send_json($var);

    die();
}

add_action( 'wp_ajax_my_test_action', 'my_test_action' );
add_action( 'wp_ajax_nopriv_my_test_action', 'my_test_action' );

I've also tried : echo json_encode($var) or echo $var, instead of wp_send_json() but the function always returns 0 in the browser console !

My other AJAX calls work, for instance I have another one that calls a PHP script which calls a WP Query and displays some posts, it works fine.

EDIT : Here is how my script is included :

 function add_js() {

         if (is_page_template()) {
            wp_enqueue_script( 'mycustomscript', get_stylesheet_directory_uri().'/js/mycustomscript.js', array('jquery'), '1.0', true );

            wp_localize_script('mycustomscript', 'ajaxurl', admin_url( 'admin-ajax.php' ) );
        }
    }
    add_action('wp_enqueue_scripts', 'add_js');

I think the problem comes from the newFormChange variable, because jQuery(this).serialize(); didn't work in the first place, because the form is not submitted but only one of its fields changes. So I replaced it by var newFormChange = jQuery("#term").val(); but then maybe there is a problem with url: "/wp-admin/admin-ajax.php"

Where am I mistaken ? Thanks

6

Note that the action should be inside the data key. In your post request there is no key named as action therefore, the callback function is never being called.

Consider this example:-

jQuery.ajax({
    type:"POST",
    url: "/wp-admin/admin-ajax.php",
    data: { 
        action: "my_test_action",
        form_data : newFormChange
    },
    success: function (data) {
        console.log(data);
    }
});

Also Note: Never use relative Ajax URL like /wp-admin/admin-ajax.php. You can use wp_localize_script(). See these examples

  • well done, it works ! but it's strange, I have another script where action is outside, and it works though ! – Fafanellu Apr 28 '16 at 15:44
  • You are welcome :) Nope you need to double check it. action is WordPress made thing, and rest of the parameters belongs to jQuery. You can see here jQuery Ajax action is not a valid key. – Sumit Apr 28 '16 at 15:49
  • if I write alert(newFormChange) I see something like "term=anything&action=my_test_action. Hence, the "WP made thing" action is passed like another POST variable ? I have one more extra question : if I use $_POST['term'] in my_test_action(), it is not recognized. Though it is the proper way to retrieve POST variables with this method. Where am I wrong ? – Fafanellu Apr 28 '16 at 15:56
  • I am not sure where did you place alert! but if you see term=anything&action=my_test_action on alert that is GET request. So you will be able to access the variable using $_GET instead of $_POST but I really wonder why you are seeing query string instead of js object. – Sumit Apr 28 '16 at 16:56
  • I called the serialize() method on newFormChange then I placed the alert just after that. The funny thing is that it displays what I wrote above, even if action is defined within the data. I applied your recommandations on my other scripts and I'm no longer able do retrieve data with $_POST[]. Strange ! – Fafanellu Apr 28 '16 at 17:15
0

It seems there is a problem with at url: "/wp-admin/admin-ajax.php", instead try adding the full path:

function addajaxurl() {
    wp_localize_script( 'frontend-ajax', 'frontendajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}
add_action( 'wp_enqueue_scripts', 'addajaxurl' );

and call the variable in your ajax function:

        jQuery.ajax({
            type:"POST",
            url: ajaxurl,
            data: newFormChange,
            success:function(data){
                console.log(data);
            }
        }); 
  • thanks I'll test it ! but my other AJAX calls do work, it's strange...! see my edit above, I have almost the same thing than you. Besides, if the .php url wasn't found, it would have returned an error in the console, wouldn't it ? – Fafanellu Apr 28 '16 at 15:40
  • Yeah it seems the error is with action, try removing that – tam Apr 28 '16 at 15:46
0

the problem is in the action parameter. In your javascript function please try:

var newFormChange = jQuery("#term").val();

    jQuery.ajax({
                    type: "POST",
                    url: "/wp-admin/admin-ajax.php",
                    data: {
                        action: "my_test_action",
                        newFormChange: newFormChange
                    }   ,
                    success: function(data) {
                        console.log(data);
                  alert(data);


                });

You should also remove die(); from your php function. It is already in the wp_send_json.

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.