在Wordpress中使用AJAX动态添加设置字段

时间:2013-11-01 08:36:09

标签: php jquery wordpress

我正在尝试为wordpress插件构建一个设置表单。 我不确切知道有多少选项,所以它必须是动态结构的形式。 对于构建选项表单,我使用Settings API 我找不到创建动态字段的方法。

我有默认选项的数组:

 function filtered_install(){
    //defaults options
        $array= Array
    (
        '0' => 1,
        '1' => 1,
        '2' => 3
    );
        add_option('snso_fields_array',$array);
    }

添加设置页面:

# Register a new page in the "Settings" tab:
function filtered_add_admin_pages() {
    $page = add_options_page(
        'Setting search.',                                    // - page title administration
        'Search with filters',                                 // - the name of the menu item
        'manage_options',                                     // - the right of access to editing
        'filteder_search.php',                                // - slug
        'filtered_options_page'                               // - callback.
    );


}

添加表格:

function filtered_options_page() 
{
    echo '<div class="wrap">';
    screen_icon();                                          // - icon.
    echo '<form method="post" action="options.php">';       // - processing of the request.
    do_settings_sections('snso_page');                      // - output section.
    settings_fields('snso_fields');                         // - output fields belonging to the same group.
    echo '<a href=\'#\' id=\'add\'>Add new field</a>';      // - button that add more fields.
    submit_button();                                        // - submit button.
    echo '</form>';
    echo '</div>';
}

从数组数据中获取表单中的可重复字段:

# Register the field in the database and make out their display.
function filtered_options_fields(){


    register_setting('snso_fields', 'snso_fields_array'); // - register field in the database.

    add_settings_section(
        'snso_section_array',                                 // - section id.
        '',
        'snso_section_array_callback',                        
        'snso_page'                                           // - options page.
    );



    $options = get_option('snso_fields_array');

    foreach($options as $key=>$field) {
       //id, title (label), callback, page, section(from add_settings_section), args
       add_settings_field(
        "option_$key",
        "Field # $key",
        "business_setting",
        "snso_page",
        "snso_section_array",
        $key);
    }

    function business_setting($key) {
      $options = get_option('snso_fields_array');
      echo "<input name='snso_fields_array[$key]' id='option_$key' type='text' value='" . $options[$key] . "' />";
    }



}


# An array of fields with the saved settings:
function snso_section_array_callback() {
  echo '<p>The fields listed below are stored in one cell array table <code>wp_options</code>.</p>';
  echo '<pre><code>'; print_r(get_option('snso_fields_array')); echo '</code></pre>';
 }

点击添加新字段链接,ID为'add',我需要在数据库中更新选项'snso_fields_array'

JS。文件:

jQuery(function(){

    jQuery('#add').click(function(evt){
    evt.preventDefault();
    var data = {
            action: 'update_options',
            my_var: 'my_data'
        };

        jQuery.post( ajaxurl, data);

});
});

注册一个动作'update_options':

add_action( 'wp_ajax_update_options', 'update_options_callback' );
add_action( 'wp_ajax_nopriv_update_options', 'update_options_callback' );

更新选项'snso_fields_array':

function update_options_callback() {
    $new_value = $_POST['my_var'];
    if ($new_value ='my_data') {
        $new_array = get_option('snso_fields_array');
        $new_array[]='';
        update_option('snso_fields_array',$new_array);
    }

}

工作正常

现在我需要使用'snso_fields_array'选项的新数据刷新我的表单。

0 个答案:

没有答案