6

I'm using the following piece of code to open a media frame when clicking a link with a data-attachment_id attribute. This attribute holds the id of an attachment that I want to select when the frame opens:

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

    $( '#gallery_images_container' ).on( 'click', 'a.edit', function( event ) {
        var $el = $( this );
        var selected = $( this ).attr( 'data-attachment_id' );

        event.preventDefault();

        // If the media frame already exists, reopen it.
        if ( gallery_items_frame ) {

            // Select the attachment when the frame opens
            gallery_items_frame.on( 'open', function() {
                var selection = gallery_items_frame.state().get( 'selection' );
                if ( selected ) {
                    selection.add( wp.media.attachment( selected ) );
                }
            });

            // Open the modal.
            gallery_items_frame.open();

            return;
        }

        // Create the media frame.
        gallery_items_frame = wp.media.frames.gallery_items = wp.media({
            // Set the title of the modal.
            title: $el.data( 'choose' ),
            button: {
                text: $el.data( 'update' )
            },
            states: [
                new wp.media.controller.Library({
                    title: $el.data( 'choose' ),
                    filterable: 'all',
                    multiple: true
                })
            ]
        });

        // Select the attachment when the frame opens
        gallery_items_frame.on( 'open', function() {
            var selection = gallery_items_frame.state().get( 'selection' );
            if ( selected ) {
                selection.add( wp.media.attachment( selected ) );
            }
        });

        // Open the modal.
        gallery_items_frame.open();

    });

});

When I click the link for the first time, the frame opens and the pertinent attachment is selected. But, if I close the frame and click the link again, the frame opens again but no attachment is selected.

Any insights as to what I might be doing wrong?

Thanks in advance

1 Answer 1

5

Well, I found the answer myself. I hope it helps others:

I replaced both instances of:

if ( selected ) {
    selection.add( wp.media.attachment( selected ) );
}

with:

selection.reset( selected ? [ wp.media.attachment( selected ) ] : [] );

Apparently, the reset() function can be used to empty an array and then add elements to it, too.

3
  • 1
    You wouldn't believe how much time you saved me! I was about to give up!
    – StephanieQ
    Feb 9, 2018 at 18:11
  • This is is really good base turtorial for many media.modal questions out there. You should proved the complete working code in your edits. Oct 27, 2018 at 18:58
  • 1
    works, Thank you! Apr 8, 2020 at 17:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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