By WP_AJAX_ hook generating the state drop down list of a selected country in Agentpress Listing Search Form of Agentpress PRO theme.
Step 1: Navigate Listings > Register Taxonomies and create the Country taxonomy. Now you will get new menu link “Countries” under Listings menu at left hand side. Again navigate Listing > Countries and add the Country name one by one.
Step 2: Navigate Listings > Register Taxonomies and create another new taxonomy “State”.
Step 3: Creating a relationship between state and country. Adding a new field “Country” combo box at State terms page. So When you will add a State, you can assign the Country name of that Sate. This way you can make a relationship between State & Country.
Add the following code in your functions.php file and it will generate a custom field at State form:
// Add a field in the form add_action( 'state_add_form_fields', 'add_country_fields' ); add_action( 'state_edit_form_fields', 'edit_country_fields', 10, 2 ); add_action( 'created_term', 'save_country_name', 10, 3 ); add_action( 'edit_term', 'save_country_name', 10, 3 ); function add_country_fields(){ $countries = get_terms( 'country', 'hide_empty=0' ); if( $countries ): ?> <div class="form-field"> <label for="country_id"><?php _e( 'Country', 'agentpress' ); ?></label> <select id="country_id" name="country_id" class="postform"> <option value=""><?php _e( 'Select Country', 'agentpress' ); ?></option> <?php foreach( $countries as $c){ echo '<option value="' . $c->term_id . '">' . $c->name . '</option>' . "\n"; } ?> </select> </div> <?php endif; } function edit_country_fields( $term, $taxonomy ){ $country_name = get_post_meta( $term->term_id, 'country_id', true ); $countries = get_terms( 'country', 'hide_empty=0' ); if( $countries ): ?> <tr class="form-field"> <th scope="row" valign="top"><label for="country_id"><?php _e( 'Country', 'agentpress' ); ?></label></th> <td><select id="country_id" name="country_id" class="postform"> <option value=""><?php _e( 'Select Country', 'agentpress' ); ?></option> <?php foreach( $countries as $c){ $selected = ( $country_name == $c->term_id) ? "selected" : ''; echo '<option value="' . $c->term_id . '" ' . $selected . '>' . $c->name . '</option>' . "\n"; } ?> </select> </td> </tr> <?php endif; } function save_country_name( $term_id, $tt_id, $taxonomy ){ if( isset( $_POST['country_id'] ) ) update_post_meta( $term_id, 'country_id', $_POST['country_id'] ); }
Now adding a columns “Country” in States Listing section
// Add columns add_filter( 'manage_edit-state_columns', 'state_country_columns' ); add_filter( 'manage_state_custom_column', 'state_country_column', 10, 3 ); function state_country_columns( $columns ){ $new_columns = array(); $new_columns['cb'] = $columns['cb']; $new_columns['name'] = $columns['name']; $new_columns['country'] = __( 'Country', 'agentpress' ); unset( $columns['cb'] ); unset( $columns['name'] ); return array_merge( $new_columns, $columns ); } function state_country_column( $columns, $column, $id ) { if ( $column == 'country' ) { $country = get_term( get_post_meta( $id, 'country_id', true ), 'country' ); if( $country ) $columns .= $country->name; else $columns .= "---"; } return $columns; }
Step 4: Creating a JS file “search-listing.js” and it will handle the AJAX part. When you will choose the country name from drop down, it will call a action “find_states” and generate a new drop down list of states based on selected country name. Put the js file in “js” folder. Here is code of js file:
jQuery(document).ready( function($){ $('#country').on('change', function(){ var data = { action: 'find_states', country_name: $('#country').val() } $.post(ajax_object.ajax_url, data, function( response ){ $('#state').html( response ); }); }); });
Now register the JS file. Search this function “agentpress_google_fonts” on functions.php and add replace the current code by following code:
function agentpress_google_fonts() { wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Lato:300,700|Roboto:700,300,400', array(), CHILD_THEME_VERSION ); wp_enqueue_script( 'search-listing', get_bloginfo( 'stylesheet_directory' ) . '/js/search-listing.js', array('jquery'), CHILD_THEME_VERSION ); wp_localize_script( 'search-listing', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) ); }
Write a Hook of “find_states” action. Again this code will add into functions.php file:
function find_states(){ global $wpdb; if ( isset($_POST['country_name']) ) { $get_country_details = get_term_by('slug', $_POST['country_name'], 'country'); $res = $wpdb->get_results( $wpdb->prepare( "SELECT t.name, t.slug FROM $wpdb->terms t JOIN $wpdb->term_taxonomy tt on tt.term_id = t.term_id JOIN $wpdb->postmeta pm on pm.post_id = t.term_id WHERE 1 AND tt.taxonomy = 'state' AND pm.meta_key = 'country_id' AND pm.meta_value='%s' ORDER BY t.name ASC", $get_country_details->term_id ), OBJECT ); if( $res ){ $html = 'Select State' . "\n"; foreach( $res as $state ){ $html .= '' . $state->name . '' . "\n"; } echo $html; } } wp_die(); } add_action( 'wp_ajax_find_states', 'find_states' ); add_action( 'wp_ajax_nopriv_find_states', 'find_states' );
** For better knowledge the you can see the CODEX of WP_AJAX_ hook.
Step 5: Navigate to Appearance > Widgets and add the Agentpress Listing Search widget at Home – Featured widget area. Setup the widget and save the settings.
Now you refresh the home page. First time if you see the state drop down list, you’ll get all the state list. Now select a country name from down and you will get the states of that country only. i.e. I am selected the “United States” from drop down list and got the states of United States only.