带有ajax的Wordpress元框

时间:2016-09-19 10:28:28

标签: php jquery ajax wordpress meta-boxes

这次我会添加一个wordpress meta_box,调用wp_ajax。

我尝试了这个但是没有用。

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');
    }

和jquery

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

似乎没问题但是在addStructureBox中调用add_custom_meta_box显然不起作用。

所有想法?

提前致谢

朱塞佩

编辑:html代码

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;
}

编辑:截图

enter image description here

1 个答案:

答案 0 :(得分:1)

使用ajax自定义ajax元框可以使用以下方法完成。

//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
}