$25
How to save\update Custom Type Post via AJAX?

I'm really stuck with that. I need to save (update) some $i1, $i2, $i3 metafields of custom post by clicking on the a#save link while editing the post. The custom metafields works fine with default Update button, but I'm not sure how to do that via ajax.

1 - In first I've registered the custom type post.

2 - Then I've created a metafields:



// METABOXES

function admin_init(){

	add_meta_box('prodInfo-meta', 'Product Options', 'meta_options', 'product', 'side', 'low');

}

add_action('admin_init', 'admin_init');



function save_product(){

	global $post;

	$custom_meta_fields = 

		array(

			'i1',

			'i2',

			'i3'

		);

	foreach( $custom_meta_fields as $custom_meta_field ):

		if(isset($_POST[$custom_meta_field]) && $_POST[$custom_meta_field] != ""):

			update_post_meta($post->ID, $custom_meta_field, $_POST[$custom_meta_field]);

		endif;

	endforeach;

}

add_action('save_post', 'save_product');

3 - Get data



// START META OPTIONS FUNCTION

function meta_options(){

	global $post;

	$custom = get_post_custom($post->ID);

	$i1 = $custom['i1'][0];

	$i2 = $custom['i2'][0];

	$i3 = $custom['i3'][0];

4 - Call the action by clicking



var j = jQuery.noConflict();

j('a#save').click(function() {

	j.ajax({

		url: "/wp-admin/admin-ajax.php",

		type: 'POST',

		async: true,

		cache: false,

		dataType: 'json',

		data: {

			action: 'IM-NOT-SURE-WHAT-HERE'

		},

		success: function(){

			alert('Saved');

		}

	});

	return false;

});

5 - and handler



// AJAX HANDLER

function my_function() {

	IM-NOT-SURE-WHAT-HERE

}

add_action('wp_ajax_SOMETHING_HERE', 'my_function');

Probably something else.

I will appreciate your help. Regards.

attachment image View Attachment

Igor | 07/15/11 at 3:43am | Edit

Previous versions of this question: 07/15/11 at 6:54am

(3) Possible Answers Submitted...

Last edited:
07/15/11
4:15am
Peter Michael says:
Try this, untested though:

Add one more action after your metafields function:
```
add_action('save_post', 'save_product');

add_action('wp_ajax_save_product', 'save_product');
```
Then use action 'save_product' to post the data:
```
var j = jQuery.noConflict();

j('a#save').click(function() {

	j.ajax({

		url: "/wp-admin/admin-ajax.php",

		type: 'POST',

		async: true,

		cache: false,

		dataType: 'json',

		data: {

			action: 'save_product'

		},

		success: function(){

			alert('Saved');

		}

	});

	return false;

});
```
- 07/15/11 6:57am
  
  Igor says:
  Peter,
  
  Thank you for reply, but I'm not sure about handler. Could you take a look an attachment (PHP file) please?.
- 07/15/11 7:03am
  
  Peter Michael says:
  The handler is the
```
function save_product()
```
  which you already have. Just add
```
add_action('wp_ajax_save_product', 'save_product');
```
  right after
```
add_action('save_post', 'save_product');
```
  You might have to serialize the form data, I forgot that. See Utkarsh Kukreti's answer below.
- 07/15/11 7:17am
  
  Igor says:
  I'm sorry, I'm confused:( Could you modify an attachment file for me please? http://wpquestions.com/uploads/Igor_phpqE9J4m.zip
  
  I will appreciate your help.

Last edited:
07/15/11
4:22am

Utkarsh Kukreti says:

JS:

var j = jQuery.noConflict();

var data = $('form#post').serialize();

data.action = 'save_product';



j('a#save').click(function() {

	j.ajax({

		url: "/wp-admin/admin-ajax.php",

		type: 'POST',

		async: true,

		cache: false,

		dataType: 'json',

		data: data,

		success: function(data){

			alert(data.message);

		}

	});

	return false;

});

PHP:

function save_product_ajax() {

	save_product();

	echo json_encode(array("message" => "Success"));

	exit();

}

add_action('wp_ajax_save_product', 'save_product');

07/15/11 6:58am

Igor says:
Utkarsh,

I've tried your solution but no luck. Could you take a look an attachment (PHP file) please?

Thank you

Last edited:
07/15/11
5:00am
Christianto says:
Hi,

Please try this..

The action by click..
```
var j = jQuery.noConflict();

j('a#save').click(function() {

	

	var formValues = $("#YOUR_FORM_ID").serialize();

	var data = { type: 'save', action: 'iajax_save', data: formValues }

	

	j.post( url: ajaxurl, data: data, function(message){

		alert('Saved');

	});

	return false;



});
```
Change YOUR_FORM_ID to your form id..

And php handler
```
// AJAX HANDLER

function iajax_save_function() {

	

	if ( !current_user_can('edit_theme_options') )

		die('-1');

	

	global $post;

	

	if($_POST['type'] == 'save'){

		

		$data = $_POST['data'];

		parse_str($data, $saved);

		

		$custom_meta_fields = 

			array(

				'i1',

				'i2',

				'i3'

			);

		

		foreach( $custom_meta_fields as $custom_meta_field ):

			if(isset($saved[$custom_meta_field]) && $saved[$custom_meta_field] != ""):

				update_post_meta($post->ID, $custom_meta_field, $saved[$custom_meta_field]);

			endif;

		endforeach;

		

		echo 'save_success';

		die;

	

	}

	

}

add_action('wp_ajax_iajax_save', 'iajax_save_function');
```
Thanks

Previous versions of this answer: 07/15/11 at 5:00am
- 07/15/11 7:00am
  
  Igor says:
  Hi Christianto,
  
  Many thanks for your reply, but JS script get back an error. Could you take a look an attachment (PHP file) please?
  
  Thank you
- 07/15/11 7:04am
  
  Christianto says:
  Sorry I forgot about noConflict();
  try this..
```
var j = jQuery.noConflict();

j('a#save').click(function() {

	

	var formValues = j("#YOUR_FORM_ID").serialize();

	var data = { type: 'save', action: 'iajax_save', data: formValues }

	

	j.post( url: ajaxurl, data: data, function(message){

		alert('Saved');

	});

	return false;



});
```
- 07/15/11 7:13am
  
  Igor says:
  Error: Expected ')'
  
  Probaby the some ')' symbol losted. Could you modify attachment file for me please? http://wpquestions.com/uploads/Igor_phpqE9J4m.zip
  
  Thank you
- 07/15/11 7:20am
  
  Christianto says:
  sorry the js should be
```
var j = jQuery.noConflict();

j('a#save').click(function() {

	

	var formValues = j("#YOUR_FORM_ID").serialize();

	var data = { type: 'save', action: 'iajax_save', data: formValues }

	

	j.post( ajaxurl, data, function(message){

		alert('Saved');

	});

	return false;



});
```
- 07/15/11 7:29am
  
  Christianto says:
  This is the file..
  I hope it works..
  
  Attached Image
- 07/15/11 7:34am
  
  Christianto says:
  Please change #YOUR_FORM_ID" to your form id,
  there aren't form in the attachment file?
- 07/15/11 7:58am
  
  Igor says:
  OMG, I can't believe. That works! I've spend three days for that. I almost gave up :)
  
  Christianto, THANK YOU! THANK YOU! THANK YOU!
- 07/15/11 8:04am
  
  Christianto says:
  I'm glad..
  You change "#YOUR_FORM_ID" to "form#post" right?
  
  sorry there a lot of typo..
  I can't concentration well since I got headache.. :D
- 07/15/11 8:09am
  
  Igor says:
  Yes, right. That works fine in both case (with form and with input field only).
  
  I've vited your answer but your answer hasn't been hightlighted. Have you got the prize?
- 07/15/11 8:09am
  
  Igor says:
  *voted
- 07/15/11 8:24am
  
  Igor says:
  Christianto,
  
  I hurried :(
  
  Unfortunately, that do not work.
  
  Could you please amke sure the code?
- 07/15/11 8:45am
  
  Igor says:
  The FF browser get back the data of input fields each time after page refresh. I took it for the results of the AJAX script.
- 07/15/11 10:13am
  
  Igor says:
  Dear Christianto,
  
  I've got a correct solution from you. I've tested that with FF, Chrome and IE8. Thank you so much for your help. Now, the file works fine. I really appreciate that.
  
  I'm very sorry for the misunderstanding.
  Thanks again.
  
  Best regards,
  Igor