4

I'm struggling with this for a couple of days already, so any help is most welcome. Not my first time setting up Ajax with WP, so I have some idea at the least. It concerns a very standard form validation and inputting info to database. This all inside of a plugin.

So, what works: form submission works, the jquery script is activated and forwards the input info to the callback PHP file.

Problem is that, for some reason, the specific function that handles the form on that PHP file is not activated.

So, what do I have? I will skip the form as such because it seems pretty standard.

1 - the javascript/jquery

/plugins/alert-widget/submit_handler.js

jQuery(document).ready( function() {

jQuery("#alert_set_form").on("submit", function(e) {
    e.preventDefault();
    var info = jQuery("#alert_set_form").serialize();
    // Post to the server
    jQuery.ajax({       
        type:"POST",
        url:ajaxAlert.ajaxurl,
        data:info,
        dataType:'json',
        success: function(data){
             jQuery("#alert_set_form .stm-validation-message").html(data);
        }
    });
});
});

1- the main PHP plugin file that builds the form and is supposed to handle the validation/data input.

/plugins/alert-widget/alert_widget.php

add_action('wp_ajax_bda_alert', 'bda_alert_validation');
add_action('wp_ajax_nopriv_bda_alert', 'bda_alert_validation');

/* this commented out code was placed just to check if call hits the file, which it does

if( isset($_POST['model'])){
                $criteria = array(
                              'model' => $_POST['model'],
                              'body' => $_POST['body'],
                              'price' => $_POST['price'],
                              'mileage' => $_POST['mileage'],
                              'ca-year' => $_POST['ca-year'],
                              'fuel' => $_POST['fuel'],
                              'transmission' => $_POST['transmission']
                              );

            $criteria = base64_encode(serialize($criteria));
            $response = $criteria;
            wp_send_json( $response );
            wp_die();
        }
*/
    function bda_alert_validation(){
     //does validation and input 

            $response =array(
                'data'  => 'success',
                'supplemental' => array(
                    'message' => 'success',
                ),
            ) ;

            wp_send_json( $response );
            wp_die();       
    }



add_action('init', 'alert_form_init' );

function alert_form_init() {
wp_register_script( "alert_form_script", WP_PLUGIN_URL.'/alert-widget/submit_handler.js', array('jquery') );
wp_localize_script( 'alert_form_script', 'ajaxAlert', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'alert_form_script');

}
  • Have you considered using a REST API endpoint instead? It's easier to work with and secure – Tom J Nowell May 25 '17 at 15:23
  • Thanks @TomJNowell. Not even aware of the possibility. Can you elaborate? – BernardA May 25 '17 at 15:24
  • There's a REST API at /wp-json, look up register_rest_route, e.g. tomjn.com/2017/01/23/writing-wp-rest-api-endpoint-2-minutes – Tom J Nowell May 25 '17 at 15:31
  • Is action passed with your form data? – Milo May 25 '17 at 15:58
  • @Milo, you may be on to something. How should I include the form action. Like <form id="alert_set_form" name="alert_set_form" action="/admin-ajax.php?action=bda_alert_validation" > ? – BernardA May 25 '17 at 16:05
6

Since you're serializing the form, as ajax data, you could be missing the action part from your form:

<input type="hidden" name="action" value="bda_alert">

so your ajax request would contain

/wp-admin/admin-ajax.php?action=bda_alert&...

that should invoke the wp_ajax_bda_alert or wp_ajax_nopriv_bda_alert action callback.

  • 1
    That was it, thanks. I wasn't aware of that at all and the literature around it did not help either. Much appreciated. – BernardA May 25 '17 at 16:18
5

The above AJAX callback could be rewritten as a REST API endpoint like this:

function bda_alert_validation( $request ){
    // $info = $request['info'];
    $response = array(
        'data'  => 'success',
        'supplemental' => array(
            'message' => 'success'
        )
    ) ;
    return $response;      
}

add_action( 'rest_api_init', function () {
        register_rest_route( 'bernarda/v1', '/validatealert/', array(
                'methods' => 'POST',
                'callback' => 'bda_alert_validation'
        ) );
} );

Now you have an endpoint at example.com/wp-json/benarda/v1/validatealert/ that you can do POST requests against

  • I'm reading thru some material on this. How should I set up the jquery? – BernardA May 25 '17 at 16:10
  • exactly the same, just use the REST API endpoint URL instead – Tom J Nowell May 25 '17 at 16:16
  • thanks for showing me this alternative way. I will look further into it. For now though, birgire found what the issue was and I should accept his answer. – BernardA May 25 '17 at 16:19
  • Tom i think you need an script to add Have you considered using a REST API endpoint instead? automatically to every question that has an admin-ajax tag ;) – Jack Johansson May 25 '17 at 19:06
  • 1
    @JackJohansson anything less is unethical – Tom J Nowell May 25 '17 at 21:40

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.