Uncaught Type error when trying to create a dropdown

steven.stenzel

I have managed to get the editor working with sever tables and joins, and I thought I would try to implement the dropdown option for some user friendliness, and how I am getting

Uncaught TypeError: Cannot use 'in' operator to search for '9' in json.users jquery.js:2
r jquery.js:2
m.extend.each jquery.js:2
labelValPair dataTables.editor.js:5121
fieldTypes.select.$.extend._addOptions dataTables.editor.js:5200
fieldTypes.select.$.extend.update dataTables.editor.js:5220
Editor.Field._typeFn dataTables.editor.js:422
that.(anonymous function) dataTables.editor.js:218
$.DataTable.initComplete datatest:60
(anonymous function) jquery.dataTables.js:5096
m.extend.map jquery.js:2
_fnCallbackFire jquery.dataTables.js:5095
_fnInitComplete jquery.dataTables.js:3248
(anonymous function) jquery.dataTables.js:3220
_fnBuildAjax.baseAjax.success jquery.dataTables.js:2380
j jquery.js:2
k.fireWith jquery.js:2
x jquery.js:4
b jquery.js:4

steven.stenzel

Here is the php, i am currently calling it through laravel routing, and dynamically generating the columns from an array, to allow me to edit it quickly. This works fine with join tables and double join tables, but I'm getting the error with dropdowns.

<?php
use
        DataTables\Editor,
        DataTables\Editor\Field,
        DataTables\Editor\Format,
        DataTables\Editor\Join,
        DataTables\Editor\Validate;

class DataTablesController extends \BaseController{
    private $Data = array();

    private function getData(){
        $this->Data = array(
            "columns"=>array(
                array("column"=>"listings.id",      "name"=>"Listing ID",   "type"=>"readonly"),
//              array("column"=>"listings.listing_type",    "name"=>"Listing Type", "type"=>""),
                array("column"=>"listings.creating_user",   "name"=>"users",    "type"=>"select"),
                array("column"=>"users.id",         "name"=>"User Id",  "type"=>"hidden"),
                array("column"=>"users.email",      "name"=>"Owner Data",   "type"=>"data"),
//              array("column"=>"listings.property_id", "name"=>"LProperty ID", "type"=>"hidden"),
                //array("column"=>"properties.id",      "name"=>"Property ID",  "type"=>"hidden"),
//              array("column"=>"properties.size_type", "name"=>"Size Type",    "type"=>""),
//              array("column"=>"properties.address_id",    "name"=>"PAddress ID",  "type"=>"hidden"),
//              array("column"=>"addresses.id",     "name"=>"Address ID",   "type"=>"hidden"),
//              array("column"=>"addresses.street_name",    "name"=>"Street Name",  "type"=>"")
            ),
            "joins"=>array(
//              array("table"=>"properties",            "key"=>"id",        "join"=>"listings.property_id"),
//              array("table"=>"addresses",         "key"=>"id",        "join"=>"properties.address_id"),
                array("table"=>"users",         "key"=>"id",        "join"=>"listings.creating_user")
            )
                
        );
    }

