bradklosterman

The workstation calls the db on modal initiation and on the update click callback. As for accessing specific data within the array I do call the wp_get_attachment_image_src action. Maybe you can advise me on a better way to retreiving media sources within an array. At the moment I am leaning towards the “A Row A Section” approach. I may dedicate each section to a unique page so calling an entire array maybe overkill. One factor I am struggling to grasp is the foreach construct. The sections must be called to order as a dynamic user prefernce. I have some thoughts on how to save the section index information maybe you could continue with your extremely helpful guidance.

Create a row with a sole purpose of capturing the saved sections index as an array. I would then call the foreach construct to list the arrays objects. I would then somehow link those objects to their associated db row and present the values.

OR

All the section rows have the same key? Within their value array a position identifier is called to determin the order of the foreach construct objects.

If each row has a different key how would I call the foreach construct to only display the required keys?

Hello again. I have implemented the add new section control and I am now on to the next one. For the layout control I am working on implementing a selector that activates multiple controllers activate state conditionally depending on the value selected. If you are available I could use the input (:

Thank you for the input. I have started extending the core files. My goal is to soley use JS. How would I go about this.

1. Create a panel.
2. Create a section.

If I need to work with the data in the wp_ajax it wouldn’t be a good idea to serialise in the Jquery? The data I posted was directly from the db. how do I package the data in jquery process in wp_ajax and since update serialises for me I would then just need to update meta.

Nothing seems to be updating in the database. I gave it a couple days but still couldn’t figure it out.

function pfile_process_ajax() {
 	global $wpdb;

 	$user_ID = get_current_user_id();

	$meta = get_user_meta( $user_ID, 'repeatable_fields', true);
	$new = array();

	$names = array_map('stripslashes', $_POST['name']);
	$urls = array_map('stripslashes', $_POST['url']);
	$count = count( $names );

	for ( $i = 0; $i < $count; $i++ ) {
		if ( $names[$i] != '' ) :
			$new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );

		if ( $urls[$i] == 'http://' )
			$new[$i]['url'] = '';
		else
			$new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
		endif;
	}

		update_user_meta( $user_ID, 'repeatable_fields', $new );

 }

function pfilepage2_render_admin() {
	global $current_user;
	global $wpdb;
	$i = 0;
	$user_ID = get_current_user_id();
	$meta = get_user_meta($user_ID, 'repeatable_fields', true);

	?>
    <script type="text/javascript">
       jQuery(function() {
    	jQuery('.repeat').each(function() {
    		jQuery(this).repeatable_fields();
    	});
    });
	</script>

<div class="wrap">
    	<h2><?php _e('admin Ajax demo', 'aad'); ?></h2>
        <form id="pfile" action="" method="POST">
        <div class="repeat">

        <table class="wrapper" width="100%">
			<thead>
        		<tr>
				<td width="10%" colspan="4"><span class="add">Add</span></td>
    			</tr>
			</thead>
		<tbody class="container ui-sortable" data-rf-row-count="1">
	<?php

	$i = 1;
	if ( $meta ) {

		foreach ( $meta[0] as $name ) {
?>
	<tr class="template row">
		<td width="10%"><span class="move">Move</span></td>
		<td>
        	<dl>
        		<dt>option1</dt>
        			<dd><input type="text" class="widefat" name="$name" value="<?php if($meta[1][$i] != '') echo esc_attr( $meta[1][$i] ); ?>" /></dd>
				<dt>option2</dt>
					<dd><input type="text" class="widefat" name="$name" value="<?php if ($meta[2][$i] != '') echo esc_attr( $meta[2][$i] ); else echo 'http://'; ?>" /></dd>
        	</dl>
        </td>
		<td width="10%"><span class="remove">Remove</span></td>

	</tr>
	<?php
	$i++;
		}
	} else {
		// show a blank one
?>
	<tr class="template row">
		<td width="10%"><span class="move">Move</span></td>
		<td>
        <dl>
        	<dt>option1</dt>
        		<dd><input type="text" class="widefat" name="$name" /></dd>

			<dt>option2</dt>
				<dd><input type="text" class="widefat" name="$name" value="http://" /></dd>
        </dl>
        </td>
		<td width="10%"><span class="remove">Remove</span></td>

	</tr>
	<?php } ?>

	<!-- empty hidden one for jQuery -->
	<tr class="empty-row screen-reader-text">
		<td><a class="button remove-row" href="#">-</a></td>
		<td><input type="text" class="widefat" name="$name" /></td>

		<td><input type="text" class="widefat" name="$name" value="http://" /></td>
<td><a class="sort">|||</a></td>

	</tr>
	</tbody>
	</table>

    <p>
	<input type="submit" class="" value="" />
	</p>
        </div>
       </form>
       <p id="pfile-message"></p>
		</div>

	<?php
}

Hello, your advice has really helped me out. I have come a long way in understanding the basic. I am having trouble saving the data in the correct way. I have created the sortable clone fields and I am able to send the data to the user table but I am having a hard time saving it correctly making it difficult to get the user meta for the form. This is what I have so far. And I can’t tell enough how much I appreciate your help.

<?php

/*
Plugin Name: Prometa1
Plugin URI: http://akada:8888/plugins/prometa1
Description: Profile style
Author: Brad
Version: 1.0
Author URI:
*/

// ------------------------------------------------------------------
// ADD SCRIPTS
// ------------------------------------------------------------------

function pfile_load_scripts() {
	wp_enqueue_script('pfile-repeat', plugin_dir_url(__FILE__) . 'js/repeatable-fields.js', array('jquery'));
}

add_action('admin_enqueue_scripts', 'pfile_load_scripts');

// ------------------------------------------------------------------
// ADD PROFILE PAGE AND THEIR SCREEN DISPLAY FUNCTION
// ------------------------------------------------------------------

function pfile_admin_page() {
	global $pfile_settings;
	$pfile_settings = add_users_page(__('Voluntary Experience', 'pfilepage2'), __('Voluntary Experience', 'pfilepage2'), 'read', 'pfilepage2', 'pfilepage2_render_admin');
	add_action( "admin_print_scripts-$pfile_settings", 'my_plugin_admin_scripts');
}

function my_plugin_admin_scripts() {
    wp_enqueue_script( 'jquery-ui-sortable' );
}

add_action('admin_menu', 'pfile_admin_page');

// ------------------------------------------------------------------
// RENDER PROFILE PAGE
// ------------------------------------------------------------------

function pfilepage2_render_admin() {
	global $current_user;
	global $wpdb;
	$user_ID = get_current_user_id();
	$repeatable_fields = get_user_meta($user_ID, 'repeatable_fields', true);

	?>
    <script type="text/javascript">
       jQuery(function() {
    	jQuery('.repeat').each(function() {
    		jQuery(this).repeatable_fields();
    	});
    });
	</script>

<div class="wrap">
    	<h2><?php _e('admin Ajax demo', 'aad'); ?></h2>
        <form id="pfile" action="" method="POST">
        <div class="repeat">

        <table class="wrapper" width="100%">
			<thead>
        		<tr>
				<td width="10%" colspan="4"><span class="add">Add</span></td>
    			</tr>
			</thead>
		<tbody class="container ui-sortable" data-rf-row-count="1">
	<?php

	if ( $repeatable_fields ) :

		foreach ( $repeatable_fields as $field ) {
?>
	<tr class="template row">
		<td width="10%"><span class="move">Move</span></td>
		<td>
        	<dl>
        		<dt>option1</dt>
        			<dd><input type="text" class="widefat" name="name[]" value="<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>" /></dd>
				<dt>option2</dt>
					<dd><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></dd>
        	</dl>
        </td>
		<td width="10%"><span class="remove">Remove</span></td>

	</tr>
	<?php
		}
	else :
		// show a blank one
?>
	<tr class="template row">
		<td width="10%"><span class="move">Move</span></td>
		<td>
        <dl>
        	<dt>option1</dt>
        		<dd><input type="text" class="widefat" name="name[]" /></dd>

			<dt>option2</dt>
				<dd><input type="text" class="widefat" name="url[]" value="http://" /></dd>
        </dl>
        </td>
		<td width="10%"><span class="remove">Remove</span></td>

	</tr>
	<?php endif; ?>

	<!-- empty hidden one for jQuery -->
	<tr class="empty-row screen-reader-text">
		<td><a class="button remove-row" href="#">-</a></td>
		<td><input type="text" class="widefat" name="name[]" /></td>

		<td><input type="text" class="widefat" name="url[]" value="http://" /></td>
<td><a class="sort">|||</a></td>

	</tr>
	</tbody>
	</table>

    <p>
	<input type="submit" class="" value="" />
	</p>
        </div>
       </form>
       <p id="pfile-message"></p>
		</div>

	<?php
}

