WordPress adding ajax to a tinymce plugin

Hello can someone help me with this problem. I have a tinyce button which calls a container. Ajax is calling the content which is in the container but what i want is for a resposnse to be given when i change the value of the select box. When the value is changed it should send to the ajax and just return a value so i know it is working but it returns no value . I am sorry if i can’t explain the problem well enough but pleae take a look

<?php
    /*
    Plugin name: Subscribe button;
    */
    function buttonsAndAjax(){
        wp_enqueue_script( 'addAjax', plugins_url( '/scallImageSlider.js', __FILE__ ), array('jquery'), '1.0', true );
        wp_localize_script( 'addAjax', 'sliderButton', array(
            'ajax_url' => admin_url( 'admin-ajax.php' )
        ));
    }
    add_action('admin_enqueue_scripts', 'buttonsAndAjax');


    add_action('wp_ajax_GetPostDetails', 'GetPostDetails');
    add_action('wp_ajax_nopriv_GetPostDetails', 'GetPostDetails');
    function GetPostDetails(){

    ?>
                <select id="selectImgShape" class="selectBox">
                    <option value="Select" selected>Select</option>
                    <option value="">Default</option>
                    <option value="img-circle">Circle</option>
                    <option value="img-rounded">Rounded</option>
                    <option value="img-thumbnail">Thumbnail</option>
                </select>
    <?php

        wp_die();
    }

    add_action('wp_ajax_selectImgShape', 'selectImgShape');
    add_action('wp_ajax_nopriv_selectImgShape', 'selectImgShape');
    function selectImgShape(){
        echo "hello world";
    }
?>

js code

(function() {
    tinymce.PluginManager.add('ImageSlider', function( editor, url ) {
function openContainerForSlider() {
    jQuery(document).ready( function($) {
/* Get from elements values */
alert('ajax added');
//ADD THE CONTAINER 
        $.ajax({
            url: sliderButton.ajax_url,
            type: "POST",
            data: {
                action:"GetPostDetails"
            },
            success: function (response){

                // you will get response from your php page (what you echo or print)                 
                $('.mce-window-body').html(response);
            },
            error: function(jqXHR, textStatus, errorThrown){
               alert("error");
            }
        });
    //JUST SHOW SOMETHING WHEN THE SELECTOR FROM THE CONTAINER IS CHANGED
        $('#selectImgShape').change(function(e){
            e.preventDefault();
            alert("shape is being changed");
        var selectImgShape = $('#selectImgShape').val();
            $.ajax({
                type: "POST",
                url: sliderButton.ajax_url,
                data:{
                    action: 'selectImgShape',
                    selectImgShape:selectImgShape
                },
                success: function(response){
                    alert("shape changed");
                },
                error: function(response){
                    alert("shape not changed");
                    alert(response);
                }
            })
        })
    });
}



editor.addButton( 'ImageSlider', {
    title: "Add sldier", // title of the button
    image: url + '/lion.jpg',
    onclick: function(){
        editor.windowManager.open({
            title: 'Image slider',
            width:800,
            height:450,
            body:[
                openContainerForSlider()                
            ],
            onSubmit: function(e) {

            }
        })
    }
});
});
})(); 

Read more here: WordPress adding ajax to a tinymce plugin

Leave a Reply

Your email address will not be published. Required fields are marked *