Reply To: Custom HTML in an Edit Page

• whodeee

• April 30, 2016 at 2:50 am

Okay – got this one more or less solved… Here’s what I have going on:
1. Add a image selection field
2. Create a custom meta box with an image with an id of “prodimage”
3. Use @hube2 script to tie into the change of the image selection field
4. Use an ajax call from this stackoverflow link: http://wordpress.stackexchange.com/questions/101797/update-option-in-javascript in the change event and then call the update_field in the success as shown
5. send back the URL of the image to the js json.success and update the image with that new URL

Here are a few snippets:

First the edited code from @hube2

_para_image_change: function(e) {
				console.log('image file change');
				
				newAttachID = jQuery('.acf-field-52ebc2ab15adb input').val();
				newAttachID = newAttachID.toString();
				
				console.log("newAttachID="+newAttachID);
				//jQuery('#acf-field_571a8e724a917').val(newAttachID);
				//$('#acf-field_571a8e724a917').trigger('change');
				
				$.ajax({
					type:   'POST',
					url:    'http://example.com/wp-admin/admin-ajax.php',
					data:   {
						action: 'hit-bottom',
						imageID: newAttachID, // your option variable
						postNumID: postID // your option variable
					},
					dataType: 'json'
					
					}).done(function( json ) {
						console.log( "Ajax call succeeded, let's see what the response was." );
						if( json.success ) {
							console.log("Function executed successfully and returned: "+json.message);
							//update the image src in the metabox
							jQuery("#prodimage").attr('src',json.message);
							
						} else if( !json.success ) {
							console.log( "Function failed and returned: " + json.message );
						}
					}).fail(function() {
						console.log( "The Ajax call itself failed." );
					}).always(function() {
						console.log( "This message is always displayed, whether the call failed or succeeded." );
				});

			},

And next the php/ajax handoff:

add_action( 'wp_ajax_hit-bottom', 'wpse_hit_bottom' );
add_action( 'wp_ajax_nopriv_hit-bottom', 'wpse_hit_bottom' );

function wpse_hit_bottom() {
    $imageID = $_POST['imageID'];
	$postNumID = $_POST['postNumID'];
	
    if( !isset( $imageID ) || $imageID == '' || !isset( $postNumID ) || $postNumID == ''  ) {
        //insert fallback vars
		die(
            json_encode(
                array(
                    'success' => false,
                    'message' => 'Missing required information.'
                )
            )
        );
    }
	update_field('field_571a8e724a917', $imageID, $postNumID);
	$full = wp_get_attachment_image_src($imageID,'full');
	$fullstring = $full[0];
    
	die(
        json_encode(
            array(
                'success' => true,
                'message' => $fullstring
            )
        )
    );
}