Populates 2nd drop down based on 1st drop down

Here I am not talking about Beaver Builder module’s toggle field option. Value of 2nd drop down field of BB module will generate via WP AJAX action. Currently I am cooking another cool module for Beaver builder and this kind of functionality is required there. So I am sharing my experience for my pro members.

Right now I am giving the simple example here. Assuming that you are building the custom module and will fetch the post titles list based on post type value. So 1st drop down will contain the all post types and 2nd drop down will show the all titles based on post type value.

Making Drop Down Fields

In my module I added the two select fields like this way
Module Select Fields

'post_type' 	=> array(
	'type'          => 'post-type',
	'label'         => __('Post Type', 'fl-builder'),
	'default'       => 'post',
	'class' 		=> 'class=module-post-type onChange=getTitle(this.value)'
),

'post_title' 	=> array(
	'type' 			=> 'select',
	'label' 		=> __('Title', 'fl-builder'),
	'default' 		=> 'none',
	'options' 		=> array( 'none' => __( 'None', 'fl-builder' ) )
)

if you look the first field, I used “post-type” field type. It is Beaver’s in-built field type and automatically creating the post types drop down list. I just added new line 'class' => 'class=module-post-type onChange=getTitle(this.value)'. It is performing the AJAX action with jQuery.post() method and populating the value of 2nd drop down list.

Creating JS Script

We need small JS script which will trigger the AJAX hook. So I created new JS file “title.js” and put’s module’s js folder. File is containing the small codes of getTitle() function.

title.js file

function getTitle( val )
{
	jSon = jQuery('.fl-builder-test-module-settings input.fl-builder-settings-json').val();
	settings = jQuery.parseJSON(jSon);
	var data = {
		"action"     : "probb_get_title",
		"post_type"  : val,
		"post_id"    : settings.post_title,
		"security"   : Li10NString.nonce
	};

	jQuery('#fl-field-post_title .fl-field-control-wrapper').html(Li10NString.loading_msg);

	jQuery.post(ajaxurl, data, function( response ) {
		if( response ) {
			jQuery('#fl-field-post_title .fl-field-control-wrapper').html(response);
		}
	});
}

My module’s slug is test-module. So setting form’s class name is generating like this .fl-builder-test-module-settings. You will replace the bold part based on your module slug. #fl-field-post_title is using at two places. You will replace the post_title with your 2nd drop down field name.

Enqueue JS Script

Enqueue the above JS file from module’s php file. There have a method FLBuilderModule::enqueue_scripts() and it will load the module’s related dependencies (css/js files). I am using following snippets

Enqueue the JS Script

public function enqueue_scripts()
{
	if( FLBuilderModel::is_builder_active() ) {
		$ajax_nonce = wp_create_nonce( "security-nonce" );
		wp_enqueue_script( 'title', MODULE_URL . 'module/test-module/js/title.js', array(), time(), true );
		wp_localize_script( 'title', 'Li10NString', array(
			'loading_msg' => __('Wait...', 'fl-builder'),
			'nonce' => $ajax_nonce
		));
	}
}

Doing WP_AJAX_ Action

Now creating the callback method of wp_ajax_ hook. I created a helper class for it.

Helper Class

 $post_type, 
			'orderby' 		=> 'title', 
			'order' 		=> 'ASC', 
			'post_status' 	=> 'publish',
			'posts_per_page' => 999
		));

		$html = '';

		if( is_array( $allposts ) )
		{
			$html = '' . "n";
			wp_reset_postdata();
		} else {
			$html = '' . "n";
		}

		echo $html;
		wp_die();
	}
}

TestModule::init();

TestModule is my class. You will not use this name. You will use proper name. Inside the init method I wrote this `add_action( ‘wp_ajax_probb_get_title’, ‘TestModule::probb_get_title’ );` . If you look that I appended the action probb_get_title with wp_ajax_ which is assigned in JS script. So both places this action name would be same. When you will use your own action name, you will replace it at both places.

My callback method is probb_get_title. check_ajax_referer() is checking the security. Next I am fetching the submitted post type name and populating the all post titles with get_posts() function. Making the select field HTML structure and echoing it.

If you have any further queries, do let me know in the comments down below. I will get back to you.

Posted in