Demonstrates how form fields can be updated using Ajax with Admin Page Framework.

admin-page-framework-ajax-fields.php

<?php
/** 
 *  Plugin Name:    Admin Page Framework Demo - Ajax FIelds
 *  Plugin URI:     http://en.michaeluno.jp/admin-page-framework
 *  Description:    Demonstrates how fields can be updated with Ajax.
 *  Author:         Michael Uno
 *  Author URI:     http://michaeluno.jp
 *  Version:        1.0.0
 *  Requirements:   PHP 5.2.4 or above, WordPress 3.4 or above. Admin Page Framework 3.0.0 or above
 */
 
include( dirname( dirname( __FILE__ ) ) . '/admin-page-framework/library/apf/admin-page-framework.php' );
    
class APFDemo_AjaxFields extends AdminPageFramework {
    
    public function setUp() {
                   
        $this->setRootMenuPage( 'Ajax Fields' );   
                           
        $this->addSubMenuItems(   
            array(
                'title'         => __( 'Ajax Fields', 'admin-page-framework-demo' ),        // page title
                'page_slug'     => 'ajax_fields',    // page slug
            )        
        );  
        
        $this->addInPageTabs(
            'ajax_fields',
            array(
                'tab_slug'  => 'ajax',
                'title'     => __( 'Ajax', 'admin-page-framework-demo' ),
                'script'    => dirname( __FILE__ ) . '/ajax-fields.js'
            )                    
        );    
 
        $this->setPageHeadingTabsVisibility( false );
        $this->setInPageTabTag( 'h2' );
        
    }
    
    public function load() {
        
        if ( isset( $_POST[ '_my_ajax_call' ] ) ) {
            $this->_handleAjaxRequest();
        }
        
        $this->addSettingFields(
            array(
                'field_id'  => 'my_select_field',
                'title'     => __( 'Select', 'admin-page-framework-demo' ),
                'type'      => 'select',
                'label'     => array(
                    'a' => __( 'Apple', 'admin-page-framework-demo' ),
                    'b' => __( 'Banana', 'admin-page-framework-demo' ),
                    'c' => __( 'Cherry', 'admin-page-framework-demo' ),
                ),
                'default'   => 'a',
            ),
            array(
                'field_id'  => 'dynamic_field',
                'title'     => __( 'Response', 'admin-page-framework-demo' ),
                'type'      => 'textarea',
                'default'   => $this->_getMessageBySelectedItem( 'a' ),
            ),
            array(
                'field_id'  => '_submit_button',
                'type'      => 'submit',            
                'save'      => false,
                'show_title_column' => false,
            ) 
        );
        
    }
    
        private function _handleAjaxRequest() {
            
            $_sSelected = $this->oUtil->getElement( $_POST, 'selected_item', '' );
            $_aResponse = array(
                'message' => $this->_getMessageBySelectedItem( $_sSelected ),
            );
                        
            wp_send_json( $_aResponse );
            
        }
            
            /**
             * @return      string
             */
            private function _getMessageBySelectedItem( $sSelected ) {
                
                switch( $sSelected ) {
                    
                    case 'a' :
                    default:
                        return __( 'You selected Apple!', 'admin-page-framework-demo' );
                    
                    case 'b' :
                        return __( 'You selected Banana!', 'admin-page-framework-demo' );
                    
                    case 'c' :
                        return __( 'You selected Cherry!', 'admin-page-framework-demo' );
                                        
                }
            }    
    
}
 
// Instantiate the class object.
new APFDemo_AjaxFields;

ajax-fields.js

(function($){

    $( document ).ready( function() {
        
        $( 'select[name*="[my_select_field]"]' ).on( 'change', function(){
                        
            var _aPostData = {
                '_my_ajax_call': true,
                'selected_item': $( this ).val(),
            };
            $.ajax( {
                method: 'POST',
                dataType: 'json',
                data: _aPostData,
                error: function( aData ) {
                    console.log( 'Ajax Error' );
                    console.log( aData );
                },
                success: function( aData, textStatus ) {
                    
                    // Update the field
                    console.log( 'Ajax Reposne' );
                    console.log( aData );
                    
                    $( 'textarea[name*="[dynamic_field]"]' ).val( aData.message );
                    
                },                
            });             
            
        } );

            
    } );
    
    
}(jQuery));