Editor select field is not being populated from the Json string.

Editor select field is not being populated from the Json string.

A.obj.sys.incA.obj.sys.inc Posts: 14Questions: 7Answers: 4

The following is a stripped down version of my JSP file. I want the select field 'Host Name' to be populated with the two choices from my text file 'table_data.txt'. I believe that I have followed the join example correctly. https://editor.datatables.net/examples/simple/join.html

The following is my JSP. file.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello World - JSP Tutorial</title>

<script src="resources/jquery.min.js"></script>



<%--Begin links and scripts for Datatables and Editor --%>
<link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/r/dt-1.10.9/jqc-1.11.3,dt-1.10.9,b-1.0.3,se-1.0.1/datatables.min.css" />

<link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css" />

<link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/select/1.0.1/css/select.dataTables.min.css" />

<link rel="stylesheet" type="text/css"
    href="resources/Datatable-Editor-1.5.1/css/editor.dataTables.css">

<script type="text/javascript"
    src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js">
    
</script>
<script type="text/javascript"
    src="https://cdn.datatables.net/select/1.0.1/js/dataTables.select.min.js"></script>

<script type="text/javascript"
    src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>

<script type="text/javascript"
    src="resources/Datatable-Editor-1.5.1/js/dataTables.editor.js"></script>

<%--End of links and scripts for Datatables and Editor. --%>
<script>
    var editor;

    $(document).ready(function() {

        editor = new $.fn.dataTable.Editor({
            ajax : "foobar",
            table : "#edvs-table",
            fields : [ {
                label : "Host Name:",
                name : "ha.host_sequence_number",
                type : "select"
            }, {
                label : "Asset Name:",
                name : "ha.asset_name"
            } ]
        });

        editor.on('initEdit', function(node, data, row, type) {
            console.log(node, data, row, type);
        });

        $('#edvs-table').DataTable({
            dom : "Bfrtip",
            "ajax" : 'table_data.txt',
            columns : [ {
                data : "hosts.host_name"
            }, {
                data : "ha.asset_name"
            } ],
            select : true,
            buttons : [ {
                extend : "create",
                editor : editor
            }, {
                extend : "edit",
                editor : editor
            }, {
                extend : "remove",
                editor : editor
            } ]
        });
    });
</script>

</head>
<body>
    <%="Hello World! Version 42"%>

    <div class="container">
        <h2>Configured Host Assets</h2>

        <table id="edvs-table" class="display">
            <thead>
                <tr>
                    <th>Host Name</th>
                    <th>Asset Name</th>

                </tr>
            <thead>
            <tfoot>
                <tr>
                    <th>Host Name</th>
                    <th>Asset Name</th>

                </tr>
        </table>

    </div>

</body>
</html>

The following is my test file. It has been validated by Json Lint so I believe that it is correct.

{
  "data":[
    {
      "DT_RowId":"row_1",
      "ha":{
        "host_sequence_number":"1",
        "asset_name":"os"

      },
      "hosts":{
        "host_name":"Annapolis"
      }
    },
    {
      "DT_RowId":"row_2",
      "ha":{
 
        "host_sequence_number":"2",
        "asset_name":"net"

      },
      "hosts":{
        "host_name":"Baltimore"
      }
    }
  ]
}

If everything went correctly then the update select field and hopefully the edit select field would list 'Annapolis' and 'Baltimore'
, but it does not. The select field shows up but is empty. Any help or insight would be greatly appreciated.

This question has an accepted answers - jump to answer

Answers

  • A.obj.sys.incA.obj.sys.inc Posts: 14Questions: 7Answers: 4
    Answer ✓

    I am going to answer my own question here so that others do not fall into the same problem. Be aware that the sample's Ajax load, the data is very large ends with the following.

      "options": {
        "users.site": [
          {
            "value": "1",
            "label": "Edinburgh"
          },
          {
            "value": "2",
            "label": "London"
          },
          {
            "value": "6",
            "label": "Los Angeles"
          },
          {
            "value": "4",
            "label": "New York"
          },
          {
            "value": "3",
            "label": "Paris"
          },
          {
            "value": "5",
            "label": "Singapore"
          }
        ]
      },
      "files": []
    

    This portion of the data starts at line #436 which is way down on the data. You have to scroll down many times to see it. With this data the select field is loaded. Now that i know this, I will add the data to my Json string and hope for the best.
    To the forum administrator, I suggest that some text is added to the sample to encourage the reader to look at the end of the data. Just a thought.
    Please close this problem and have a great day.

  • allanallan Posts: 63,175Questions: 1Answers: 10,409 Site admin

    Hi,

    Good to hear you've got it working now. Thanks for posting back.

    Allan

This discussion has been closed.