Problems inserting AJAX response into page

Hello,

I found this post very helpful. I was able to follow it nearly to completion but am having one last issue I hope you can help me with. I have the ajax portion working correctly and my PHP returns an array of informantion using json encoding. My problem is getting that data into the text boxes on my page. If I set the AjaxRequest function like this:

function makeAjaxRequest(opts){
        $.ajax({
          type: "POST",
          data: {opts: opts},
		  //dataType: "json",
          url: 'wp-admin/admin-ajax.php?action=get_info',
          success: function(res) {
            $("#results").html( res );
          },
		  error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
          }
        });
      }

the result gets displayed on the page like this:
{“first_name”:[“Christine”],“last_name”:[“Kenney”],“nickname”:[“ckenney3”],“description”:[“”],“rich_editing”:[“true”],“comment_shortcuts”:[“false”],“admin_color”:[“fresh”],“use_ssl”:[“0”],“show_admin_bar_front”:[“true”]}

If I uncomment the dataType: “json” line, I no longer get the results displayed. I was sure that the datatype would need to be set to json in order to use the insertResults() function to populate the textboxes. the function that gets called with ajax is:

function get_info(){
	$data = get_user_meta($_POST['opts']);
	$response = json_encode($data);
	echo $response;
	exit;
}

I have tried to use the insertResults() function without setting the datatype to json as well as setting the datatype to json. it makes no difference. Any ideas of where I went wrong here?

Hi,

Welcome to the forums :slight_smile:

The thread you link to is six months old and to be honest, I forgot what was going on there.

Could you post the code you currently have and I can have a look at it from there.

Cheers!

Here is the code I have as of now.
PHP Function:

function get_info(){
	$data = get_user_meta($_POST['opts']);
	$response = json_encode($data, JSON_PRETTY_PRINT);
	echo $response;
	exit;
}
add_action( 'wp_ajax_nopriv_get_info', 'get_info' );
add_action( 'wp_ajax_get_info', 'get_info' );

HTML:

<?php
	$args = array(
		'blog_id'      => 2, // unless yours is a multisite install, you shouldn't need to change this
        //'exclude'      => array( 2,27 ), // IDs of users that need to be excluded
        'orderby'      => 'login' // Sort by 'ID', 'login', 'nicename', 'email', 'url', 'registered', 'display_name', or 'post_count'; defaults to 'login'
    ); 	
    $members = get_users( $args );
?>
   <p><label for="member">Select Member: </label>
    <select id="member">
      <option value="0">Please select</option>
      <?php foreach ($members as $member) {
		echo '<option value=' . $member->ID . '>' . $member->last_name . ", " . $member->first_name . '</option>';
		}
	  ?>
    </select></p>
    <div id="results">
	</div>
	<form name="admin" class="form_admin action="" method="post" enctype="multipart/form-data">
		<table width="100%" cellspacing="0" cellpadding="0" border="0">
			<?php if ( isset($_GET['updated']) ): $d_url = $_GET['d'];?>
			<tr>
				<td align="center" colspan="2"><span style="color: #FF0000; font-size: 11px;">Member info changed successfully</span></td>
			</tr>
				<?php elseif($errmsg!=""): ?>
			<tr>
				<td align="center" colspan="2"><span style="color: #FF0000; font-size: 11px;"><?php echo $errmsg;?></span></td>
			</tr>
			<?php endif;?>
		</table>
		
		<div class="profile_H2">
			<h2>Member Information</h2></td>
			<p></P>
		</div>
		<table cellspacing="6" cellpadding="10">
			<tr>
				<td>
					First <input class="admin_text" name="first_name" type="text" size="10" value="<?php echo $first_name ?>" />
					MI <input class="admin_text" name="mi" type="text" size="2" value="<?php echo $mi ?>" />
					Last <input class="admin_text" name="last_name" type="text" size="25" value="<?php echo $last_name ?>" />
					Email <input class="admin_text" name="email" type="text" size="25" value="<?php echo $email ?>" />
				</td>
			</tr>
		</table>
	</form>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
	function insertResults(json){
		$("#first_name").val(json['first_name']);
		$("#last_name").val(json["last_name"]);
		$("#mi").val(json["gtt_mi"]);
		$("#email").val(json["user_email"]);
	}
      function makeAjaxRequest(opts){
        $.ajax({
          type: "POST",
          data: {opts: opts},
          url: 'wp-admin/admin-ajax.php?action=get_info',
          success: function(result) {
            insertResults(result);
          },
		  error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
          }
        });
      }

      $("#member").on("change", function(){
        var selected = $(this).val();
        makeAjaxRequest(selected);
      });
    </script>

The HTML page is a wordpress plugin that I created to manage member attributes. when it runs, an admin should be able to select a user from the select element. The ajax function then passes the wordpress user_ID value to the get_info function. This function returns all user meta information from the database, encodes in with json, and returns it to the HTML page. When I have the ajax success function set to simply display the returned information, I do in fact get an array with all of the relevant information I am looking for. This part seems to work fine. It is at this point that I try to put that array into the insertResults() function which does not work.

Thank you for your help with this.

Hi,

The reason why your example code (at least) is not working, is that you are trying to select elements based on and id:

$("#first_name").val(json['first_name']);
$("#last_name").val(json["last_name"]);
$("#mi").val(json["gtt_mi"]);
$("#email").val(json["user_email"]);

but the elements you are trying to reference, don’t have an id:

First <input class="admin_text" name="first_name" type="text" size="10" value="<?php echo $first_name ?>" />
MI <input class="admin_text" name="mi" type="text" size="2" value="<?php echo $mi ?>" />
Last <input class="admin_text" name="last_name" type="text" size="25" value="<?php echo $last_name ?>" />
Email <input class="admin_text" name="email" type="text" size="25" value="<?php echo $email ?>" />

Sort that out and you should be fine.

Here’s a demo of it working.

Yes, it took me a while but I did figure that out, and that was the issue. Thanks for your reply.