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

Improve this question
0

3 Answers 3

Reset to default
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.

Improve this answer
11
  • It returns 400 status code (bad request) Commented Oct 22, 2018 at 15:15
  • Response is ' 0 ' Commented Oct 22, 2018 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? Commented Oct 22, 2018 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 Commented Oct 22, 2018 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 Commented Oct 22, 2018 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.

Improve this answer
5
  • It does not work yet Commented Oct 22, 2018 at 9:56
  • Please see the edit regarding wp_die() Commented Oct 22, 2018 at 10:02
  • Unfortunately no Commented Oct 22, 2018 at 10:23
  • it returns the same code Commented Oct 22, 2018 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. Commented Oct 22, 2018 at 20:20
-1

add below actions

add_action( 'wp_ajax_makeBooking', 'makeBooking');
add_action( 'wp_ajax_nopriv_makeBooking', 'makeBooking');
Improve this answer
1
  • Sorry, Doesn't work Commented Oct 22, 2018 at 13:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.