attachments - How to trigger a refresh in the media modal

admin管理员组

文章数量:1124161

I'm developing a plugin that adds a new tab to the media modal, and I need to know a way trigger a refresh of the attachments tab so it shows newly added attachments. This is the code I'm using:

wp.media.view.Toolbar.Custom = wp.media.view.Toolbar.extend({
    initialize: function() {
        _.defaults( this.options, {
            event: 'custom_event',
            close: false,
            items: {
                custom_event: {
                    text: wp.media.view.l10n.customButton,
                    style: 'primary',
                    priority: 80,
                    requires: false,
                    click: this.addAttachment
                }
            }
        });

        wp.media.view.Toolbar.prototype.initialize.apply( this, arguments );
    },

    // triggered when the button is clicked
    addAttachment: function(){
        this.controller.state().addAttachment();
        this.controller.setState( 'insert' );
        // I NEED TO TRIGGER A REFRESH OF THE ATTACHMENTS TAB HERE
    }
});

Any help would be appreciated. The media modal documentation is almost non-existant.

Thanks

I'm developing a plugin that adds a new tab to the media modal, and I need to know a way trigger a refresh of the attachments tab so it shows newly added attachments. This is the code I'm using:

wp.media.view.Toolbar.Custom = wp.media.view.Toolbar.extend({
    initialize: function() {
        _.defaults( this.options, {
            event: 'custom_event',
            close: false,
            items: {
                custom_event: {
                    text: wp.media.view.l10n.customButton,
                    style: 'primary',
                    priority: 80,
                    requires: false,
                    click: this.addAttachment
                }
            }
        });

        wp.media.view.Toolbar.prototype.initialize.apply( this, arguments );
    },

    // triggered when the button is clicked
    addAttachment: function(){
        this.controller.state().addAttachment();
        this.controller.setState( 'insert' );
        // I NEED TO TRIGGER A REFRESH OF THE ATTACHMENTS TAB HERE
    }
});

Any help would be appreciated. The media modal documentation is almost non-existant.

Thanks

• attachments
• media
• media-modal

Share Improve this question edited May 27, 2019 at 12:22 tru.d 18611 gold badge11 silver badge1717 bronze badges asked Feb 25, 2015 at 8:33 leemonleemon 2,01244 gold badges2222 silver badges5151 bronze badges 4

• IIRC those are just Backbone/Underscore views. In other words, when you update the model, it should update the view by itself as the "ModelView" should trigger that. – kaiser Commented Feb 25, 2015 at 10:01
• Well, the this.controller.state().addAttachment() function is just an AJAX call using wp.media.post(), so I'd need to trigger an hypothetical "model updated" event somewhere after this AJAX call. Any ideas? – leemon Commented Feb 25, 2015 at 10:49
• "Any ideas?" - currently, no. This is something where I'd have to invest quite some time to read through core (which I don't have now). About your comment: There's MarkDown available (See "help" below "add comment" button). – kaiser Commented Feb 25, 2015 at 11:23
• wordpress.stackexchange.com/questions/78230/… – Pribhav Commented Nov 23, 2017 at 7:30

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2

You can checkout this link https://codex.wordpress.org/Javascript_Reference/wp.media

jQuery(function($){

  // Set all variables to be used in scope
  var frame,
      metaBox = $('#meta-box-id.postbox'), // Your meta box id here
      addImgLink = metaBox.find('.upload-custom-img'),
      delImgLink = metaBox.find( '.delete-custom-img'),
      imgContainer = metaBox.find( '.custom-img-container'),
      imgIdInput = metaBox.find( '.custom-img-id' );

  // ADD IMAGE LINK



addImgLink.on( 'click', function( event ){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( frame ) {
      frame.open();
      return;
    }

    // Create a new media frame
    frame = wp.media({
      title: 'Select or Upload Media Of Your Chosen Persuasion',
      button: {
        text: 'Use this media'
      },
      multiple: false  // Set to true to allow multiple files to be selected
    });


    // When an image is selected in the media frame...
    frame.on( 'select', function() {

      // Get media attachment details from the frame state
      var attachment = frame.state().get('selection').first().toJSON();

      // Send the attachment URL to our custom image input field.
      imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );

      // Send the attachment id to our hidden input
      imgIdInput.val( attachment.id );

      // Hide the add image link
      addImgLink.addClass( 'hidden' );

      // Unhide the remove image link
      delImgLink.removeClass( 'hidden' );
    });

    // Finally, open the modal on click
    frame.open();
  });


  // DELETE IMAGE LINK
  delImgLink.on( 'click', function( event ){

    event.preventDefault();

    // Clear out the preview image
    imgContainer.html( '' );

    // Un-hide the add image link
    addImgLink.removeClass( 'hidden' );

    // Hide the delete image link
    delImgLink.addClass( 'hidden' );

    // Delete the image id from the hidden input
    imgIdInput.val( '' );

  });

});

Try out:

wp.media.editor.get(wpActiveEditor).views._views[".media-frame-content"][0].views._views[""][1].collection.props.set({ignore:(+(new Date()))})

Seems like there must be an easier way but that works for me in the meantime!

A more better way to do it:

wp.media.frame.content.get('gallery').collection.props.set({‌​ignore: (+ new Date())});, 

in this case i'm refreshing the gallery tab.

Try both of the above codes and see which one works best for you.

This works in the latest version of WordPress which is now 6.5:

wp.media.frame.content.get().collection._requery(true);
wp.media.frame.content.get().options.selection.reset();

本文标签：