Open a Thickbox with content trough AJAX

Question

I added a custom button to the TinyMCE editor, and I want to open WP's Thickbox when I click on it.

How can I make it so that the tb_show() function loads the content I want with ajax?

// the ajax
add_action('wp_ajax_getTheContent', 'getTheContent');
function getTheContent(){
  echo 'weqwtegeqgr'; // <- this should be displayed in the TB
  die();
}

Here's some of the editor plugin code I'm using:

init : function(ed, url) {
  ed.addButton('do_stuff', {
    title : 'Do Stuff',
    image : url + '/icon.gif',
    onclick : function() {
        OpenMyThickbox('do_stuff');
    }
  });
...

So the OpenMyThickbox javascript function should do what I want:

function OpenMyThickbox(tag){
  tb_show(tag, '...'); // <- how to load content trough ajax here ?
}

Answer 1

The second parameter for tb_show is the URL, so you'll want to use something like..

<?php 
$ajax_url = add_query_arg( 
    array( 
        'action' => 'getTheContent', 
        'query_var1' => 'value1', 
        'query_var2' => 'value2' 
    ), 
    admin_url( 'admin-ajax.php' ) 
); 
?>
tb_show(tag, '<?php echo $ajax_url; ?>' );

I'd guess you need to pass the action and any additional query vars manually(as per above), else your request is simply for admin-ajax.php, when what you are looking for is something along the lines of ... admin-ajax.php?action=getTheContent&someothervar=someothervalue, hence the add_query_arg usage above..

For clarification:

The following call to add_query_arg ...

add_query_arg( 
    array( 
        'action' => 'getTheContent', 
        'query_var1' => 'value1', 
        'query_var2' => 'value2' 
    ), 
    admin_url( 'admin-ajax.php' ) 
);

Is equivalent to and will produce ...

http://example.com/wp-admin/admin-ajax.php?action=getTheContent&query_var1=value1&query_var2=value2

However!

Having now explained myself i've come to realise we don't want the absolute URL and thus don't need the call to admin_url in there. The code should instead be.

<?php 
$ajax_url = add_query_arg( 
    array( 
        'action' => 'getTheContent', 
        'query_var1' => 'value1', 
        'query_var2' => 'value2' 
    ), 
    'admin-ajax.php'
); 
?>
tb_show(tag, '<?php echo $ajax_url; ?>'); 

So the resulting URL looks something like this..

admin-ajax.php?action=getTheContent&query_var1=valu1&query_var2=value2

Functions referenced in the above code samples:

• Add Query Arg
  http://codex.wordpress.org/Function_Reference/add_query_arg

• Admin URL
  http://codex.wordpress.org/Function_Reference/admin_url

Answer 2

Messing up javascript and PHP is not very clever. This answer only confuse.

tb_show is javascript add_query_arg is PHP

so this solution is only valid in PHP and the proper code is

...
?>
tb_show(
  'whatever',
  <?php echo add_query_arg( array(
    'action' => 'getTheContent',
    'query_var1' => 'value1',
    'query_var2' => 'value2',
  ), 'admin-ajax.php'); ?>
);
<?php
...

And in javascript is not valid at all as we can't use add_query_arg