web-dev-qa-db-fra.com

Actualiser wp.media après un appel ajax

Je construis un plugin dans lequel j'ajoute un onglet au gestionnaire de média et je peux ajouter des éléments provenant d'une autre source. J'ajoute l'onglet avec celui-ci, qui génère un iframe:

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 ***/
}

Donc, en bref, il y a un iframe dans l'iframe. :) Le codex wp avait un iframe dans l'exemple mais je sais que cela fonctionne sans celui-ci. De toute façon.

Lorsque je joue dans mon iframe et qu’il appuie sur un bouton, cette page de l’iframe envoie un message. Dans le "plus de code ci-dessous" j'ai écrit ci-dessus, j'ai ce 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>

Et oui, je sais que je n'envoie pas de nonce. Ceci est juste pour les tests. Tout fonctionne. Ce que je veux maintenant faire, c'est demander à wp.media d'actualiser la bibliothèque dans l'onglet "Ajouter un média" -> "bibliothèque". Et c'est là que j'échoue.

J'ai trouvé ce fil mais rien ici n'aide vraiment. Comme vous pouvez le constater, depuis que je suis dans wp_iframe, j’ai déclaré wp en tant que parent.wp pour appeler le service wp.media.

Jusqu'à présent, j'ai réussi à modifier l'état afin d'afficher la bibliothèque, mais pas actualisé. Je peux le faire avec:

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

mais ce qui est étrange, c’est qu’après cela, js ne fonctionne plus. Si j’ajoute par exemple la ligne console.log ('Hello world'); après cette ligne, la console est silencieuse.

Par conséquent, je pense que je dois l'actualiser avant de définir l'état?

Des idées sur la manière de sélectionner un autre cadre/état/onglet (celui de la bibliothèque), de le rafraîchir et (si possible - pas nécessaire) de le remplacer?

uploadsjavascriptmediaiframemedia-modal
4
gubbfett

Donc, j'ai suivi vos liens et cela fonctionne pour moi. Ce test fonctionne de la même manière pour mes rappels de téléversement. J'espère que cela fonctionne pour vous.

Dans l'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