Ecommerce Shopify WordPress Discussion

WP ajax function

I'm encountering a 400 error when making an AJAX call in my project. I know this is asked many times, but I can't figure out my problem. Here's my JavaScript code: function uploadFile() { jQuery.ajax({ url: ajax.url, type: 'POST', data: { 'action': 'excel_converter', 'id': 'test' }, processData: false, success: function(response){ console.log('response', response); } }); } jQuery(() => { const converter = jQuery('.js-excel-converter'); if(converter) { converter.on('click', (e) => { e.preventDefault(); uploadFile(); }); } }); And here's my PHP code (in functions.php): function excel_converter() { echo 'hi'; die('test'); } function my_script_enqueuer() { $manifest = json_decode(file_get_contents(get_template_directory() . '/dist/rev-manifest.json'), true); $jsFile = $manifest['app.bundle.full.js']; wp_enqueue_script( 'ajax-js', get_template_directory_uri() . '/dist/scripts/' . $jsFile, array('jquery') ); // You can now use ajax.url as the URL in your ajax calls wp_localize_script( 'ajax-js', 'ajax', array( 'url' => admin_url( 'admin-ajax.php' ) )); add_action( 'wp_ajax_excel_converter', 'excel_converter' ); add_action( 'wp_ajax_nopriv_excel_converter', 'excel_converter' ); } add_action( 'init', 'my_script_enqueuer' ); The php code seems to work fine, because I can use the ajax.url as my Post url. But for some reason I keep getting a 400 with request url http://localhost:3000/wp-admin/admin-ajax.php. I tried it with my local domain, but same result; http://mysite.test/wp-admin/admin-ajax.php EDIT "I tried to put up a simplified version of my problem. This is my actual code: function uploadFile() { const messageDiv = jQuery('.js-message')[0]; jQuery(messageDiv).removeClass('error'); jQuery(messageDiv).empty('error'); jQuery.ajax({ url: ajax.url, type: 'POST', processData: false, data: { 'action': 'excel_converter', 'file': jQuery('#excelFile')[0].files[0], 'addressColumn': jQuery('#addressColumn').val(), 'cityColumn': jQuery('#cityColumn').val(), 'postcodeColumn': jQuery('#postcodeColumn').val(), 'countryColumn': jQuery('#countryColumn').val(), 'latitudeColumn': jQuery('#latitudeColumn').val(), 'longitudeColumn': jQuery('#longitudeColumn').val() }, success: (response) => { messageDiv.append(response); }, error: (xhr, status, error) => { jQuery(messageDiv).addClass('error'); messageDiv.append(xhr.responseText); } }); } jQuery(() => { const converter = jQuery('.js-excel-converter'); if(converter) { converter.on('click', (e) => { e.preventDefault(); uploadFile(); }); } }); Because I have a file input field, I have to set processData to false. But when I set processData to false, the AJAX function doesn't work in Wordpress anymore; then I get a 400 response."
Putting processData as false prevents your data from being converted to application/x-www-form-urlencoded, without this conversion wordpress will not know the action to take for your ajax request. Remove processData: false, in your ajax call. Edit To upload a file with $.ajax you have to use a FormData object and set processData and contentType to false. var fd = new FormData(); fd.append('action', 'excel_converter'); fd.append('file', jQuery('#excelFile')[0].files[0]); fd.append('addressColumn', jQuery('#addressColumn').val()); fd.append('cityColumn', jQuery('#cityColumn').val()); fd.append('postcodeColumn', jQuery('#postcodeColumn').val()); fd.append('countryColumn', jQuery('#countryColumn').val()); fd.append('latitudeColumn', jQuery('#latitudeColumn').val()); fd.append('longitudeColumn', jQuery('#longitudeColumn').val(); jQuery.ajax({ url: ajax.url, type: 'POST', processData: false, contentType: false, data: fd, success: (response) => { messageDiv.append(response); }, error: (xhr, status, error) => { jQuery(messageDiv).addClass('error'); messageDiv.append(xhr.responseText); } });

February 26, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.