2016-11-18 1 views
4

Je travaille actuellement sur un plugin Wordpress personnalisé qui oblige l'utilisateur à créer une liste dans un formulaire, et ainsi pour les aider à remplir leur liste, j'ai implémenté la WordPress Thickbox. J'ai fait l'affichage de Thickbox, avec le contenu que je voudrais, mais ce que j'ai du mal à faire est de retransmettre les données dans le formulaire original.Comment puis-je transmettre une valeur d'un Thickbox Wordpress?

La forme originale est comme ceci:

<input name="input_that_wants_data" id="input_for_data" type="text" /> 
<a href="#TB_inline?width=600&height=550&inlineId=my-content-id" class="thickbox">Click Here for Modal</a> 

Tout comme vous attendez quelque forme que ce soit. Fondamentalement, je veux l'information du modal de passer ma chaîne de retour à la input_for_data

Le code à l'intérieur du modal a plusieurs lignes de table comme ceci:

<td><input type="checkbox" class="modal_checkbox_class" value="'.$data->value.'"></td> 

Fondamentalement, ce que je voudrais faire est de construire un tableau des valeurs de chaque case à cocher cliquée, puis utilisez la fonction split de Javascript pour la transformer en une chaîne que je retournerais dans le champ de saisie en dehors du modal.

Toute aide est grandement appréciée. Je préférerais un Javascript/solution JQuery à ce

Répondre

2

J'ai utilisé ce tutoriel pour faire quelque chose que vous voulez: https://code.tutsplus.com/tutorials/getting-started-with-the-wordpress-media-uploader--cms-22011

Mon code ressemble à ceci:

function renderMediaUploader() { 
    'use strict'; 

    var file_frame, image_data; 

    /** 
    * If an instance of file_frame already exists, then we can open it 
    * rather than creating a new instance. 
    */ 
    if (undefined !== file_frame) { 

     file_frame.open(); 
     return; 

    } 

    /** 
    * If we're this far, then an instance does not exist, so we need to 
    * create our own. 
    * 
    * Here, use the wp.media library to define the settings of the Media 
    * Uploader. We're opting to use the 'post' frame which is a template 
    * defined in WordPress core and are initializing the file frame 
    * with the 'insert' state. 
    * 
    * We're also not allowing the user to select more than one image. 
    */ 
    file_frame = wp.media.frames.file_frame = wp.media({ 
     title: 'Select or Upload Media Of Your Chosen Persuasion', 
      button: { 
      text: 'Use this media' 
      }, 
     multiple: true 
    }); 

    //add items from thickbox to table 
    file_frame.on('select', function() { 

     var attachment = file_frame.state().get('selection').toJSON(); 

     jQuery.each(attachment, function(i, val){ 
      jQuery('table').show(); 
      jQuery('table tbody').append('<tr class="table_row"><td class="col-sm-2"><img class="img-responsive" src="'+val.url+'"></td><td class="col-sm-8"><input style=" display: block;" type="text" name="entry[url][]" value="'+ val.url +'"></td></tr>'); 
     }); 


    }); 

    // Now display the actual file_frame 
    file_frame.open(); 

} 

(function($) { 
    'use strict'; 

    $(function() { 
     $('#set-footer-thumbnail').on('click', function(evt) { 

      // Stop the anchor's default behavior 
      evt.preventDefault(); 

      // Display the media uploader 
      renderMediaUploader(); 

     }); 

    }); 

})(jQuery); 
+0

Merci pour revenir à moi. J'utilise WordPress Thickbox, et pour ce faire, j'utilise simplement les scripts wordpress thickbox. Puisqu'il s'agit d'une thickbox personnalisée et non de l'uploader de médias, comment devrais-je obtenir la thickbox qu'elle appelle? Serait-ce encore un média? – Grimace

+0

Je viens de regarder votre code édité, et il a cliqué pour moi maintenant. Je comprends enfin ce qu'il fait. Merci beaucoup pour ça. C'est parfait. Je l'ai fait manager pour obtenir une solution de contournement en utilisant $('#input_for_data', window.parent.document).val(data); mais votre méthode a fonctionné beaucoup mieux et était beaucoup plus propre – Grimace

+0

de rien ;-) – JanuszO