Title: TinyMCE Custom Button with AJAX
Last modified: August 24, 2016

---

# TinyMCE Custom Button with AJAX

 *  [Charlie](https://wordpress.org/support/users/cdarling/)
 * (@cdarling)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/tinymce-custom-button-with-ajax/)
 * I’m trying to create a simple proof-of-concept for a custom TinyMCE button in
   the WordPress post editor that, when clicked, will use AJAX to send “Hello World”
   to the server, then get “Hello World — GOT IT” back from the server.
 * I’ve got the whole custom-TinyMCE-button part working just fine. And I’ve got
   the AJAX send/receive working fine. But the problem is that the AJAX send/receive
   isn’t happening when the user clicks the custom button — it seems to happen as
   soon as the page loads!
 * The code below is what I pieced together from a bunch of examples I found on 
   the Web (I’m not a JS programmer!). None of the examples were exactly what I 
   was looking for, and that’s probably where the problem lies.
 *     ```
       ( function() {
           // This code belongs in /wp-includes/js/tinymce/plugins/beacon_clean/plugin.js
           tinymce.PluginManager.add( 'fb_test', function( editor, url ) { 
   
               // Add a button
               editor.addButton( 'fb_test_button_key', { 
   
                   text: 'Test Button -',
                   icon: false,
                   onclick:
       		jQuery(document).ready(function($) {
   
       		    data = {
       		    	action: 'aad_get_results',
       		    	data_passed: 'Hello World'
       		    };
   
       		    $.post(ajaxurl, data, function (response) {
       			alert('Got this from the server: ' + response);
       		    });
       		    return false;
       		}) // jQuery.ready function
   
       	} ); // editor.addButton
           } ); // pluginManager
       } )(); // containing function
       ```
   
 * The custom button appears in the WordPress post editor just fine; the alert box
   appears with the modified test data from the server just fine. But the alert 
   box appears as soon as the page loads — it doesn’t wait for the user to click
   the custom button!
 * What do I need to change to make the AJAX call happen only when the user clicks
   the button?
 * Thanks!

Viewing 1 replies (of 1 total)

 *  Thread Starter [Charlie](https://wordpress.org/support/users/cdarling/)
 * (@cdarling)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/tinymce-custom-button-with-ajax/#post-6084679)
 * With some help from my friends Woody Hayday and Jake Brown, I think I’ve got 
   it working:
 *     ```
       ( function() {
           // This code belongs in /wp-includes/js/tinymce/plugins/beacon_clean/plugin.js
           tinymce.PluginManager.add( 'fb_test', function( editor, url ) { 
   
               // Add a button
               editor.addButton( 'fb_test_button_key', { 
   
                   text: 'Test Button -',
                   icon: false,
                   onclick: beacon_clean_AJAX
   
       	} ); // editor.addButton
           } ); // pluginManager
       } )(); // containing function
   
       function beacon_clean_AJAX ($) {
   
           jQuery(document).ready(function($) {
               data = {
               	action: 'aad_get_results',
       	    	data_passed: 'Hello World'
               };
               $.post(ajaxurl, data, function (response) {
       			alert('Got this from the server: ' + response);
       		    });
               return false;
           }) // jQuery.ready function
   
       } // beacon_clean_AJAX function
       ```
   
 * On the server, it needs this PHP code:
 *     ```
       // Process whatever AJAX sends us
       function aad_process_ajax() {
       	$data_passed = $_POST['data_passed'];
       	echo $data_passed . ' -- GOT IT!';
       	// After processing AJAX, this PHP function must die
       	wp_die();
       }
       add_action('wp_ajax_aad_get_results', 'aad_process_ajax');
       ```
   
 * Very, very tricky stuff, but it seems to work. I now have proof-of-concept for
   a button in the TinyMCE editor that uses AJAX to send/receive data to/from the
   server when the user clicks the button. Woo-hoo!

Viewing 1 replies (of 1 total)

The topic ‘TinyMCE Custom Button with AJAX’ is closed to new replies.

## Tags

 * [ajax](https://wordpress.org/support/topic-tag/ajax/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 1 reply
 * 1 participant
 * Last reply from: [Charlie](https://wordpress.org/support/users/cdarling/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/tinymce-custom-button-with-ajax/#post-6084679)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics