Using jQuery’s AJAX functionality within wordpress’ TinyMCE editor

I’ve written a custom TinyMCE plugin that gives me one more button which, when clicked, opens a modal window, allowing me to select images from my uploads, that can then be added as custom gallery in my post. I.e. by clicking the submit button a shortcode containing the ids of the selected images gets entered into the text of my post. So far, so good. That works as desired.
Now I’m trying not only enter the shortcode but also add a meta-value when clicking ‘submit’. Basically submitting my selection is done by the usual JavaScript-mechanism (no update to the database – just a string get added to the text). As there’s no php-action involved I thought I could do this with AJAX. The function looks like this:

function ajaxSubmit(id, argstring) {
    jQuery.post("../../add_post_meta.php", {
        post_id: id,
        key: 'bildstrecke',
        val: 'true',
        unique: 'true',
        security: '<?php echo $ajax_nonce ?>'
    }).success(function() {
        window.tinyMCE.execInstanceCommand('content', 'mceInsertContent', false, "[bildstrecke imgs=""+argstring+""]");
        tinyMCEPopup.editor.execCommand('mceRepaint');
        tinyMCEPopup.close();
    }).error(function(e, x) {
        console.log([e, x])
    });
    return false;
}

‘add_post_meta.php’ containes some php-code that adds the meta-value to the database:

Read More
<?php
@require('../../../../wp-config.php');

// check for permissions
if( !is_user_logged_in() || !current_user_can('edit_posts') ) {
    wp_die(__("You are not allowed to be here"));
}

add_action('wp_ajax_action', 'action_function');

function action_function() {
    check_ajax_referer('nonce');
    die();
}

add_post_meta((int)$_POST['post_id'], $_POST['key'], $_POST['val'], $_POST['unique']);
?>

However, executing the above JavaScript-function ‘ajaxSubmit’ results in an unspecified error resp. the call to ‘add_post_meta.php’ doesn’t get executed properly (in the console I see the call to the script but don’t get the right response – I see the script being called but only a forever rotating process-wheel appears).

Is there anything obvious that I’m doing wrong? The paths to the required files are all correct (and, of course, the jQuery-libs are properly linked in the HTML-headers).

Thanks for any hint,

Stefan

Related posts

Leave a Reply