TinyMCE buttons that launch Ajax-generated forms

Question

if i follow the tutorials on how to add tinyMCE buttons for shortcodes

( for instance: http://www.garyc40.com/2010/03/how-to-make-shortcodes-user-friendly/ )

if i create a button that launches a form in a thickbox there is always this bit of code to create the launched form:

// executes this when the DOM is ready
    jQuery(function(){
        // creates a form to be displayed everytime the button is clicked
        // you should achieve this using AJAX instead of direct html code like this
        var form = jQuery('<div id="kiaAWeber-form"><table id="mygallery-table" class="form-table">\
            <tr>\
                <th><label for="mygallery-columns">Columns</label></th>\
                <td><input type="text" id="mygallery-columns" name="columns" value="3" /><br />\
                <small>specify the number of columns.</small></td>\
            </tr>\

        </table>\
        <p class="submit">\
            <input type="button" id="mygallery-submit" class="button-primary" value="Insert Gallery" name="submit" />\
        </p>\
        </div>');

        var table = form.find('table');
        form.appendTo('body').hide();

but i am curious about this part in particular :

// you should achieve this using AJAX instead of direct html code like this

i've seen this on other tutorials, and in other plugins.... but all i've seen continue to do it this hard-coded way. does anyone have any insight into how to do this via ajax?

i'd like to popular a select drop-down with values from get_options().. which i cannot do in jquery/java and the js file can't process the php either, so i figured ajax is the solution i'm just not sure how to start

Answer 1

by using jQuery.ajax():

so, instead of that big form variable:

$.ajax({
  type: 'GET',
  url: 'admin-ajax.php',
  data: { action: 'get_my_form' },
  success: function(response){
    var table = $(response).find('table'); // you don't seem to use this "table" var
    $(response).appendTo('body').hide();
    // ...
  }
});

Now, the php:

add_action('wp_ajax_get_my_form',  'get_my_form');

function get_my_form(){
  // build your form here and echo it to the screen
  exit;
}