如何從Wordpress Thickbox傳遞值？

Question

我目前正在開發一個自定義Wordpress插件，它需要用戶在表單中創建一個列表，並且爲了幫助他們填充他們的列表，我已經實現了Wordpress Thickbox。我已經制作了Thickbox顯示屏以及我想要的內容，但是我正在努力做的是將數據傳回原始形式。

原始形式是這樣的：

<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> 

就像你所期望的任何形式進行。基本上，我想從模態信息通過我的字符串返回input_for_data

模態中的代碼有多個表中的行這樣的：

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

基本上我想要做的是建立一個數組每個點擊複選框的值，然後使用JavaScript的分割函數將其轉換爲一個字符串，我將返回到模態外的輸入字段。

任何和所有的幫助，非常感謝。我寧願一個Javascript/JQuery的解決了這個

Answer 1

我用這個教程做你想要的東西： https://code.tutsplus.com/tutorials/getting-started-with-the-wordpress-media-uploader--cms-22011

我的代碼如下所示：

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