Ric*_*ard 6 javascript php wordpress drop-down-menu advanced-custom-fields
关于高级自定义字段转发器和选择下拉菜单.我目前有一个围绕汽车的网站.
在wordpress的选项页面中,我有一个转发器块,其中一个文本字段名为"manufacturer",另一个名为"models"作为文本区域字段.
使用模型在每行上填充文本区域,因此在一行中例如:
制造商=奥迪型号= A1 A2 A3 A4等.
在汽车的自定义邮政类型'租赁'我已经为制造商和型号做了2个选择下拉菜单.
我可以按照示例#2代码自动填充制造商:
http://www.advancedcustomfields.com/resources/dynamically-populate-a-select-fields-choices/
工作正常没问题!
然后使用模型下拉选择,仅当制造商选择下拉更改时,然后使用选项页面上的转发器中的模型自动填充它,仅显示基于制造商的模型...
我知道这需要ajax这样做..
我有一个示例代码,我正在测试另一周,我可以让它做我想要的但是当你进入单车时它将是空白,然后当你选择选项,然后保存/更新刷新的屏幕模型选择下拉列表将再次为空白,尽管通过测试显示它已将数据发送到数据库并已保存.
所以我如何解决这个问题,当我保存汽车贴,它不会空白？
这是我正在测试的代码
PHP
function acf_admin_enqueue( $hook ) {
$type = get_post_type(); // Check current post type
$types = array( 'lease' ); // Allowed post types
if( !in_array( $type, $types ) )
return; // Only applies to post types in array
wp_enqueue_script( 'populate-area', get_stylesheet_directory_uri() . '/library/dist/js/acf_select.js' );
wp_localize_script( 'populate-area', 'pa_vars', array(
'pa_nonce' => wp_create_nonce( 'pa_nonce' ), // Create nonce which we later will use to verify AJAX request
)
);
}
add_action( 'admin_enqueue_scripts', 'acf_admin_enqueue' );
// Return models by manufacturer
function model_by_manufacturer( $selected_manufacturer ) {
// Verify nonce
if( !isset( $_POST['pa_nonce'] ) || !wp_verify_nonce( $_POST['pa_nonce'], 'pa_nonce' ) )
die('Permission denied');
// Get manufacturer var
$selected_manufacturer = $_POST['manufacturer'];
// Get field from options page
$manufacturer_and_models = get_field('car_m_and_m', 'options');
// Simplify array to look like: manufacturer => models
foreach ($manufacturer_and_models as $key => $value) {
$manufacturer[$value['manufacturer']] = $value['models'];
}
// Returns model by manufacturer selected if selected manufacturer exists in array
if (array_key_exists( $selected_manufacturer, $manufacturer)) {
// Convert model to array
$arr_data = explode( ', ', $manufacturer[$selected_manufacturer] );
return wp_send_json($arr_data);
} else {
$arr_data = array();
return wp_send_json($arr_data);
}
die();
}
add_action('wp_ajax_pa_add_areas', 'model_by_manufacturer');
add_action('wp_ajax_nopriv_pa_add_areas', 'model_by_manufacturer');
使用Javascript:
jQuery(document).ready(function($) {
/* Add default 'Select one'
$( '#acf-field_5548d019b55cb' ).prepend( $('<option></option>').val('0').html('Select Manufacturer').attr({ selected: 'selected', disabled: 'disabled'}) );
*/
/**
* Get manufacturer option on select menu change
*
*/
$( '#acf-field_5548d019b55cb' ).change(function () {
var selected_manufacturer = ''; // Selected value
// Get selected value
$( '#acf-field_5548d019b55cb option:selected' ).each(function() {
selected_manufacturer += $( this ).text();
});
$( '#acf-field_5548da7058203' ).attr( 'disabled', 'disabled' );
// If default is not selected get models for selected manufacturer
if( selected_manufacturer !== 'Select Manufacturer' ) {
// Send AJAX request
data = {
action: 'pa_add_areas',
pa_nonce: pa_vars.pa_nonce,
manufacturer: selected_manufacturer,
};
// Get response and populate models select field
$.post( ajaxurl, data, function(response) {
if( response ){
/* Disable 'Select model' field until country is selected
$( '#acf-field_5548da7058203' ).html( $('<option></option>').val('0').html('Select Model').attr({ selected: 'selected', disabled: 'disabled'}) );
*/
// Add models to select field options
$.each(response, function(val, text) {
$( '#acf-field_5548da7058203' ).append( $('<option></option>').val(text).html(text) );
});
// Enable 'Select Model' field
$( '#acf-field_5548da7058203' ).removeAttr( 'disabled' );
}
});
}
}).change();
});
我假设它与Javascript有关？
任何建议或帮助将不胜感激,
先感谢您.
[R
我知道这个问题有点老了，但它有一些赞成票，所以我认为值得发布这个问题的答案。
当您编辑“租赁”帖子时，设置制造商，然后使用 AJAX 从其值填充模型字段，模型选择框将填充所选制造商的值。该值未在服务器端验证为“有效”选择，因此它会作为后元正确保存在数据库中。
再次加载编辑屏幕时，不会选择模型的当前值，因为当高级自定义字段为选择字段服务器端生成 HTML 时，没有可以预先选择的选项。来自 fields/select.php 的以下 PHP walker 传递了字段$choices以及$values正在编辑的字段/帖子：
function walk( $choices, $values ) {
// bail ealry if no choices
if( empty($choices) ) return;
// loop
foreach( $choices as $k => $v ) {
// optgroup
if( is_array($v) ){
// optgroup
echo '<optgroup label="' . esc_attr($k) . '">';
// walk
$this->walk( $v, $values );
// close optgroup
echo '</optgroup>';
// break
continue;
}
// vars
$search = html_entity_decode($k);
$pos = array_search($search, $values);
$atts = array( 'value' => $k );
// validate selected
if( $pos !== false ) {
$atts['selected'] = 'selected';
$atts['data-i'] = $pos;
}
// option
echo '<option ' . acf_esc_attr($atts) . '>' . $v . '</option>';
}
}
由于在 AJAX 使用制造商字段填充字段之前，您的字段没有选择，因此不会设置选定的属性。您也应该在服务器端填充模型字段的选择，以便在保存后保留帖子编辑屏幕上的值。例如：
function load_current_models($field){
/** Get posts current manufacturer */
$current_manufact = get_field('manufacturer');
/** Manufacturer must be set */
if($current_manufact) {
/** Get manufacturers and models from options page */
$all_models = get_field('car_m_and_m', 'options');
/** Look for manufacturers models **/
foreach($all_models as $manufacturer){
if($manufacturer['manufacturer'] == $current_manufact){
$field['choices'] = explode(', ', $model['models']);
return $field;
}
}
}
/** Disable models by default */
$field['disabled'] = true;
return $field;
}
add_filter('acf/load_field/key=field_5548da7058203', 'load_current_models');
如果尚未设置制造商，这也将禁用加载时的模型字段，我假设有一个新帖子，允许您.change()从 JS 中删除调用，这会导致制造商选择更改事件在加载时也被触发。否则，这将在传递到服务器端的选项之后附加重复的模型选项。
您应该更新 JS 以删除制造商更改时的“旧”选项，否则如果您选择了一个制造商然后将其更改为另一个制造商，则两个制造商的型号都将包含在选项中。例如：
// Get models field jQuery object
var models = $('#acf-field_5548da7058203');
// Disable while waiting for server
models.prop('disabled', true);
// Remove old model field options
models.find('option').each(function(){
if($(this).val() != 0) $(this).remove();
});
// Get response and populate models select field
$.post( ajaxurl, data, function(response) {
if( response ){
// Add models to select field options
$.each(response, function(val, text) {
models.append( $('<option></option>').val(text).html(text) );
});
// Enable 'Select Model' field
models.removeAttr( 'disabled' );
}
});