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

    (@cdarling)

    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