0

I have a form like this:

<form method="post" action="" id="BookingForm">
    <label for="email">Email</label>
    <input type="text" name="email" id="emailId" value="" />
    <input type="hidden" name="action" value="1" />
    <input type="submit" name="submitname" value="Send" />
</form>
<div id="container"></div>

My custom js file is in the following path: assets/js/makebooking.js My JS file makebooking.js :

jQuery(document).ready(function(event) {
 jQuery('#BookingForm').submit(validateForms);
 function validateForms(event) {
 event.preventDefault();

     var x =  MBAjax.ajaxurl;
     alert(x);

    jQuery.ajax({
      action:  'makeBooking',
      type:    "POST",
      url:     MBAjax.admin_url,
      success: function(data) {
         alert(data);
         //jQuery("#container" ).append(data);
      },
    fail: function(error){
        alert("error" + error);
    }
    });
     return false;
  }
});

Functions.php file:

// embed the javascript file that makes the AJAX request
wp_enqueue_script( 'make-booking-ajax','/wp-content/themes/twentyseventeen/assets/js/makebooking.js', array( 'jquery' ) );
// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'make-booking-ajax', 'MBAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

function makeBooking(){
    echo "Home again";
    return "Home";
}


add_action('wp_ajax_make_booking', 'makeBooking');

The problem is that the ajax call returns all the dom and not what the php function returns. The code in the php function does not work; the echo message is not printed

The image below shows the issue:

enter image description here

Thanks,

Federico


enter image description here

This is my status code and my response of ajax

1

It looks like the MBAjax.ajaxurl and MBAjax.admin_url are probably not set. If it can't post to the correct Wordpress handler, then you will probably get a 404 page HTML returned instead of the PHP function return value.

You can test by hard-coding the ajax url to url: "/wp-admin/admin-ajax.php", and see if that fixes things.

Secondly, I have always added a hidden field on my forms with the action <input type="hidden" name="action" value="make_booking">

Try that and see how you get on. Also check your browser console network tab to see the AJAX request being sent. You can check the data you are POSTing and also the response you get back. Easier than trying to use alerts.

enter image description here

You can also use console.log(x) instead.

Update: I think you're missing sending anything in your AJAX request:

jQuery.ajax({
   action : 'make_booking',
   type   : "POST",
   data   : {
      action: 'make_booking'
   }
   url    : MBAjax.admin_url,
   success: function(data) {
      alert(data);
      //jQuery("#container" ).append(data);
   },
   fail: function(error){
      alert("error" + error);
   }
});

Try that.

  • It returns 400 status code (bad request) – Federico Oct 22 '18 at 15:15
  • Response is ' 0 ' – Federico Oct 22 '18 at 15:15
  • OK, so where is it posting to - what's the URL (you can omit the actual domain name if need be)? What POST data is it sending? Can you screenshot the request screen? – Alexander Holsgrove Oct 22 '18 at 15:16
  • localhost:8080/wordpress/wp-admin/admin-ajax.php 400 (Bad Request) send @ jquery.js?ver=1.12.4:4 ajax @ jquery.js?ver=1.12.4:4 validateForms @ makebooking.js?ver=4.9.8:5 dispatch @ jquery.js?ver=1.12.4:3 r.handle @ jquery.js?ver=1.12.4:3 – Federico Oct 22 '18 at 15:18
  • Looking back at your code, it doesn't look like you're passing nay data in the AJAX request. Please see my update – Alexander Holsgrove Oct 22 '18 at 15:33
0

The action seems to be incorrect on your Ajax call. As per the wp_ajax_{action} codex entry,

The wp_ajax_ hooks follows the format "wp_ajax_$youraction", where $youraction is the 'action' field submitted to admin-ajax.php.

So try changing action: 'makeBooking', to action: 'make_booking', and see if it works then.

And if you want the ajax call to work for non-logged-in users, use also the wp_ajax_nopriv_{action} action hook. Like this

add_action('wp_ajax_nopriv_make_booking', 'makeBooking');

EDIT: Oh, silly me. You're also missing wp_die(); from the end of your ajax response. See codex / AJAX in Plugins for more details.

function makeBooking(){
    echo "Home again";
    wp_die(); // this is required to terminate immediately and return a proper response
}

EDIT 2: You could also use wp_send_json instead of echoing your response.

  • It does not work yet – Federico Oct 22 '18 at 9:56
  • Please see the edit regarding wp_die() – Antti Koskinen Oct 22 '18 at 10:02
  • Unfortunately no – Federico Oct 22 '18 at 10:23
  • it returns the same code – Federico Oct 22 '18 at 10:23
  • On your code you're localizing MBAjax.ajaxurl, but use on the ajax call MBAjax.admin_url. Have you fixed that too? And Anastis pointed on the other answers comments you should update your code to show what has been changed. – Antti Koskinen Oct 22 '18 at 20:20
-1

add below actions

add_action( 'wp_ajax_makeBooking', 'makeBooking');
add_action( 'wp_ajax_nopriv_makeBooking', 'makeBooking');
  • Sorry, Doesn't work – Federico Oct 22 '18 at 13:06

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.