Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

3 Answers 3

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...

share|improve this answer
    
the link w/ class .wp-post-thumbnail is the "set as thumbnail" link in the thickbox. your suggestion doesn't work (insofar as adding it to the edit page's footer scripts) b/c as you answered my other question, the WPSetAsThumbnail function is triggered inside the thickbox. –  helgatheviking Dec 21 '11 at 15:10
    
you're right; see WPSetThumbnailHTML. Apparently you need a element with the .inside class wrapped inside a element with the #postimagediv ID. Then you'll get that image inserted there... –  onetrickpony Dec 21 '11 at 23:46
add comment
up vote 1 down vote accepted

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'));

  function 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' );
}
share|improve this answer
add comment

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?

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.