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.

I think I'm on the right track with what I need to do, at least for doing one of the ways it could be done. I'm not really sure though, I could be way off for all I know.

This is part of the code I needed help with last night for resizing the uploaded image files, but now I am trying to figure out how to use the wp_delete_attachment($id) function to delete images attached to the posts.

So, I have this jQuery script that adds/ removes extra fields, for uploading more images to attach. For every added image there is a link to remove them. Clicking remove has only ever just remove the div which the link clicked was contained by, and when saving the post the attached file would show up as still attached.

In my click event handler for the remove link, I need to first run function that will call the wp_delete_attachment(), to permanently delete the file/attachment, THEN I can use jQuery to remove the div of that attachment from the page. That way when saving the post it will have been deleted and not show up again still.

Here's my functions I've been trying to work with:

// a function that returns the delete attachment php function, 
// and a message saying Deleted that fades in and out.
    jQuery(function() {
        function delete_att( attID ) {
            var div = jQuery('#img_uploads'),
                msg = $('div').html('<strong>Attachment Deleted!</strong>').fadeIn().delay(200).fadeOut().appendTo('div');
            return '<?php wp_delete_attachment( ' + attID + ', true ); ?>', msg;
        }

And the click handler which calls this function and then removes the containing div element from the page is:

    jQuery('.remImage').live('click', function() { 
        if( size > 1 ) {
            var postID = jQuery('#attID').val()
            delete_att( postID );

            //jQuery(this).parents('.attchmt').find('#attID');
            jQuery(this).parents('.attchmt').detach();
            size--;
        } 
        return false; 
    });
});

The code to add extra fields is between these two parts but these are the key pieces for what I need help with. Currently, the way I have it coded here I am getting this error message. idk wtf this means exactly though lol.

Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy"  code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)"  location: "http://code.jquery.com/jquery-1.4.4.min.js Line: 113"]

So here is the full code which I am using, exactly. https://gist.github.com/802465 Just trying to pass info to/from jQuery and Php and that's always a pain in the ass, (for me).

share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

I have finally figured out how to do it, and it now works 100%!!

Plus it uses the admin-ajax.php so clicking the Remove link there is an ajax request sent to the function that does the deleting of the attachment and returns the message saying it has been deleted.

Here's the code for my solution, first is the html for the metabox:

<a class="remImage" href="#"><?php _e('Remove');?></a>                  
<input type="hidden" id="att_remove" name="att_remove[]" value="<?php echo $attachment->ID; ?>" />
<input type="hidden" name="nonce" id="nonce" value="<?php echo wp_create_nonce( 'delete_attachment' ); ?>" />

Here's the Php function:

add_action( 'wp_ajax_delete_attachment', 'delete_attachment' );
function delete_attachment( $post ) {
    //echo $_POST['att_ID'];
    $msg = 'Attachment ID [' . $_POST['att_ID'] . '] has been deleted!';
    if( wp_delete_attachment( $_POST['att_ID'], true )) {
        echo $msg;
    }
    die();
}

And the jQuery script that sends the attachment ID and action, etc., then removes the div from the DOM after receiving the ajax response is:

    jQuery('.remImage').live('click', function() {
        if( size > 1 ) {
            jQuery.ajax({
                type: 'post',
                url: ajaxurl,
                data: {
                    action: 'delete_attachment',
                    att_ID: jQuery(this).parents('.attchmt').find('#att_remove').val(),
                    _ajax_nonce: jQuery('#nonce').val(),
                    post_type: 'attachment'
                },
                success: function( html ) {
                    alert( html );
                }
            });
            jQuery(this).parents('.attchmt').detach();
            size--;
        }
        return false;
    });

I am now able to finally complete what I thought was totally impossible after the number of attempts I've made in trying to make it and have failed each time.

It will soon be a plugin, that I can then use on any site easily, with simple options to define the post type to add it to.

share|improve this answer
    
Very helpful post, thanks! –  INT Jul 18 '11 at 12:31
add comment

It looks like you are trying to call WordPress function directly form JQuery so that won't work. what you can do is user your function to hide the div but on that action add an hidden field for each attachment you want to remove as an array with the id of the attachment something like:

<input type="hidden" name="att_remove[]" value="attachment_ID">

and then add a function for removing these files at save_post hook something like this:

function remove_custom_att_1212(){
   global $post;
   if ($post->post_type =="your custom post type"){
      if (isset($_POST['att_remove']){
         foreach ($_POST['att_remove'] as $att_id){
           delete_att($att_id);
         }
      }
   }
}
add_action('save_post','remove_custom_att_1212');
share|improve this answer
    
Ok I'll try that out, I had done something similar, but I hadn't used the array thing. I thought I might have to but wasn't sure. –  jaredwilli Jan 31 '11 at 12:26
    
Let us know how it gos –  Bainternet Jan 31 '11 at 13:02
    
The issue I am having a hard time with is how does the jQuery click event tie together with the function that does the removal of the attachment? I can't figure out how to remove it, upon click the remove link. Because doing just that what you said doesn't appear to work, since it doesn't have involvement with the jQuery script. –  jaredwilli Jan 31 '11 at 14:15
    
its not. you cant call php function from JQuery unless you use an ajax call, thats why i suggested to hook it to the save_post hook that takes action after you save a draft,publish or update a post. –  Bainternet Jan 31 '11 at 14:18
    
I used an ajax request to hook it to the php function. I re-remembered that along the way. –  jaredwilli Feb 2 '11 at 5:11
show 1 more 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.