Uncaught Type error when trying to create a dropdown

steven.stenzel · August 2014

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 · August 2014

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
<?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>

<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">

<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 
    } 
}

}

<?php > ``` ?>

allan · August 2014

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 · August 2014

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

Uncaught Type error when trying to create a dropdown

Uncaught Type error when trying to create a dropdown

Answers

Howdy, Stranger!

Categories

DataTables

Uncaught Type error when trying to create a dropdown

Uncaught Type error when trying to create a dropdown

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables