web-dev-qa-db-fra.com

Boutons TinyMCE qui lancent les formulaires générés par Ajax

si je suis les tutoriels sur la façon d'ajouter des boutons tinyMCE pour les codes courts

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

si je crée un bouton qui lance un formulaire dans une boîte épaisse, il y a toujours ce morceau de code pour créer le formulaire lancé:

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

mais je suis curieux de cette partie en particulier:

// vous devriez y parvenir en utilisant AJAX au lieu d'un code HTML direct comme ceci

je l'ai vu dans d'autres tutoriels et dans d'autres plugins ... mais tout ce que j'ai vu continue de le faire de manière codée en dur. est-ce que quelqu'un a un aperçu de comment faire cela via ajax?

je voudrais populariser un menu déroulant de sélection avec les valeurs de get_options () .. ce que je ne peux pas faire dans jquery/Java et le fichier js ne peut pas traiter le php non plus, donc j'ai pensé que ajax est la solution que je suis je ne sais pas comment commencer

1
helgatheviking

en utilisant jQuery.ajax () :

alors, au lieu de cette grande variable de formulaire:

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

Maintenant, le 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