고급 사용자 지정 필드 / 다른 acf 필드를 기준으로 채우기 선택
고급 사용자 지정 필드 반복 및 선택 드롭다운에 대해 말씀드리겠습니다. 저는 현재 자동차를 중심으로 하는 웹사이트를 가지고 있습니다.
워드프레스의 옵션 페이지에서 나는 '제조자'라는 이름의 텍스트 필드와 '모델'이라는 이름의 텍스트 필드가 있는 리피터 블록을 텍스트 영역 필드로 가지고 있습니다.
텍스트 영역은 모델과 함께 각 행에 채워집니다. 예를 들어 다음과 같습니다.
제조사 = 아우디 모델 = A1 A2 A3 A4 등.
자동차에 대한 맞춤형 게시물 유형 '임대'에서 제조업체와 모델을 위해 2개의 선택 드롭다운을 수행했습니다.
예제 #2 코드에 따라 제조업체를 자동으로 채울 수 있습니다.
http://www.advancedcustomfields.com/resources/dynamically-populate-a-select-fields-choices/
그것은 문제없이 잘 작동합니다!
그런 다음 모델 드롭다운을 선택하고 제조업체가 드롭다운을 변경한 다음 제조업체를 기반으로 한 모델만 표시하는 옵션 페이지의 리피터에서 자동으로 모델을 채워야 합니다...
그러기 위해서는 아약스가 필요하다는 것을 알고 있습니다.
저번 주에 테스트하던 샘플 코드가 있는데, 원하는 대로 할 수 있었는데, 차량 한 대에 들어가면 빈칸이 되고, 옵션을 선택한 다음 새로 고침 화면을 저장/업데이트하면 선택한 모델의 드롭다운이 다시 빈칸이 됩니다.테스트를 통해 데이터를 데이터베이스로 전송하고 저장했음을 알 수 있습니다.
그러면 차량 게시물이 공백이 되지 않도록 저장할 때 문제를 해결하려면 어떻게 해야 합니까?
여기 제가 테스트하고 있던 코드가 있습니다.
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();
});
자바스크립트와 관련이 있는 것 같은데요?
어떤 조언이나 도움이라도 주시면 감사하겠습니다.
잘 부탁드립니다.
R
저는 이 질문이 조금 오래된 것으로 알고 있지만 몇 개의 투표가 있기 때문에 이 문제에 대한 답변을 게시할 가치가 있다고 생각했습니다.
'임대' 게시물을 편집하고 제조업체를 설정한 다음 해당 값에서 모델 필드를 AJAX로 채우면 모델 선택 상자에 선택한 제조업체의 값이 채워집니다.이 값은 서버 측에서 '유효한' 선택으로 검증되지 않으므로 데이터베이스에 사후 메타로 올바르게 저장됩니다.
편집 화면을 다시 로드할 때 고급 사용자 지정 필드가 선택한 필드 서버 측에 대한 HTML을 생성할 때 사전 선택할 수 있는 옵션이 없기 때문에 모델의 현재 값이 선택되지 않습니다.필드/선택에서 다음 PHP 워커.php는 필드를 통과합니다.$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를 업데이트하여 '이전' 옵션을 제거해야 합니다. 두 제조업체 모델이 모두 옵션에 포함됩니다.예:
// 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' );
}
});
언급URL : https://stackoverflow.com/questions/30464072/advanced-custom-fields-populate-select-based-on-another-acf-field
'programing' 카테고리의 다른 글
pdb를 종료하고 프로그램을 계속 진행하려면 어떻게 해야 합니까? (0) | 2023.07.15 |
---|---|
git update-index --discovery-discovery가 "파일을 표시할 수 없음"을 반환합니다. (0) | 2023.07.15 |
vuetify 데이터 테이블 및 json 개체에서 가져온 바인딩 데이터 (0) | 2023.07.15 |
판다 데이터 프레임에서 NaN으로 셀을 설정하는 방법 (0) | 2023.07.10 |
Android에서 앱 언어를 프로그래밍 방식으로 변경 (0) | 2023.07.10 |