Bind to WPSetAsThumbnail

Question

is there a way to bind some extra script to the WPSetAsThumbnail function? the function automatically inserts the image into the post's metabox, but what if i wanted to do something else with it? could i make it alert('bacon') after the thumbnail is set via ajax?

i'm trying to get a way to set the thumbnails from the quick edit screen and while i can launch the media editor, and the "set as thumbnail" does work, i can't fade in the new image b/c i can't figure out how to latch onto the action and grab the HTML that is passed back.

as an aside, .ajaxComplete seems to fire when i click on the Remove featured image link, but not when i click on the Set as Featured image link. is it b/c the later occurs in a thickbox that isn't part of the original DOM?

///* edit *///

i've tried replicating the html more exactly. this has the problem of having multiple items with the same div ID... and still doesn't fade in the new image either. the image is saved via ajax though and the new thumb appears on refresh.

the html markup in my post column:

<div id="postimagediv"><div class="inside"><p class="hide-if-no-js"><a title="Set featured image" href="'.admin_url( 'media-upload.php?post_id='.$post_id.'&amp;type=image&amp;TB_iframe=1&amp;width=640&amp;height=397')" id="set-post-thumbnail" class="thickbox">'.get_the_post_thumbnail($post_id, array(35,35))

i'd still like some way to latch onto the jquery event so that i can do my own script, but i'm starting to believe this is impossible. i liked the idea of using ajaxComplete but i can't get that to run based on an action that occurs in the media thickbox.

Answer 1

Yes, on your 2nd question :)

From what I saw in set-post-thumbnail.dev.js, it appears that you only need to add a link/anchor with the wp-post-thumbnail class on it in your quick edit screen.

And you will get the image faded inside that link when the ajax request completes.

For alerting "bacon" after the ajax completes, this might work:

$('a.wp-post-thumbnail').ajaxComplete(function() {
  alert('bacon');
});

---

The ajaxComplete approach:

jQuery(document).ready(function($){

  $('a.wp-post-thumbnail').ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {

    // the image should be here
    // use something like $(XMLHttpRequest.responseText).find('img')
    console.log(XMLHttpRequest.responseText);

  });

});

You might need to check which ajax request this is, do console.logs for all arguments and search of the property that holds the ajax action name, which should be "set_post_thumbnail" or something...

Answer 2

Answering to this:

[...] what if i wanted to do something else with it? could i make it alert('bacon') after the thumbnail is set via ajax?

add_action( 'wp_ajax_set-post-thumbnail', 'wpse_35588_ajax_set_post_thumbnail' , 0 );

function wpse_35588_ajax_set_post_thumbnail() {
    $post_ID = intval( $_POST['post_id'] );
    if ( !current_user_can( 'edit_post', $post_ID ) )
        wp_die( -1 );
    $thumbnail_id = intval( $_POST['thumbnail_id'] );
    check_ajax_referer( "set_post_thumbnail-$post_ID" );

    if ( $thumbnail_id == '-1' ) {
        if ( delete_post_thumbnail( $post_ID ) )
            wp_die( _wp_post_thumbnail_html( null, $post_ID ) );
        else
            wp_die( 0 );
    }

    ?>
        <script type="text/javascript">alert('bacon!');</script>
    <?php

    if ( set_post_thumbnail( $post_ID, $thumbnail_id ) )
        wp_die( _wp_post_thumbnail_html( $thumbnail_id, $post_ID ) );

    wp_die( 0 );
}

If we do this, instead of bacon, we close the ThickBox window :)

jQuery('#TB_closeWindowButton').click();

---

Check this Q&A for more details:
How to Reload the Dashboard After Clicking Update in Quick-Edit?

Answer 3

In the end I found that I could not bind or trigger this action. I had to duplicate it as follows with the javascript and then an ajax callback.

Javascript:

function PrismSetAsThumbnail(id, nonce){  
    var $link = jQuery('a#wp-post-thumbnail-' + id);

    $link.text( setPostThumbnailL10n.saving );
    jQuery.post(ajaxurl, {
        action:"prism_set_thumbnail", post_id: post_id, thumbnail_id: id, _ajax_nonce: nonce, cookie: encodeURIComponent(document.cookie)
    }, function(str){
        var win = window.dialogArguments || opener || parent || top;  
        $link.text( setPostThumbnailL10n.setThumbnail );
        if ( str == '0' ) {
            alert( setPostThumbnailL10n.error );
        } else {
            jQuery('a.wp-post-thumbnail').show();
            $link.text( setPostThumbnailL10n.done );
            $link.fadeOut( 2000 );

            //display new thumbnail in the columns w/o refresh
            jQuery('#post-'+win.post_id + ' .postimagediv a', win.parent.document).html(str).fadeIn();

            //if successful close thickbox
            win.parent.tb_remove();
        } 
    }
    );
}

Ajax Callback:

  //add callback for custom version of set thumbnail
  add_action('wp_ajax_prism_set_thumbnail', 'kia_set_thumbnail_callback');

  // the function name must match the above passed name
  function kia_set_thumbnail_callback(){

    $post_ID = intval( $_POST['post_id'] );
    if ( !current_user_can( 'edit_post', $post_ID ) )
        die( '-1' );
    $thumbnail_id = intval( $_POST['thumbnail_id'] );

    check_ajax_referer( "set_post_thumbnail-$post_ID" );

    if ( $thumbnail_id == '-1' ) {
        if ( delete_post_thumbnail( $post_ID ) )
            die( _wp_post_thumbnail_html() );
        else
            die( '0' );
    }

    if ( set_post_thumbnail( $post_ID, $thumbnail_id ) )
        $msg = get_the_post_thumbnail( $post_ID, array(35,35));
        die($msg);
    die( '0' );
}