appending $.ajax response to Jquery UI dialog box in table format

Question

I am getting data in a php file from db as

while ($row=mysqli_fetch_row($result))
    {
    printf ("beacon id : %s \n",$row[2]);
    printf ("beacon uuid :(%s)\n",$row[3]);

    }

now i want to append that data in table and show in JQueryUI Dialog box like this

In ajax success form i tried to create hardcore table and get data

 success: function(response){                    

            for (var i = 0; i < 3; i++) {
                var row = $('<tr></tr>').appendTo(mytable);
                for (var j = 0; j < 3; j++) {
                    $('<td></td>').text("text1").appendTo(row);
                }

            }
    $('<table></table>').appendTo("#dialog");

    $("#dialog").dialog("open");        

        }

it is working fine

///////////////

when I tried to get to get my data in table its not working

I tried

 success: function(response){                    

         var table = $("#table tbody");
     $.each(response, function(idx, elem){
         table.append("<tr><td>"+elem.id+"</td></tr>");
     });


    $('<table></table>').appendTo("#dialog");

    $("#dialog").dialog("open");        

        }

but it is not working ,

console.log is coming like

what can i modify to display data ?

How the data is coming in response please console.log – Moiz Arif Nov 09 '17 at 11:11 — Moiz Arif, Nov 09 '17 at 11:11

c_sans · Answer 1 · 2017-11-09T11:46:19.683

0

You're not appending the table with data, instead you're creating a new empty table element and appending it.

Edit: You also can't loop over a string (which is the ajax response). If you output the html in php things will be simpler. This is also untested but hopefully you get the idea.

php:

while ($row = mysqli_fetch_row($result)) {
    printf("<tr><th>beacon id :<th> <td>%s</td><tr>", $row[2]);
    printf("<tr><th>beacon uuid :<th> <td>(%s)</td><tr>", $row[3]);
};

js:

success: function (response) {
    if (response) {
        var table = $("#table tbody");

        table.append(response);
        table.appendTo("#dialog");

        $("#dialog").dialog("open");
    }
}

edited Nov 09 '17 at 11:46

answered Nov 09 '17 at 11:18

c_sans

36
3

it says Cannot use 'in' operator to search for 'length' in – Neeraj Verma Nov 09 '17 at 11:21
Your response from php looks like a string. Would creating the table in php be fine? That seems like it would be a better solution in this case. – c_sans Nov 09 '17 at 11:29

score 0 · Answer 2 · answered Nov 10 '17 at 02:35

First, I would adjust your PHP so that it is sending back JSON data. The data you are sending back now is just text. It will not be read as an Object by JS.

PHP

$beacon = array();
while ($row=mysqli_fetch_row($result)){
    $beacon[] = array("id" => $row[2], "uuid" => $row[3]);
}
header('Content-type:application/json;charset=utf-8');
echo json_encode($beacon);

See: Returning JSON from a PHP Script

This creates an array of arrays. The resulting page should be something like:

[
  {
    "id": "Beacon00UUID::fda50693-a4e2-4fb1-afcf-c6eb07647825",
    "uuid": "(Beacon00RSSI::-69)"
  },
  {
    "id": "Beacon01UUID::2f234454-f491-1ba9-ffaf-000000000001",
    "uuid": "(Beacon01RSSI::-53)"
  },
  {
    "id": "Beacon02UUID::b9407f30-f5f8-466e-aff9-25556b57fe6d",
    "uuid": "(Beacon02RSSI::-75)"
  },
  {
    "id": "Beacon04UUID::00000000-0000-0000-0000-000000000000",
    "uuid": "(Beacon04RSSI::-88)"
  },
]

This will allow your jQuery to collect the content as JSON. In your success callback, you can handle this better. this is also assuming you have dataType: "json" elsewhere in your AJAX call.

jQuery

success: function(response){
  var $tbl = $("<table>");
  $.each(response, function(key, val){
    var $row = $("<tr>").appendTo($tbl);
    if(key % 2 == 0){
      $row.addClass("even");
    } else {
      $row.addClass("odd");
    } 
    var $cell = $("<td>").html(val.id).appendTo($row);
  });
  $("#dialog").html($tbl.prop("outerHTML")).dialog("open");
}

Now, if your data was coming back with a key of beacon id, you would need to call this exactly. For example, it would not be elem.id, it would have to be elem['beacon id'] to call the right index in the object. You can't use the dot notation that includes a space in the index name. Bare that in mind when naming your indexes.

There is a subtle difference with $.each() and .each(), the former is designed for arrays and objects, with a key and value pair and the latter designed for jQuery objects, with an index and element pair. nothing wrong with what you did, just explaining why you might use one over the other.

Hope this helps. Let me know if something is not clear.

appending $.ajax response to Jquery UI dialog box in table format

2 Answers2