如何获取特定位置的所有 ACF 组，然后如果选择了一个组，则使用 AJAX 和 jQuery 获取其字段？
任何人请帮助我，我将非常感激
<?php
if ( !defined( 'ABSPATH' ) ) {
exit;
// Exit if accessed directly.
}
class Elementor_List_Widget extends\ Elementor\ Widget_Base {
public function get_name() {
return 'elementor-acf-fields';
}
public function get_title() {
return __( 'acf groups and fields', 'elementor-acf-fields' );
}
public function get_icon() {
return 'eicon-editor-code';
}
public function get_categories() {
return [ 'General' ];
}
protected function _register_controls() {
$all_groups = get_groups();
$get_fields = get_acf_fields();
$this->start_controls_section( 'section_acf_fields', [ 'label' => __( 'ACF Fields', 'elementor-acf-fields' ), ] );
$this->add_control( 'acf_groups', [ 'label' => __( 'ACF Groups', 'elementor-acf-fields' ), 'type' => \Elementor\ Controls_Manager::SELECT, 'groups' => $all_groups, 'default' => '', 'label_block' => true, 'ajax' => [ 'callback' => [ $this, 'get_acf_fields' ], 'event' => 'change', ], ] );
$this->add_control( 'acf_fields', [ 'label' => __( 'ACF Fields', 'elementor-acf-fields' ), 'type' => \Elementor\ Controls_Manager::SELECT, 'options' => $second_variable, 'default' => '', 'label_block' => true, ] );
$this->end_controls_section();
}
public function get_acf_fields( $request ) {
$group_id = $request[ 'group_id' ];
$fields = [];
if ( function_exists( 'acf_get_fields' ) ) {
$acf_fields = acf_get_fields( $group_id );
if ( $acf_fields ) {
foreach ( $acf_fields as $field ) {
$fields[ $field[ 'key' ] ] = $field[ 'label' ];
}
}
}
return [ 'options' => $fields, ];
}
public function get_groups() {
if ( function_exists( 'acf_get_field_groups' ) ) {
$acf_groups = \acf_get_field_groups();
} else {
$acf_groups = \apply_filters( 'acf/get_field_groups', [] );
}
$specifications_group_id = $acf_groups; // Post ID of the specifications field group. $specifications_fields = array(); $fields = acf_get_fields( $specifications_group_id ); foreach ( $fields as $field ) { $field_value = get_field( $field['name'] ); if ( $field_value && !empty( $field_value ) ) { $specifications_fields[$field['name']] = $field; $specifications_fields[$field['name']]['value'] = $field_value; } } return $specifications_fields; } protected function render() {}
}
选择一个选项时，根据其自定义位置在下拉列表中获取所有 acf 组的答案，然后其字段将显示，请参见下面的代码。为此，我创建了名为“jpro_acf_group_select2”的自定义元素控件
<?php
/**
* Elementor currency control.
*
* A control for displaying a select field with the ability to choose currencies.
*
* @since 1.0.0
*/
class Elementor_Jobpro_ACF_Group_Select2_Control extends
\Elementor\Base_Data_Control {
/**
* Get currency control type.
*
* Retrieve the control type, in this case `currency`.
*
* @since 1.0.0
* @access public
* @return string Control type.
*/
public function get_type() {
return 'jpro_acf_group_select2';
}
public function enqueue() {
//wp_enqueue_script( 'select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js', array( 'jquery' ), '4.0.13', true );
wp_register_script( 'elementor-group-scripts', get_plugin_url( '/assets/js/elementor-group-scripts.js'), [ 'jquery-elementor-select2' ], '1.0.0' );
//wp_register_script( 'elementor-group-scripts', get_plugin_url( '/assets/js/elementor-group-scripts.js'), [ 'select2' ], '1.0.0' );
wp_enqueue_script( 'elementor-group-scripts' );
$jobpro_plugin_arr = array(
'site_url' => home_url('/'),
'ajax_url' => home_url('/?jobpro_settings=1'),
'error_msg' => esc_html__('There is some problem.', 'jobpro-employement-verification'),
);
wp_localize_script('elementor-group-scripts', 'jobpro_plugin_data', $jobpro_plugin_arr);
}
public function get_value( $control, $settings ) {
if ( isset( $settings[ $control['name'] ] ) ) {
$group_item = $settings[ $control['name'] ];
} else {
$group_item = $control['default'];
}
return $group_item;
}
/**
* Render currency control output in the editor.
*
* Used to generate the control HTML in the editor using Underscore JS
* template. The variables for the class are available using `data` JS
* object.
*
* @since 1.0.0
* @access public
*/
public function content_template() {
$control_uid = $this->get_control_uid();
?>
<div class="elementor-control-input-wrapper">
<select id="<?php echo $control_uid; ?>" class="elementor-select2 jobpro-resume-group-select2 {{{ data.class }}}" type="select2"data-setting="{{ data.name }}">
<#
var printOptions = function( options ) {
_.each( options, function( option_title, option_value ) { #>
<?php // If the option title is array of title & icon. ?>
<option value="{{ option_value }}">{{{ option_title?.title || option_title }}}</option>
<# } );
};
if ( data.groups ) {
for ( var groupIndex in data.groups ) {
var groupArgs = data.groups[ groupIndex ];
if ( groupArgs.options ) { #>
<optgroup label="{{ groupArgs.label }}">
<# printOptions( groupArgs.options ) #>
</optgroup>
<# } else if ( _.isString( groupArgs ) ) { #>
<option value="{{ groupIndex }}">{{{ groupArgs }}}</option>
<# }
}
} else {
printOptions( data.options );
}
#>
</select>
</div>
<# if ( data.description ) { #>
<div class="elementor-control-field-description">{{{ data.description }}}
</div>
<# } #>
<?php
}
}
下面是它的js和ajax
// Wait for the Elementor editor to load
jQuery(window).on('elementor:init', function () {
// Add custom control JS to the widget edit mode
elementor.hooks.addAction('panel/open_editor/widget', function (panel, model, view) {
// Check if the current widget is our custom widget
if (model.get('widgetType') === 'resume-listings') {
jQuery('.jobpro-resume-group-select2').select2({
width: '100%',
allowClear: true,
placeholder :'Select Group',
});
var widgetType = model.get( 'widgetType' );
var settings = model.get('settings');
var $element = jQuery('#elementor-panel-page-editor').find('.jobpro-group-key');
var settings_attributes = settings.attributes;
var select_resume_group = settings.attributes.select_resume_group;
if(select_resume_group == 'undefined'){
select_resume_group = jQuery('.jobpro-resume-group-select2').val();
}
var $fields_element = jQuery('#elementor-panel-page-editor').find('.jobpro-acf-group-fields-select2');
if(select_resume_group){
if ( $element.length ) {
$element.val(select_resume_group);
}
if ( $fields_element.length ) {
$fields_element.data('group_item', select_resume_group);
jobpro_resume_group_fields_(settings_attributes, $fields_element, select_resume_group);
}
}
jQuery(document).on('change', '.jobpro-resume-group-select2',function (e) {
select_resume_group = jQuery(this).val();
$element.val(select_resume_group);
$fields_element.data('group_item', select_resume_group);
$fields_element.val('').trigger('change');
jobpro_resume_group_fields_(settings_attributes, $fields_element, select_resume_group);
});
function jobpro_resume_group_fields_(settings_attributes, $fields_element, select_resume_group){
jQuery.ajax({
type: "GET",
dataType: "json",
url: jobpro_plugin_data.site_url+'wp-json/wp/v1/jobpro-get-group-fields',
data: {
search: '',
verification_group: select_resume_group,
},
success: function(data) {
if (data.status == 'success') {
$fields_element.find('option:not(:first)').remove();
jQuery.each(data.results, function(index, option) {
$fields_element.append(jQuery('<option>').text(option.text).attr('value', option.id));
});
$fields_element.each(function() {
var currentElement = jQuery(this);
let dropdownName = currentElement.attr('name');
if(dropdownName == 'undefined'){
dropdownName = currentElement.data('setting');
}
dropdownName = currentElement.data('setting');
if(dropdownName !== 'undefined'){
var keyValue = settings_attributes[dropdownName];
currentElement.val(keyValue).trigger('change');
}
});
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.error(errorThrown);
}
});
}
$fields_element.select2({
width: '100%',
allowClear: true,
placeholder :'Select Group Fields',
//minimumInputLength: 3,
tags: false,
ajax: {
data: function (params) {
if ( select_resume_group.length < 1 || select_resume_group == 'undefined') {
select_resume_group = jQuery('.jobpro-resume-group-select2').val();
}
var query = {
search: params.term,
verification_group: select_resume_group
}
return query;
},
url: jobpro_plugin_data.site_url+'wp-json/wp/v1/jobpro-get-group-fields',
dataType: 'json',
cache: true,
}
});
}
});
});
下面是ajax
public function jobpro_load_group_fields(){
$search = !empty($_GET['search']) ? sanitize_text_field($_GET['search']) : '';
$verification_group = !empty($_GET['verification_group']) ? sanitize_text_field($_GET['verification_group']) : '';
$acf_group_object = get_field_object($verification_group);
$verification_group_fields = !empty($acf_group_object['sub_fields']) ? $acf_group_object['sub_fields'] : '';
$responsedata = array();
$responsedata['status'] = 'success';
$responsedata['results'] = array();
foreach ($verification_group_fields as $field) {
$name = isset($field['name']) ? $field['name'] : '';
$label = isset($field['label']) ? $field['label'] : '';
$responsedata['results'][] = array('id' => $name, 'text' => $label);
}
wp_send_json($responsedata);
}