// ENQUEUE AND LOCALIZE SCRIPTS

function pfilepage_load_scripts($hook) {
	global $pfile_settings; 

	if( $hook != $pfile_settings )
		return;

		$parameters = array(
    		'ajaxurl' => admin_url('admin-ajax.php'),
    		'nonce' => wp_create_nonce('pfile')
  		);

	wp_enqueue_script('pfile-ajax', plugin_dir_url(__FILE__) . 'js/pfile-ajax.js', array('jquery'), null, true);
	wp_localize_script('pfile-ajax', 'pfile', $parameters );
}

add_action('admin_enqueue_scripts', 'pfilepage_load_scripts');

// PROCESS AJAX HANDLER
function pfile_process_ajax() {

  if(empty($_POST) || !isset($_POST)) {

    ajaxStatus('error', 'Nothing to update.');

  } else {

    $data = $_POST;

    $dataString = $data['post'];
    parse_str($dataString, $dataArray);

    $nonce = $data['nonce'];

    if(wp_verify_nonce($nonce, 'pfile') !== false) {

      $user_ID = get_current_user_id();

	  $old = get_user_meta( $user_ID, 'repeatable_fields', true);
	  $new = array();

	  $names = $_POST['name'];
	  $urls = $_POST['url'];

	  $count = count( $names );

	for ( $i = 0; $i < $count; $i++ ) {
		if ( $names[$i] != '' ) :
			$new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );

		if ( $urls[$i] == 'http://' )
			$new[$i]['url'] = '';
		else
			$new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
		endif;
	}

	if ( !empty( $new ) && $new != $old )
		update_user_meta( $user_ID, '', $new );
	elseif ( empty($new) && $old )
		delete_user_meta( $user_ID, 'repeatable_fields', $old );

      $dataArray['name'];
      $dataArray['url'];

      if($user_ID != NULL) {
        foreach($dataArray as $key=>$value) {

          $status = update_user_meta($user_ID, $key, $value);

        }

        ajaxStatus('success', 'Meta fields updated.', $dataArray);

      } else {
        ajaxStatus('error', 'You are unauthorized to perform this action.', $dataArray);
      }

    } else {

      ajaxStatus('error', 'Nonce check cannot fail.');

    }

  }

}

// first parameter is identicle to action value. second parmater is the name of the function thats going to process it

add_action('wp_ajax_post_results', 'pfile_process_ajax');

function ajaxStatus($status, $message, $data = NULL) {

  $response = array (
    'status' => $status,
    'message' => $message,
    'data' => $data
    );
  $output = json_encode($response);

  exit($output);

}

?>

I am starting to be able to visualise the whole process. I will build again from the handbook only. I will stay with 1 form per page. Would you recommend using something like this to add the field groups to the form? http://jenwachter.com/jquery.repeatable/

Should I use the same handler function for all the pages/forms? Can you point me in the right direction on how to set up the javascript page for multiple forms.

And thanks again for the help I am a bit over my head with this project due last week.. yikes

Thank you for the assistance I really appreciate it. I have been reading up on the concept but I am still struggling to fully understand. ex. Does get_user_meta go in a ajax handler function? should I use JSON or ajax objects. Could you please point me in the right direction from here or what I need to learn next. Is it possible to have a button for users to add a new form section to the page? here is my attempt . Again thank you for your time.

<?php

/*
Plugin Name: Prometa
Plugin URI: http://akada:8888/prometa
Description: Profile style
Author: Brad
Version: 1.0
Author URI:
*/

// CSS STYLE ADMIN SCREEN =========================

function my_admin_theme_style() {
    wp_enqueue_style('my-admin-theme', plugins_url('wp-admin.css', __FILE__));
}
	add_action('admin_enqueue_scripts', 'my_admin_theme_style');
	add_action('login_enqueue_scripts', 'my_admin_theme_style');

