Empty .HTML() on Javascript

Viewed 58

I am trying to generate a divs inside my row. I am getting the data from my PHP using an JSON Array.

The problem is the columns are not displaying.

Here is my PHP code:

 $response[] = array(
    'CLIENTDETAILS' => $clientdetails,
    'SPOUSEDETAILS' => $spousedetails,
    'COMAKER1DETAILS' => $comaker1details,
    'COMAKER2DETAILS' => $comaker2details
);

echo json_encode($response);

Here is my Javascript Code:

 $.ajax({
    url: 'generate-application-approval-client-details.php',
    method: 'POST',
    dataType: 'TEXT',
    data: {applno : applno, clientid : clientid},
    success: function(response) {
        $("#display-client-details").html(response[0].CLIENTDETAILS);
    }
 });

Here is the Result of my JSON:

CLIENTDETAILS: "<div class="col-lg-4">
↵                <label>Client ID</label>
↵                <label class="form-control">2000013652</label>
↵            </div>"

I also tried yung .innerHtml but the result is Undefined.

1 Answers

Yo have to parse your response in AJAX,

let responseData = JSON.parse(response);

Your AJAX code should be like:

$.ajax({
   url: 'generate-application-approval-client-details.php',
   method: 'POST',
   dataType: 'json',
   data: {applno : applno, clientid : clientid},
   success: function(response) {
       let responseData = JSON.parse(response);
       $("#display-client-details").html(responseData.CLIENTDETAILS);
   }
});
Related