    public function index(){
        $this->getData();
        //$_POST = Input::all();
//      foreach($_POST as $key=>$value){error_log($key.' = '.$value);}
//      foreach($_GET as $key=>$value){error_log($key.' = '.$value);}
        //Try entering this page with a random get string - this needs to be fixed somehow
        if(!empty($_GET) || !empty($_POST)){
            require_once($_SERVER['DOCUMENT_ROOT'].'/../app/lib/datatables/DataTables.php');
        $columns = array();
        //Create Columns into array
        foreach($this->Data['columns'] as $column){$columns[] = Field::inst($column['column']);}
        $editor = Editor::inst( $db,'listings')->fields($columns);
        foreach($this->Data['joins'] as $join){ $editor->leftJoin($join['table'],$join['table'].'.'.$join['key'],'=',$join['join']);}
            
        $out = $editor->process($_POST)->data();
        //if(!isset($_POST['action'])){
            foreach($this->Data['columns'] as $column){
                if($column['type'] == 'data'){
                    $column['table'] = explode(".",$column['column']);
                    $column['column'] = $column['table'][1];
                    $column['table'] = $column['table'][0];
                    error_log('column["column"] = '.$column['column']);
                    $out[$column['table']] = $db->selectDistinct($column['table'],'id as value, '.$column['column'].' as label')->fetchAll();
                }
            }
        //}     

        echo json_encode( $out);
        }else{
        ?>
        <html>
        <head>
        <title> Corporate Back Office - Data Admin </title>
        <!-- DataTables, TableTools and Editor CSS -->
        <link rel="stylesheet" type="text/css" href="/assets/datatables/media/css/jquery.dataTables.css">
        <link rel="stylesheet" type="text/css" href="/assets/datatables/extensions/TableTools/css/dataTables.tableTools.css">
        <link rel="stylesheet" type="text/css" href="/assets/datatables/extensions/Editor-1.3.2/css/dataTables.editor.css">
        <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css">
        <!-- jQuery, DataTables, TableTools and Editor Javascript -->
        <script type="text/javascript" src="/assets/datatables/media/js/jquery.js"></script>
        <script type="text/javascript" src="/assets/datatables/media/js/jquery.dataTables.js"></script>
        <script type="text/javascript" src="/assets/datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
        <script type="text/javascript" src="/assets/datatables/extensions/Editor-1.3.2/js/dataTables.editor.js"></script>
        <?php require_once($_SERVER['DOCUMENT_ROOT'].'/../app/views/partials/scripts.php');?>
        <script type="text/javascript" language="javascript" class="init">
        var editor;

        $(document).ready(function() {
                editor = new $.fn.dataTable.Editor( {
                        ajax: "<?php echo basename($_SERVER['REQUEST_URI']);?>",
                        table: "#data",
                        fields: [
                    <?php
                    foreach($this->Data['columns'] as $column){
                        if($column['type'] != 'data' && $column['name'] != 'User Id'){
                            echo '{label: "'.$column["name"].'",name: "'.$column['column'].'"'; 
                            if(!empty($column['type'])){echo ", type: '".$column['type']."'";}
                            echo "},";
                        }
                    }
                    ?>  
                        ]
                } );


                $('#data').on('click','a.editor_edit',function (e) {
                        e.preventDefault()

            editor
                            .title( 'Edit record' )
                            .buttons( { "label": "Update", "fn": function() {editor.submit() } } )
                            .edit( $(this).closest('tr') );
                } );

                $('#data').DataTable( {
                        dom: "Tflriptip",
                        ajax: "<?php echo basename($_SERVER['REQUEST_URI']);?>",
                        "pagingType": "full_numbers",
                        "aLengthMenu": [[25,50,100,250,-1],[25,50,100,250,"ALL"]],
                        "iDisplayLength": 100,
                        columns: [
                    <?php foreach($this->Data['columns'] as $column){
                        if($column['type'] != 'hidden' && $column['type'] != 'select'){
                            echo('{ data: "'.$column['column'].'"},');
                        }
                    }
                    ?>
                    //EDIT BUTTON
                                {
                                        data: null,
                                        className: "center",
                                        defaultContent: '<a href="" class="editor_edit">Edit</a>'
                                }
                        ],
                        order: [ 0, 'asc' ],
                        tableTools: {
                                sRowSelect: "os",
                                aButtons: [
                                        {sExtends: "editor_edit"  , editor: editor },
                        {sExtends: "editor_remove", editor: editor }
                                ]
                        },
                initComplete: function (settings,json) {
                    editor.field( 'listings.creating_user').update('json.users');
                }
                } );
        } );

        </script>
        </head>
        <body>

        <?php require_once($_SERVER['DOCUMENT_ROOT'].'/../app/views/partials/logo.php');?>
        <div class="row">
        <div class="panel panel-default block-center" style="width:100%;margin-left:auto;margin-right:auto;">
        <div class="panel-heading" style="text-align:center;">
        <h1>Corporate Backoffice - Data Admin
        </h1>
        </div>
        <div class="panel-body" style="padding:2px;">
        <form name='Home' action='/' method='post' style="margin-bottom:0px;"><input style="width:10%;margin-left:15px;margin-top:0px;margin-bottom:0px;float:left;" type='submit' value='Home' class="btn btn-home"/></form>
        <form name='back' action='/' method='post' style="margin-bottom:0px;"><input style="width:10%;margin-left:5px;margin-top:0px;margin-bottom:0px;float:left;" type='submit' value='Back' class="btn btn-exit"/></form>
        </div>
        </div>
        </div>

        <table id="data" class="display" cellspacing="0" width="100%">
                <thead>
                        <tr>
                    <?php
                    foreach($this->Data['columns'] as $column){
                        if($column['type'] != 'hidden' && $column['type'] != 'data'){echo("<th>".$column['name']."</th>");}
                    }
                    ?>
                    <!-- Edit -->
                                <th>Edit</th>
                        </tr>
                </thead>
        </table>

    </body>
    <?php 
        } 
    }
}
?>

allan

Hi,

The thing that immediately stands out is:

'json.users'

You are passing in a string - not the value of json.users. Remove the quotes and, hopefully it will start working.

Allan

steven.stenzel

Perfect Allan, didn't immediately jump out yesterday, but i'm sure it will become obvious when I get used to your library. ;)