translating ajax data to html

[sicklermd]

i have a list of clients on a page, each client has an icon to click on to edit the client details.

 

<i class="fas fa-user-edit gray openModal" data-modal="modal2" client="'.$client['id'].'"></i>

 

Everything is good up to this point. click the icon the proper modal opens and it triggers the js file just fine. (I did alot of console logs to ensure). The client variable in my jquery file holds fine and i'm able to get it passed to the php file.

in the php file i'm able to pull the information into an array and i was able to just echo the $client['firstName'] and have it show in the console.

when i moved to getting that information and parse it as the Json is when i got lost. Can someone please help me take my result and load into my form fields. The code i have now may be totally off because i've been playing with different code from different searches.

i'm able to get the ajax object, just unsure of how to get it from that form to a usable form to place a values for my form inputs.  

 

form (shortened to two fields for ease of example)

<form id="form" class="editClient ajax" action="ajax/processForm.php" 
method="post">

<input type="hidden" id="refreshUrl" value="? 
page=clients&action=view&client=<?php echo $client['id'];?>">
<input type="hidden" name="client" value="<?php echo $client['id'];?>">

<div class="title">
    Client Name             
</div>



<div class="row">

    <!-- first name -->
    <div class="inline">
        <input type="text" id="firstName" name="firstName" value="<?php echo $client['firstName']; ?>" autocomplete="nope" required>
        <br>
        <label for="firstName">First Name<span>*</span></label>
    </div>
<!-- last  name -->
    <div class="inline">
        <input type="text" id="lastName" name="lastName" value="<?php echo $client['lastName']; ?>" autocomplete="nope" required>
        <br>
        <label for="lastName">Last Name<span>*</span></label>
    </div>

</form>

javascript/jquery file

 

$('.openModal').on('click', function() {

  //$('body, html, div').scrollTop(0);

  var that = $(this),
  client = that.attr('client');

  $.ajax({

    type: "post",
    url: "ajax/getClient.php",
    data: {id:client},
    success: function(response){

      var result = JSON.parse(response);
      var data = result.rows;

      $("#firstName").val(data[0]);

    }
  })

  });

php file

 

<?php

include('../functions.php');

$sql = 'SELECT * FROM clients WHERE id="'.$_POST['id'].'"';
$result = query($sql);
confirmQuery($result);

$data = fetchArray($result);

echo json_encode(['response' => $data]);

?>

[requinix]

So you have the edit button with a client ID. When someone clicks it, there's an AJAX call to get client info, then that info is stuffed into an edit form? And you need help getting that info into the form?

First, look at your PHP. It will return (as JSON) an object with a response property. That response contains a row of data for the client. Your Javascript needs to match that.

1. Don't JSON.parse it yourself. jQuery can do that fine. Edit your PHP to say

header('Content-Type: application/json');
echo json_encode(['response' => $data]);

jQuery will recognize it and parse for you.

2. The "response" parameter in your success callback is the whole response, not just a part of it. Rename it to "data" (to avoid confusion) and then get the client information as"data.response".

3. Assuming fetchArray returns associative data, the client's first name will be data.response.firstName...