web-dev-qa-db-ja.com

Ajax生成フォームを起動するTinyMCEボタン

私がショートコードのためのtinyMCEボタンを追加する方法に関するチュートリアルに従うならば

（例： http://www.garyc40.com/2010/03/how-to-make-shortcodes-user-friendly/ ）

thickboxでフォームを起動するボタンを作成した場合、起動フォームを作成するためのコードは常に次のようになります。

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

しかし、私は特にこの部分について興味があります。

//このような直接のHTMLコードの代わりにAJAXを使用してこれを実現する必要があります

私は他のチュートリアルや他のプラグインでこれを見てきました....しかし私が見たことはすべてこのハードコーディングされた方法でそれを続けています。誰もがAjaxを介してこれを行う方法について何か洞察力を持っていますか？

私はjquery/Javaではできないし、jsファイルもphpを処理できないので、get_options（）の値を使った選択ドロップダウンを人気があるので、私はajaxがちょうどいい解決策だと考えました起動方法がわからない

tinymceshortcode
1
helgatheviking

jQuery.ajax（） を使用して：

だから、その大きなフォーム変数の代わりに：

$.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();
    // ...
  }
});

さて、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;
}
0
onetrickpony