如何从 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

模态框内的代码有多个 table 行，如下所示：

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

基本上我想做的是构建一个包含每个单击复选框的值的数组，然后使用 Javascript 的拆分函数将其转换为一个字符串，我将 return到模态外的输入字段。

非常感谢任何帮助。我更喜欢 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 );

如何从 Wordpress Thickbox 中传递一个值？

How do I pass a value out of a Wordpress Thickbox?

javascript

wordpress

jquery

thickbox