ajax request not returning value

Question

I have an ajax request which gets a json string but for some reason it has started returning "undefined", The json string does return valid JSON but its just not working!

Ajax request:

 if (editSeq) {
        $.ajax({
            url: './json/admin/getData.php',
            type: 'POST',
            async: false,
            data: { SEQ: editSeq },
            dataType: 'json',
            success: function (data) {
                var HTML = data.HTML;
                $('#blankform').append(HTML);
                alert(HTML);
            }
        });

JSON:

<?php
include("../../includes/db.php");
$SEQ = $_POST["SEQ"];
$sth = sqlsrv_query($conn,"SELECT HTML from TBL_DATA WHERE Sequence = " . $SEQ);
$rows = array();
while($r = sqlsrv_fetch_array($sth,SQLSRV_FETCH_ASSOC)) {
    $rows[] = $r;
}
if( $sth === false)
{
     echo "Error in query preparation/execution.\n";
     die( print_r( sqlsrv_errors(), true));
}
print json_encode($rows);
?>

This is my JSON response:

   [
     {
    "HTML": "  \n\n<div id=\"div_143\" style=\"width: 300px; white-space: nowrap; padding-right: 50px; left: 60px; top: 48px;\" class=\"ui-resizable ui-draggable ui-resizable-disabled ui-state-disabled\" aria-disabled=\"true\"><label> Incident #&nbsp;<input type=\"text\" style=\"width:100%;\" id=\"input_143\" role=\"textbox\" aria-autocomplete=\"both\" aria-disabled=\"false\" aria-readonly=\"false\" aria-multiline=\"false\" class=\"jqx-widget-content jqx-widget-content-web jqx-input jqx-input-web jqx-widget jqx-widget-web jqx-rc-all jqx-rc-all-web\" placeholder=\"\" disabled=\"disabled\"><\\/label><div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"><\\/div><div class=\"ui-resizable-handle ui-resizable-w\" style=\"z-index: 90;\"><\\/div><div class=\"ui-resizable-handle ui-resizable-sw\" style=\"z-index: 90;\"><\\/div><div class=\"ui-resizable-handle ui-resizable-ne\" style=\"z-index: 90;\"><\\/div><div class=\"ui-resizable-handle ui-resizable-nw\" style=\"z-index: 90;\"><\\/div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"><\\/div><\\/div>"
     }
   ]

Answer 1

First of all, in AJAX scripts always terminate the script after you echo the output. Say, if you have something more down the script, like other IF's, no need to run them if you have already displayed JSON output, or the extra output can mess your JSON and everything will stop working.

So, always do:

print json_encode($rows);
exit;

Second of all, in your case you might have some SQL problems and all your problem is you don't see the error message. It may say "Error in query preparation/execution" but you just are not able to see it! Or you can have any other PHP fatal errors which you just can't see, as it messes up the JSON and Javascript can't display the .HTML part.

Your solution is to test it, temporarily changing the Javascript to:

$.ajax({
     url: './json/admin/getData.php',
     type: 'POST',
     async: false,
     data: { SEQ: editSeq },
     // dataType: 'json', // temporarily comment it out to receive plain messages
     success: function (data) 
     {
       alert(data); return; // temporary line. Remove after debuging.
       var HTML = data.HTML;
       $('#blankform').append(HTML);
       alert(HTML);
     }
});

And third of all, (after you added your JSON output) you seem to have an Array the topmost element of JSON, if it starts with [{"HTML":

To work with array you should change the JavaScript to:

var HTML = data[0].HTML;

or even, if there may be many rows:

var HTML = '';
for(i=0;i<data.length;i++) HTML += data[i].HTML;\

Answer 2

With var HTML = data.HTML; you are trying to gett the property "HTML" from the data object returned by your php. But you return an array of arrays (mysql rows). So: data.HTML is undefined.

Try:

 if (editSeq) {
         $.ajax({
             url: './json/admin/getData.php',
             type: 'POST',
             async: false,
             data: { SEQ: editSeq },
             dataType: 'json',
             success: function (data) {

                 $('#blankform').append(data);
                 alert(data);
             }
         });

actualy, it doesn't make much sense to publish raw data to a div or so, but in this case you will see your data and can proceed programming to process them.

In order to get the rows out of data (if my assumption is right) you should iterate over them:

 for ( var n = 0; n = data.length; n++ )  // rows
 {
      alert(data[n]); // show one single row
 }

According to your json, this can be changed:

 if (editSeq) {
         $.ajax({
             url: './json/admin/getData.php',
             type: 'POST',
             async: false,
             data: { SEQ: editSeq },
             dataType: 'json',
             success: function (data) {

                 $('#blankform').append(data[0].HTML);
                 alert(data[0].HTML);
             }
         });