So lösen Sie eine Aktualisierung im Medienmodal aus


12

Ich entwickle ein Plugin, das dem Medien-Modal einen neuen Tab hinzufügt, und ich muss wissen, wie die Registerkarte Anhänge aktualisiert werden kann, damit neu hinzugefügte Anhänge angezeigt werden. Dies ist der Code, den ich benutze:

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

Jede Hilfe wäre dankbar. Die medienmodale Dokumentation ist nahezu nicht vorhanden.

Vielen Dank


IIRC das sind nur Backbone / Underscore Views. Mit anderen Worten, wenn Sie das Modell aktualisieren, sollte es die Ansicht von selbst aktualisieren, da die "ModelView" dies auslösen sollte.
Kaiser

Nun, die this.controller.state().addAttachment()Funktion ist nur ein AJAX-Aufruf, mit dem wp.media.post()ich irgendwo nach diesem AJAX-Aufruf ein hypothetisches "model updated" -Ereignis auslösen muss. Irgendwelche Ideen?
Leemon

"Irgendwelche Ideen?" - zurzeit nicht. Dies ist etwas, in das ich ziemlich viel Zeit investieren muss, um den Kern durchzulesen (was ich jetzt nicht habe). Zu Ihrem Kommentar: Es ist MarkDown verfügbar (siehe "Hilfe" unter "Kommentar hinzufügen").
Kaiser

Antworten:


2

Sie können diesen Link https://codex.wordpress.org/Javascript_Reference/wp.media auschecken

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

  });

});

1

Ausprobieren:

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

Es scheint, dass es einen einfacheren Weg geben muss, aber das funktioniert in der Zwischenzeit für mich!

Ein besserer Weg, es zu tun:

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

In diesem Fall aktualisiere ich die Registerkarte Galerie.

Probieren Sie beide oben genannten Codes aus und finden Sie heraus, welcher für Sie am besten geeignet ist.


1
Das war hilfreich für mich! Vielen Dank.
Siddhesh Shirodkar

1
Ja, das hat auch bei mir funktioniert.
Amol Bhandari SJ
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.