web-dev-qa-db-fra.com

Utiliser l'upload de média dans un plugin personnalisé

En tant que widget que je crée, j'ai besoin de l'administrateur pour télécharger une image via le panneau des widgets. J'ai le code suivant sous une nouvelle classe.

<?php
function form($instance) {
   $instance = wp_parse_args( (array) $instance, array( 'qrimage'=> '');
   $qrimage=$instance['qrimage']; ?>

<label for="<?php echo $this->get_field_id('qrimage'); ?>">
      Upload QR Image:
<input class="wide" 
       id="<?php echo $this->get_field_id('qrimage'); ?>" 
       name="<?php echo $this->get_field_id('qrimage'); ?>" 
       type="text" 
       value='<?php echo attribute_escape($qrimage); ?>' />
Upload Image 
<label for="uploadi<?php echo $this->get_field_id('qrimage'); ?>"> 
   <input class="uploadi<?php echo $this->get_field_id('qrimage'); ?>" 
          name="uploadi<?php echo $this->get_field_id('qrimage'); ?>" 
          id="uploadi<?php echo $this->get_field_id('qrimage'); ?>" 
          value="Upload Image" type="button" />
</label>

<script type="text/javascript">
      var formfield = '';
      var imgurl ='';
      jQuery(document).ready(function() {
        jQuery('.uploadi<?php echo $this->get_field_id('qrimage');?>').click(function() {
         formfield = jQuery('#<?php echo $this->get_field_id('qrimage'); ?>').attr('name');
         tb_show('', 'media-upload.php?type=image&amp&TB_iframe=1');
         return false;
        });

        // send url back to plugin editor
        window.send_to_editor = function(html) {
         imgurl = jQuery('img',html).attr('src');
         jQuery('#<?php echo $this->get_field_id('qrimage'); ?>').val(imgurl);
         tb_remove();
        }

        });
  </script>

La chose est ... si j'ai 1 instance du widget sur le panneau des widgets, tout fonctionne bien.

Une fois que j'ai ajouté une autre instance, tout fonctionne sur la première instance mais sur la seconde, je ne peux pas enregistrer l'image. Le champ de texte obtient la valeur, mais la sauvegarde l'enlève tout simplement.

Des pensées pourquoi?

Merci

pluginswidgetsmediaoop
3
lior

Le code de sortie de la méthode form du widget est ajouté à la page une fois pour chaque instance du widget (y compris l'instance "factice" contenue dans le panneau "widgets disponibles"). Ainsi, dans votre cas, le code javascript qui définit la fonction window.send_to_editor peut apparaître davantage. qu'une fois, et la dernière instance remplace les précédentes. Il y a au moins deux raisons pour lesquelles le code javascript n'est pas généré par la méthode form:

  1. Lorsque vous créez une nouvelle instance d'un widget (par glisser-déposer), le code html du "dummy" (marqué avec __i__ index) est copié dans le widget nouvellement créé et l'index est remplacé par un nombre, mais les gestionnaires d'événements ne sont pas copiés, le nouveau widget peut donc ne pas se comporter comme prévu.
  2. Lorsque vous enregistrez un widget, les données sont envoyées via ajax au serveur et le résultat de la méthode form est renvoyé à la page, puis ajouté dynamiquement au DOM. Selon la documentation jQuery , "tout code JavaScript incorporé dans les données extraites est exécuté avant que le code HTML ne soit renvoyé sous forme de chaîne", ce qui peut entraîner des comportements étranges. (En outre, tous les navigateurs ne se comportent pas de la même manière à ce sujet).

Je vous recommande de placer votre code javascript dans un fichier js séparé et de l'inclure dans l'en-tête de page en utilisant wp_enqueue_script et d'utiliser jQuery live méthode d’ajout de gestionnaires d’événements. Vous pouvez utiliser un gestionnaire d'événements générique pour toutes les instances, puis rechercher les éléments DOM appropriés pour appliquer les actions pertinentes. Exemple:

jQuery('input[id^=uploadi]').live('click', function() {
     formfield = jQuery('input[id^=qrimage]', jQuery(this).closest('.widget')).attr('name');
     tb_show('', 'media-upload.php?type=image&amp;TB_iframe=1');
     return false;
});

Remarque: remplacez le sélecteur qrimage dans le code ci-dessus (non testé) par le préfixe de votre champ.

P.s. J'ai aussi remarqué une faute de frappe dans l'URL media-upload.php?type=image&amp&TB_iframe=1

1
marcochiesi