Ajax Call Failing – Error 400

I’ve been trying for several days now to get an Ajax call working on my site. I’ve developed it as a plugin using a shortcode to output the I’ve been through these forums and other support sites extensively, and as far as I can see, I’ve done everything right, but still get a “Failed to load resource: the server responded with a status of 400 ()” error from admin-ajax.php, upon form submission, no matter what I do. What am I missing?

The shortcode and script enqueuing in my plugin file:

 //localize and enqueue listing resources
   function mediator_filter_search_resources() {
       wp_enqueue_style( 'mediator_listing', plugin_dir_url( __FILE__ ). 'includes/mediator_filter_search_style.css', false, '1.0', 'all' );
       wp_enqueue_script( 'mediator_listing', plugin_dir_url( __FILE__ ). 'includes/mediator_filter_search_script.js', array(), '1.0', true );
       wp_localize_script( 'mediator_listing', 'wpAjax', array('ajaxUrl' => admin_url('admin-ajax.php')) );
   }

// Define listing shortcode
   function mediator_listing_shortcode() {
      
      mediator_filter_search_resources();
      
      ob_start(); // Start output buffering
      include 'includes/mediator-listing.php'; // Include the external file
      return ob_get_clean(); // Return the buffered content
      
      
   }
   // Register listing shortcode
   add_shortcode('mediator_listing', 'mediator_listing_shortcode');

My HTML/PHP form (in ‘mediator-listing.php’), which is pulling values from user meta fields:

<form id="mediator-search-form" data-js-form="filter">
	 
	 <div id="mediator_main_search">
		<label for="mediator_search">Keyword Search</label>
	   <div id="mediator_search_box">
		 <input type="text" name="mediator_search" id="mediator_search" placeholder="Search Professional Mediators...">
		 <input type="submit" id="submit" name="submit" value="Search">
	   </div>
	 </div>
	 
	 <label for="designation">Designation</label>
	  <?php 
	  $selection = isset($_POST['designations']);
	  $field_key = "field_664517d942b6e"; // <-- Find this by turning on Field Keys under Screen Options in admin interface
	  $field = get_field_object($field_key);
	  if( $field ) {
		echo '<select name="designation" id="designation" autocomplete="off"><option value="">All</option>';
		foreach( $field['choices'] as $k => $v ) {
		  echo '<option value="' . $k . '"';
		  if ( $k == $selection ) {
			echo ' selected';
		  }
		  echo '>' . $v . '</option>';
		}
		echo '</select>';
	  }
	  ?>
	  
	  <label for="region">Region</label>
		<?php 
		$selection = isset($_POST['region']);
		$field_key = "field_664514c742b6b"; // <-- Find this by turning on Field Keys under Screen Options in admin interface
		$field = get_field_object($field_key);
		if( $field ) {
		  echo '<select name="region" id="region" autocomplete="off"><option value="">All</option>';
		  foreach( $field['choices'] as $k => $v ) {
			echo '<option value="' . $k . '"';
			if ( $k == $selection ) {
			  echo ' selected';
			}
			echo '>' . $v . '</option>';
		  }
		  echo '</select>';
		}
		?>
		
		<label for="language">Language</label>
		<?php 
		$selection = isset($_POST['languages']);
		$field_key = "field_6645162042b6c"; // <-- Find this by turning on Field Keys under Screen Options in admin interface
		$field = get_field_object($field_key);
		if( $field ) {
		  echo '<select name="language" id="language" autocomplete="off"><option value="">All</option>';
		  foreach( $field['choices'] as $k => $v ) {
			echo '<option value="' . $k . '"';
			if ( $k == $selection ) {
			  echo ' selected';
			}
			echo '>' . $v . '</option>';
		  }
		  echo '</select>';
		}
		?>
 </form>

My jQuery Ajax call (in ‘mediator_filter_search_script.js’):

//Handle searches  
  jQuery(document).ready(function() {
	  
	jQuery(document).on('submit', '[data-js-form=filter]', function(e) {
	  e.preventDefault();
	  var filter_data = jQuery(this).serialize();
	  jQuery(this).find('#submit').val('Loading').addClass('loading');
	  console.log(filter_data);
	  
	  jQuery.ajax({
		url: wpAjax.ajaxUrl,
		data: {
			action: 'mediator_filter',
			data: filter_data,
		},
		type: 'post',
		dataType: 'json',
		success: function(result) {
		  console.log('Ajax Success');
		  console.log(result);
		  jQuery('[data-js-form=filter]').find('#submit').removeClass('loading').val('Search');
		},
		error: function(result) {
		  console.log(result);
		  console.log('Ajax Not Sent');
		  jQuery('[data-js-form=filter]').find('#submit').removeClass('loading').val('Search');
		}
	  });
	});
	
	//Submit form when filters are chosen
	jQuery('#mediator-search-form select').change(function(){
		 jQuery('#mediator-search-form').submit();
	});
	
	
  });

My call back function (also in ‘mediator-listing.php’). For now, I’m just trying to receive and output the values I’m trying to pass from the form:

<?php

add_action( 'wp_ajax_nopriv_mediator_filter', 'mediator_filter' );
add_action( 'wp_ajax_mediator_filter', 'mediator_filter' );

function mediator_filter() {
  
  $mediator_search = $_POST['mediator_search'];
  $url_designation = $_POST['designation'];
  $url_region = $_POST['region'];
  $url_language = $_POST['language'];
  
  echo $mediator_search;
  echo $url_designation;
  echo $url_region;
  echo $url_language;
  
wp_die();
}
?>

Any insight anyone could give would be super helpful… I’m going crazy over this! Lol.

• This topic was modified 6 months ago by pmoignard.