javascriptjquerywordpressthickbox

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


I am currently working on a custom Wordpress plugin which requires the user to create a list in a form, and so to help them populate their list, I have implemented the Wordpress Thickbox. I have made the Thickbox display, with the content I would like, however what I am struggling to do is pass the data back to the original form.

The Original Form is like this:

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

Just like you would expect any form to be. Basically I want the information from the modal to pass my string back to the input_for_data

The code inside the modal has multiple table rows like this:

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

Basically what I would like to do is build an array of the values of each clicked checkbox, and then use the split function of Javascript to turn it into a string which I would return to the input field outside of the modal.

Any and all help is greatly appreciated. I would prefer a Javascript/JQuery solution to this


Solution

  • I used this tutorial to do something that you want: https://code.tutsplus.com/tutorials/getting-started-with-the-wordpress-media-uploader--cms-22011

    My code looks like this:

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