Comment déclencher une actualisation dans le modal média

Je suis en train de développer un plugin qui ajoute un nouvel onglet au modal multimédia, et j'ai besoin de savoir comment déclencher une actualisation de l'onglet des pièces jointes pour qu'il affiche les pièces jointes nouvellement ajoutées. Voici le code que j'utilise:

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

Toute aide serait appréciée. La documentation modale média est quasiment inexistante.

Merci

attachments media media-modal

— leemon
source

IIRC ce ne sont que des vues Backbone / Underscore. En d'autres termes, lorsque vous mettez à jour le modèle, il doit mettre à jour la vue par lui-même car le "ModelView" doit déclencher cela.

— kaiser

Eh bien, la this.controller.state().addAttachment()fonction est juste un appel AJAX utilisant wp.media.post(), donc je devrais déclencher un événement hypothétique "modèle mis à jour" quelque part après cet appel AJAX. Des idées?

— leemon

"Des idées?" - Actuellement non. C'est quelque chose où je devrais investir un certain temps pour lire le noyau (que je n'ai pas maintenant). À propos de votre commentaire: MarkDown est disponible (voir le bouton "Aide" ci-dessous "Ajouter un commentaire").

— kaiser

wordpress.stackexchange.com/questions/78230/…

— Pribhav

Réponses:

Vous pouvez consulter ce lien 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( '' );

  });

});

— Rajilesh Panoli
source

Essaie:

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

On dirait qu'il doit y avoir un moyen plus simple mais ça marche pour moi en attendant!

Une meilleure façon de le faire:

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

dans ce cas, je rafraîchis l'onglet de la galerie.

Essayez les deux codes ci-dessus et voyez celui qui vous convient le mieux.

— trusha
source

Cela m'a été utile! Merci.

— Siddhesh Shirodkar

oui cela a fonctionné pour moi aussi.

— Amol Bhandari SJ