Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question

1 Answer 1

up vote 0 down vote accepted

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;
}
share|improve this answer
    
almost- actually looks like i am doing almost exactly what you were doing in this question: wordpress.stackexchange.com/questions/14974/… you selected an answer, but i'm not sure how that worked since it looks like you'd be parsing php in a js file. what did you end up using for tb_show() ? –  helgatheviking Aug 7 '11 at 21:54
    
Your not parsing PHP, but HTML. You're just calling a page that's being generated with PHP, using javascript, ie. admin-ajax.php?action=get_my_form, and the output of that page is sent to you as response in the success() function. My case was similar, the only difference is that my javascript code was inline, so I used PHP to generate the URL. Are you using the thickbox script? –  onetrickpony Aug 7 '11 at 22:41
    
tb_show( 'Insert AWeber Form', ajaxurl + '?action=get_my_form' ); is the difference. tb_show() wasn't working for me w/ the dynamically added divs. in your other question i was thrown off by the add_query_arg which is def php, but you've explained that since your script is inline. i don't think you need the $.ajax call in that case do you? –  helgatheviking Aug 8 '11 at 2:26
    
If you're using thickbox, no. They do pretty much the same thing. –  onetrickpony Aug 8 '11 at 9:21

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.