Wordpress Meta box with ajax

Question

this time i would add a wordpress meta_box calling wp_ajax.

I tried this but doesn't works.

add_action('add_meta_boxes', 'add_custom_meta_box', 'post_type');

    function add_custom_meta_box($post_type) {
        if ($post_type == 'minisites') {
            add_meta_box('sections_meta_box', 'Add Section', 'show_custom_meta_box');
    //        echo Utils::createStructureBox();
        }
        if ($post_type == 'sections') {
            add_meta_box('sections_structure_box', 'Section Structure', 'show_section_structure_box');
        }

    }

    function show_custom_meta_box() {
        echo Utils::createSelect();
        echo Utils::includeScripts();
    }

    function show_section_structure_box() {
        echo "Done";
    }

    add_action('wp_ajax_addStructureBox', 'addStructureBox');

    function addStructureBox() {
        add_custom_meta_box('sections');
    }

and jquery

$(document).ready(function () {
    $('.addSection').on('click', function () {
        var selectedSection = $('#sections option:selected').text();
        $.post(ajaxurl, {action: 'addStructureBox', section: selectedSection}, function (data) {
            alert(data);
        });
    });
});

it seems ok but call add_custom_meta_box in addStructureBox doesn't works apparently.

So any ideas?

Thanks in advance

Giuseppe

Edit: html code

public static function createSelect() {
    $sections = get_posts(array(
        'post_type' => 'sections')
    );
    $html = '<select id="sections" name="item[]">';
    foreach ($sections as $section) {
        $html .= '<option value="' . $section->ID . '">' . $section->post_title . '</option>';
    }
    $html .= '</select><br><br>';
    $html .= '<input type="button" class="button button-primary button-large addSection" id="add" value="Add"></button>';
    return $html;
}

Edit: screenshot

Answer 1

Custom ajax meta boxes using ajax can be done using below method.

//Add default meta box 
add_action('add_meta_boxes_{post_type}', 'add_custom_meta_box_post');
function add_custom_meta_box_{post_type}($post) {       
    add_meta_box('sections_meta_box', 'Add Section', 'show_custom_meta_box');           
}   


function show_custom_meta_box() {
    //In your case you can use your html::functions 
    //Your html for select box 
    $sections = array('section1','section2');
    $html = '<select id="sections" name="item[]">';
    foreach ($sections as $key=>$section) {
        $html .= '<option value="' . $key . '">' . $section . '</option>';
    }
    $html .= '</select><br><br>';
    $html .=    '<input  class="addSection" type="button" value="Add Section">'  ;
    echo $html;
}

//Our custom meta box will be loaded on ajax 
function add_custom_meta_box($post_name){   
        echo '<div id="sections_structure_box" class="postbox ">
        <div class="handlediv" title="Click to toggle"><br></div><h3 class="hndle ui-sortable-handle"><span>Section Structure</span></h3>
        <div class="inside">
            Done
        </div>';
}

//Call ajax
add_action('wp_ajax_addStructureBox', 'addStructureBox');
//add_action('wp_ajax_noprev_addStructureBox', 'addStructureBox');
function addStructureBox() {    
    add_custom_meta_box($_POST['section']);
    exit;
}

//In your case you can add script in your style
//Add script
add_action('admin_head','ajax_script');
function ajax_script(){ ?>
    <script>
    jQuery(document).ready(function ($) {
        $('.addSection').on('click', function () {
            var selectedSection = $('#sections option:selected').text();
            $.post(ajaxurl, {action: 'addStructureBox', section: selectedSection}, function (data) {
                $('#sections_meta_box').parent().append(data);
            });
        }); 
    });
    </script>
<?php
}