/*** Register the plugin script*/
function wpdocs_prometa_admin_init() {
    // Register our script.
    wp_register_script( 'prometa_script', plugins_url( 'prometa_scipt.js', __FILE__ ) );
}
add_action( 'admin_init', 'wpdocs_prometa_admin_init' );

/*** Add Administration screen for the plugin*/
add_action('admin_menu', 'users_profile_pages');
function users_profile_pages() {
    /* Add our plugin submenu and administration screen */
    $page_hook_suffix = add_submenu_page( 'profile.php',   // The parent page of this submenu.
        __( 'Profile 1', 'profile1' ),             // The submenu title.
        __( 'Profile 1', 'profile1' ),             // The screen title.
        'read',                               // The capability required for access to this submenu.
        'profile1',                            // The slug to use in the URL of the screen.
        'wpdocs_prometa_manage_menu'                     // The function to call to display the screen.
    );

    /*
     * Use the retrieved $page_hook_suffix to hook the function that links our script.
     * This hook invokes the function only on our plugin administration screen,
     * see: https://developer.ww.wp.xz.cn/reference/hooks/admin_print_scripts-hook_suffix/
     */
    add_action( "admin_print_scripts-{$page_hook_suffix}", 'wpdocs_prometa_admin_scripts');
}

/*** Enqueue registered script in the admin*/
function wpdocs_prometa_admin_scripts() {
    // Link our already registered script to a page.
    wp_enqueue_script( 'prometa-script', array( 'jquery' ) );
	wp_localize_script( 'prometa-script', 'prometa_vars',
            array( 'prometa_nonce' => wp_create_nonce('prometa-nonce'),
			'ajaxUrl' => admin_url( 'admin-ajax.php' )) );
}

/*** screen function*/
function wpdocs_prometa_manage_menu() {
global $wpdb;
global $current_user;

	$option1 = get_user_meta( $current_user->ID, '_option1', true);
	$option2 = get_user_meta( $current_user->ID, '_option2', true);
	$option3 = get_user_meta( $current_user->ID, '_option3', true);

?>
	<div class="wrap">
    	<h2><?php _e('Profile 1', 'profile1'); ?></h2>

<form id="profile" form name="profile" action="'.admin_url('admin-ajax.php').'" method="POST">
<fieldset>
<label for="option1">Option1</label>
<input type="text" id="option1" name="option1" value="<?php echo $option1; ?>" />
</fieldset>

<fieldset>
<label for="option2">option2</label>
<input type="text" id="option2" name="option2" value="<?php echo $option2; ?>" />
</fieldset>

<fieldset>
<label for="option3">Option3:</label>
<input type="text" id="option3" name="option3" value="<?php echo $option3; ?>" />
</fieldset>

<input type="hidden" name="psubmit"  value= "psubmit" />
<button type="submit" class="submit custom-button-class right" value="psubmit">Submit Enquiry</button>
</form>

<?php
$option1 = $_POST['option1'];
$option2 = $_POST['option2'];
$option3 = $_POST['option3'];

	wp_die();
}

function psubmit_process_ajax() {

	if( !isset( $_POST['prometa_nonce'] ) || !wp_verify_nonce($_POST['prometa_nonce'], 'prometa_nonce') )
		die('Permission Check Failed');
	update_user_meta( $current_user->ID, '_option1', $option1);
	update_user_meta( $current_user->ID, '_option2', $option2);
	update_user_meta( $current_user->ID, '_option3', $option3);
	 if(!$option1) { echo ''; } else { echo '$' . $option1; }
 	if(!$option2) { echo ''; } else { echo '$' . $option2; }
	if(!$option3) { echo ''; } else { echo '$' . $option3; } 

	wp_die();
}

// first parameter is identicle to action value. second parmater is the name of the function thats going to process it

add_action('wp_ajax_psubmit', 'psubmit_process_ajax');

?>

jQuery(document).ready(function($) {
	$('#profile').submit(function() {
	var data = {
			action: 'psubmit',
			aad_nonce: prometa_vars.prometa_nonce
		};

	$.post(ajaxurl, data, function (response) {
			$('#psubmit').html(response);
			$('#aad_loading').hide();
		});

		return false;
	});
});