wake-up-neo.net

Aktualisieren Sie wp.media nach einem Ajax-Aufruf

Ich erstelle ein Plugin, mit dem ich dem Medienmanager einen Tab hinzufügen und Inhalte aus einer anderen Quelle hinzufügen kann. Ich füge die Registerkarte hinzu, die einen iframe erzeugt:

add_filter('media_upload_tabs', 'add_myUpload_tab');
function add_myUpload_tab($tabs) {
    $tabs['myTab'] = "My tab";
    Return $tabs;
}
add_action('media_upload_myTab', 'add_myUpload_save_page');
function add_myUpload_save_page() {
    wp_iframe( 'myTab_save_frame' );
}
function myTab_save_frame()
{
    echo media_upload_header();
    ?><iframe to my other source/><?php
    /*** More code below ***/
}

Kurz gesagt, es gibt einen Iframe im Iframe. :) Der wp-Codex hatte einen iframe im Beispiel, aber ich weiß, dass es ohne funktioniert. Wie auch immer.

Wenn ich in meinem Iframe herumspiele und dabei einen Knopf drücke, sendet diese Seite im Iframe eine Nachricht. In dem "Mehr Code unten", den ich oben geschrieben habe, habe ich diesen Code:

<script>
    window.addEventListener('message', function(event) {
        //Setup variables
        var answer = event.data,
            wp = parent.wp;
        answer.url = answer.url.replace(/\.\w+$/ig,'');
        var data = {
          'action': 'add_my_image',
          'file': answer.url
        };
        jQuery.post(ajaxurl, data, function(response) {
            alert('My image was uploaded');
            /** From here and i below I want to do my wp.media stuff **/
        });
    });
</script>

Und ja, ich bin mir bewusst, dass ich keine Nonce sende. Dies ist nur zum Testen. Funktioniert alles. Was ich jetzt erreichen möchte, ist, wp.media zu veranlassen, die Bibliothek in der Registerkarte "Medien hinzufügen" -> "Bibliothek" zu aktualisieren. Und hier scheitere ich.

Ich fand diesen Thread aber nichts hier hilft wirklich. Wie Sie sehen können, habe ich wp als parent.wp deklariert, um das wp.media-Zeug aufzurufen, da ich im wp_iframe bin.

Bisher habe ich es geschafft, den Status so zu ändern, dass die Bibliothek angezeigt, aber nicht aktualisiert wird. Das kann ich machen mit:

wp.media.frame.setState('insert');

aber das seltsame ist, dass danach kein js mehr läuft. Wenn ich zum Beispiel die Zeile console.log ('Hallo Welt') hinzufüge; Nach dieser Zeile ist die Konsole still.

Ich vermute deshalb, dass ich es aktualisieren muss, bevor ich den Zustand einstelle?

Irgendwelche Ideen, wie man einen anderen Frame/Status/Tab (die Bibliothek) auswählt, aktualisiert und (wenn möglich - nicht erforderlich) dorthin wechselt?

4
gubbfett

Also bin ich deinen Links gefolgt und das funktioniert für mich. Dieser Test funktioniert genauso für meine Upload-Rückrufe. Hoffentlich funktioniert er auch für Sie.

Im iframe

function myTab_save_frame()
{
    global $redir_tab;

    $redir_tab = 'mytab';

    media_upload_header(); ?>

    <button>Test Trigger</button>

    <script>
        var switchAndReload = function() {

            // get wp outside iframe

            var wp = parent.wp;

            // switch tabs (required for the code below)

            wp.media.frame.setState('insert');

            // refresh

            if( wp.media.frame.content.get() !== null) {
                wp.media.frame.content.get().collection.props.set({ignore: (+ new Date())});
                wp.media.frame.content.get().options.selection.reset();
            } else {
                wp.media.frame.library.props.set ({ignore: (+ new Date())});
            }
        };

        jQuery('button').on('click', function(evt){

            // do upload logic...

            // upload completed.

            // refresh library!

            switchAndReload();
        });
    </script>
    <?php 
}
5
jgraup