Wordpress sending multiple AJAX requests on one click - php

Question

My ajax function for saving post is making multiple requests, and i can't understand why. I tried searching for the duplicate elements, that may cause double clicking, but there is no duplicates. And sometimes it posts on ONE click 4 times
Here is the screenshot of multiple ajax post, when i click on #order_save button,
My #order_save button, when i search for the order_save in the DOM tree, the first match is this element. (original click element)
And the second match(2 of 2) for the order_save is at jquery code (which is normal)
jQuery(function($) {
$(document).on('click','#order_save',function(){
var order_title = $('#client-order-title').val();
var order_comment = $('#client-comment').val();
var order_date = $('#order_date_till').val();
var price_input = $('#order_price').val();
var order_price;
var order_attachments = [];
if($('#order_price_on_deal:checked').val() == 'foo') {
order_price = 'foo';
}else{
order_price = price_input;
}
if(!order_title) {
$('#client-order-title').addClass('has-error');
return false;
}else{
$('#client-order-title').removeClass('has-error');
}
if(!order_comment) {
$('#client-comment').addClass('has-error');
return false;
}else{
$('#client-comment').removeClass('has-error');
}
$('#files_public .order-attachment').each(function() {
var attachment_link = $(this).find('a').attr('href');
var attachment_title = $(this).text();
order_attachments.push({
'file_url' : attachment_link,
'file_name' : attachment_title
});
});
$.ajax({ // Line 68 is here
url: my_ajax.url,
type: "POST",
data: {
'action' : 'xx_order_saving',
'order_title' : order_title,
'order_comment' : order_comment,
'order_date' : order_date,
'order_price' : order_price,
'order_attachment' : order_attachments,
'order_type' : 'public_order'
},
dataType: "json",
success: function(response){
if(response.html) {
$('#currentOrder').html(response.html);
}
}
})
});
});
PHP handler in my functions php (working fine)
function xx_order_saving() {
// posting data here
if($order_title && $order_comment) {
$new_post_a = array(
'post_type' => 'orders',
'post_title' => $order_title,
'post_status' => 'publish'
);
$new_order = wp_insert_post($new_post_a);
if($new_order) {
wp_update_post( array( 'ID' => $new_order, 'post_name' => $new_order ) );
}
$template_file = 'xxx-order-saved.php';
ob_start();
include(locate_template($template_file,false,false));
$page_template = ob_get_contents();
ob_end_clean();
$response['html'] = $page_template;
wp_send_json($response);
}
}
add_action('wp_ajax_xx_order_saving','xx_order_saving');
add_action('wp_ajax_nopriv_xx_order_saving','xx_order_saving');
The template file with the jquery code above is loaded dynamically using this function
function load_frame() {
$option = $_POST['option'];
if($option){
$template_file = 'xxxx-'.$option.'.php';
ob_start();
include(locate_template($template_file,false,false));
$page_template = ob_get_contents();
ob_end_clean();
$response['html'] = $page_template;
wp_send_json($response);
}
}
Sometimes it works just fine, sending one request, saving one post, sometimes it posts 4 or 2 times as shown in the screenshot above.
Here is what seems to cause the problem:
If there is order-attachments, for example one attachment it will send two requests (save two posts) if there is two attachments it will send One request, if there is three attachments it will send 4 requests, if there is 5 it sending One again. I just don't get it. Any help will be appreciated
<div id="files_public" class="form-group">
<span class="list-group-item order-attachment">Image.png
...</span>
</div>

Answer 1

Change
$(document).on("click", "#order_save", function () {
to
$("#order_save").click(function () {