Develop Reference

DataTables warning: table id=<my_table_name> - Requested unknown parameter '<my_table_first_column_name>' for row 0, column 0

I am quite new to Javascript, I am working to extend pieces of code implemented by third parts and I have to fill in a table with data using DataTables.
context
This table is made up of 3 columns: "nested field", "subfields blacklist", "edit", and when filled in with data should look like this:
The data to be filled in columns "nested field" and "subfields blacklist" come from the columns "nested field" and "subfields" of a Postgres database table defined as:
CREATE TABLE testing_nested_field_blacklist (
id SERIAL NOT NULL UNIQUE,
nested_field varchar(100) NOT NULL UNIQUE,
subfields varchar(100)[]
);
while data from "id" column is not needed in the html table.
problem
However, I am making some mistakes with Datatables and getting these two error popups when loading the html page (as I click "ok" on the first one, the latter pops up).
DataTables warning: table id=NestedFieldTable - Requested unknown
parameter 'nested_field_name' for row 0, column 0. For more
information about this error, please see http://datatables.net/tn/4
Note that at this point the table has only one row and not even the "edit" colums is populated with data (this column will be the only one to be successfully populated with data when I close the two error pop-ups).
DataTables warning: table id=NestedFieldTable - Requested unknown
parameter 'nested_field_name' for row 0, column 0. For more
information about this error, please see http://datatables.net/tn/4
Note that the error message is exactly the same both times.
Here is the html template:
<!-- Topbar Search -->
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<div class="topbar-divider d-none d-sm-block"></div>
<li class="nav-item">
<a class="nav-link text-black-50" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt mr-2"></i>
<span>Logout</span>
</a>
</li>
</ul>
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
<ol class="breadcrumb shadow-lg">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">Nested fields and subfields blacklists</li>
</ol>
<!-- alert messages -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong id="alert-success-title"></strong> <div id="alert-success-detail"></div>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong id="alert-danger-title"></strong> <div id="alert-danger-detail"></div>
</div>
<!-- TABELLA NESTED FIELDS -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-ban" aria-hidden="true"></i> Nested fields and subfields blacklists</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="NestedFieldTable" width="100%" cellspacing="0">
</table>
</div>
</div>
</div>
Here is the Javascript to fill in the table with data:
var NestedFieldTable;
$(document).ready(function() {
// NESTED FIELD
NestedFieldTable = $('#NestedFieldTable').DataTable({
"destroy": true,
"processing":true,
"ajax": {
"url": '/getNestedFields/',
"type":"POST",
"dataSrc": "nested_field"
},
"columns": columns_nested_field,
"columnDefs": [
{"targets": -1, "data": null, "defaultContent": "<i class='fas fa-edit' aria-hidden='true' id='modifyRow' data-toggle='modal' data-target='#myModalEditNestedField' title='Clicca per modificare il nested field o la blacklist'></i><i style='margin-left:15px;' class='fas fa-trash' aria-hidden='true' id='deleteRow' data-toggle='modal' data-target='#myModalDeleteNestedField' title='click top delete nested field and blacklist'></i>", "width": "75px"},
],
"dom": "<'row'<'col-md-6 toolbar_nestedfield'><'col-md-6'fBl>>" +
"<'row'<'col-md-6'><'col-md-6'>>" +
"<'row'<'col-md-12't>><'row'<'col-md-12'pi>>",
"buttons": [
{
extend: 'collection',
text: 'Export',
autoClose: true,
buttons: [
{
text: '<i class="fas fa-print"></i> Print',
extend: 'print',
messageTop: 'Table of nested fields and subfields blacklist.',
footer: false
}
]
},
{
text: '<i class="fas fa-sync-alt"></i>',
titleAttr: 'Refresh table',
action: function ( e, dt) {
dt.ajax.reload();
set_alert_message({"title":"Refresh", "detail":"Table successfully refreshed"}, "success");
}
}
],
"language": {
"searchPlaceholder": "Search",
"search": "<div class='form-group'><div class='input-group'><div class='input-group-prepend'><span class='input-group-text'><i class='fas fa-search fa-fw'></i></span></div>_INPUT_</div></div>",
"lengthMenu": "<div class='form-group'><div class='input-group'><div class='input-group-prepend'><span class='input-group-text'><i class='fas fa-list-ul fa-fw'></i></span></div>_MENU_</div></div>",
"oPaginate": {
sNext: '<span class="pagination-default">❯</span>',
sPrevious: '<span class="pagination-default">❮</span>'
}
}
});
$(".toolbar_nestedfield").html('<button type="button" class="dt-button" title="Click to add a new nested field and blacklist" data-toggle="modal" data-target="#myModalAddNestedField"><i class="fas fa-plus"></i></button>');
...
});
And here is the javascript defining the content of the columns:
var columns_nested_field = [
// { "title":"ID", data: "nested_field_blacklist_id"},
{ "title":"Nested field", data: "nested_field_name"},
{ "title":"Subfields blacklist", data: "nested_field_blacklist"},
{ "title":"Edit", "orderable": false, "className": 'icon_dt_style'}
];
"clues"
Note that the last part of html code, headed by
<!-- POPUP ADD ROW NESTED FIELD AND BLACKLIST -->
is a modal that allows the user to insert new data into the database table, and it correctly works, except for the fact that the new data is not displayed in the html table (as it is not displayed the ones already existing in the db).
What am I doing wrong? How can I fix it?
question update
the url /getNestedFields/ in the js code made to populate the html table is bounded to class extractNestedFields via tornado web framework in this way:
application = tornado.web.Application([
...
(r"/getNestedFields/", extractNestedFields),
...
])
where class extractNestedFields iis defined as:
class extractNestedFields(BaseHandler):
#gen.coroutine
def post(self):
dictionary_nested_field = {}
rows = yield testing_database.get_nested_fields()
print(rows) #ok
if len(rows) > 0:
dictionary_nested_field["nested_field"] = rows
else:
dictionary_nested_field["nested_field"] = []
raise gen.Return(self.write(json.dumps(dictionary_nested_field, default=myconverter)))
and when loading the html page, the content of rows is:
[
{'nested_field': '1', 'subfields': ['one', 'two', 'three']},
{'nested_field': '2', 'subfields': ['one', 'two', 'three', 'coming from the backend']},
{'nested_field': '3rd_nested_field', 'subfields': ['jret_subfield_1.3', 'jret_subfield_2.3', 'jret_subfield_3.3']},
{'nested_field': '5', 'subfields': ['one', 'two', 'three', 'coming from the backend']},
{'nested_field': 'jret', 'subfields': ['jret_subfield_1.1', 'jret_subfield_2.1', 'jret_subfield_3.1']}
]
that is the content of my table in the db.

SOLVED
The key data
inside each {} element of columns_nested_field variable
(which is necessary to define the title and the data that one wants to fill in the columns of the html table via DataTable)
has to have value equal to
the title of the columns of the db table containing the data that one wants to fill in the html table.
So, since in my case the data I want to fill in the html table comes from the columns nested_field, subfields of the db table testing_nested_field_blacklist ,
in the declaration of javascript variable columns_nested_field (which is necessary to make DataTable work), I substituted
{ "title":"Nested field", data: "nested_field_name"},
{ "title":"Subfields blacklist", data: "nested_field_blacklist"},
with
{ "title":"Nested field", data: "nested_field"},
{ "title":"Subfields blacklist", data: "subfields"},
and now the table is correctly filled in with the data.
update
I've just learned from this thread that the key data I mentioned above has to have value equal to a field name/key used in the JSON object (that in my script is being generated at line
raise gen.Return(self.write(json.dumps(dictionary_nested_field, default=myconverter)))
of the post coroutine method of instance of class extractNestedFields, one object per row.

AngularJS dynamic routing from index to detailed page

I'm trying to route from an index list of items to a page that will display a detailed view of that item.
In my index view I have a table that iterates through all the items that are saved in the database.
There is a button under the actions column that will take me to events/show route using ng-click="go('events/show')"
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Title</th>
<th class="col-md-2">Actions</th>
</tr>
</thead>
<tbody>
<tr scope="row" ng-repeat="event in events | reverse | filter:filterByUID">
<td>{{event.title}}</td>
<td class="col-md-2">
<div class="btn-group" role="group" aria-label="actions">
<button class="btn btn-primary" ng-click="go('events/show')">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
</button>
<button class="btn btn-primary" ng-click="events.$remove(event)">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
The table looks like this:
In my controller I have:
$scope.go = function ( path ) {
$location.path( path );
};
in my routes.js I have:
.whenAuthenticated('/events/show', {
templateUrl: 'views/eventShow.html',
controller: 'eventShowCtrl'
})
Everything works so far.
However, what is unclear to me is how do I pass the event id to the eventShow.html page, so I know which item was clicked from the index list, so I can display the detailed information?
My firebase database looks like this:

Check out ui-router, it makes dynamic routing much easier
https://github.com/angular-ui/ui-router
But if you want to keep what you have, you should pass the event id into your path, like such
$scope.go = function ( path, event ) {
$location.path( path + "/" + event.id );
};
.whenAuthenticated('/events/show/:eventId', {
templateUrl: 'views/eventShow.html',
controller: 'eventShowCtrl'
})
and in your controller, access $stateParams.eventId to load that event.

You should use a variable in your router:
.whenAuthenticated('/events/:id', {
templateUrl: 'views/eventShow.html',
controller: 'eventShowCtrl'
})
Then you can simply use the ID in your function call:
go('events/:id')
Here's a great tutorial (and I highly recommend watching all of both parts).
And you'll have nicer URLs that can be bookmarked.

One you could pass the UID(uid is just an example for user id) onClick
<tr scope="row" ng-repeat="event in events | reverse | filter:filterByUID">
<td>{{event.title}}</td>
<td class="col-md-2">
<div class="btn-group" role="group" aria-label="actions">
<button class="btn btn-primary" ng-click="go('events/show', event.UID)">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
</button>
<button class="btn btn-primary" ng-click="events.$remove(event)">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
</div>
</td>
</tr>
Then in your js file
$scope.go = function ( path, uid ) {
$location.path( path + "/" + uid );
};
.whenAuthenticated('/events/show/:eventId', {
templateUrl: 'views/eventShow.html',
controller: 'eventShowCtrl'
})
Then to query firebase, say you have a field in your objects called uid, you can use startAT and endAT methods.
See here for example
And here to read more on filtering

Using jquery with dynamically created elements from angular doesnt work

Im trying to use jquery to manipulate elements created by angular, but I am not able to get it to work. I was wondering if anyone could help me out. Thanks
Here is the HTML
<div class="patients">
<tbody ng-repeat="patient in patients">
<tr>
<td>{{patient.name}}</td>
<td>{{patient.number}}</td>
<td>{{patient.date}}</td>
<td id="item-{{$index}}">{{patient.reminded}}</td>
<div class="sendreminder">
<td>
<a href="" class="btn btn-info btn-sm sendreminder" style=" background-color: #00e699; border-color:#00e699; " ng-click="post($index) " "$parent.selected = $index" id="button-{{$index}}">
<span class="glyphicon glyphicon-send"></span> Request Payment
</a>
</td>
</div>
<td>
<a href="" style="text-decoration:none; color:inherit; scale: 4" class="pe-7s-info">
</a>
</td>
</tr>
</tbody>
</div>
Here is the jquery
$(function() {
$('.patients').on('click', ".sendreminder",function(e){
alert('worked');
});
});

ng-repeat recreates DOM everytime it detects changes(and hence, all the attached events will be gone). So to reattach the events after ng-repeat finishes, you can do
<tbody ng-repeat="patient in patients" ng-init="$last && ngRepeatFinish()">
$last will be set to true if its the last item for ng-repeat
and in you controller, create ngRepeatFinish() function
$scope.ngRepeatFinish = function(){
$('.sendreminder').click(function(e){
alert('worked');
});
}
you can also make custom directives for this which is better than this, but this will suffice for a quick solution.
See this for a solution with custom directives

You should call that code immediately after you dynamically create the new element since that code sets the handler for the actual elements (when you call the function) that have class .patients, not the new ones...

i recommend you to use Angular instead of Jquery
added both methods below
//using Jquery
$('.patients').on('click', ".sendreminder", function(e) {
alert('from JQuery');
});
function TestCtrl($scope) {
$scope.patients = [{
name: 'one',
number: 1,
date: '2016-08-16',
reminded: true
}, {
name: 'two',
number: 2,
date: '2016-08-16',
reminded: true
}, {
name: 'three',
number: 3,
date: '2016-08-16',
reminded: false
}];
//using angular
$scope.post = function(i) {
alert('from Angular');
var selectedPatient = $scope.patients[i];
console.log(selectedPatient);
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app>
<div class="patients" ng-controller="TestCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
<th>Date</th>
<th>Reminded</th>
<th>Request</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="patient in patients">
<td>{{patient.name}}</td>
<td>{{patient.number}}</td>
<td>{{patient.date}}</td>
<td id="item-{{$index}}">{{patient.reminded}}</td>
<td>
<a href="" class="btn btn-info btn-sm sendreminder" style="background-color: #00e699; border-color:#00e699;" ng-click="post($index)" id="button-{{$index}}">
<span class="glyphicon glyphicon-send"></span> Request Payment
</a>
</td>
<td>
<a href="" style="text-decoration:none; color:inherit; scale: 4" class="pe-7s-info">test
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

How to reload angularJs ng-table

I have an ng-table. I have multiple ng-tables inside one controller. I am giving dynamic attributes i.e. ng-table="tableParams2" or ng-table="tableParams3" etc. to them.
I am making an ajax request on button click function to update the data. My http request is being sent at backend. By after I click 3-4 times, I see in console my table is reloaded. By after data, my data remains constant, I don't see the reloaded content in table. Below is my code:
Html:
<button ng-click="qualifyX(2)" ></button>
<div class="dragable modal hide fade ui-draggable in" id="ptn_popup" aria-hidden="false" data-backdrop="false">
<div class="modal-header">
<a class="close" data-dismiss="modal" data-original-title="" title="">×</a>
<h4>Possible matched Companies</h4>
</div>
<div class="modal-body" style="padding: 10px;">
<div id="ptn_qualify_res" class="grid-view">
<div class="summary"></div>
<table ng-table="tableParams2" show-filter="true" class="items table table-striped table-bordered table-condensed">
<tr ng-repeat="business in $data">
<td data-title="'Primary Trading Name'" sortable="'primary_trading_name'" filter="{ 'primary_trading_name': 'text' }">
{{business.primary_trading_name}}
</td>
<td data-title="'Primary Entity Name'" sortable="'primary_entity_name'" filter="{ 'primary_entity_name': 'text' }">
{{business.primary_entity_name}}
</td>
<td data-title="'Business Name(s)'" sortable="'business_names'" filter="{ 'business_names': 'text' }">
{{business.business_names}}
</td>
<td data-title="'Other Trading Name(s)'" sortable="'other_trading_names'" filter="{ 'other_trading_names': 'text' }">
{{business.other_trading_names}}
</td>
<td data-title="'State'" sortable="'state'" filter="{ 'state': 'text' }">
{{business.state}}
</td>
<td style="width:70px;">
<a data-dismiss="modal" href="javascript:void(0)" data={{business.business_id}} class="ptn_qualify_view_link">
<button type="button" class="btn btn-mini"><i class="icon-eye-open"></i> View </button>
</a>
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="btn" id="yw11" href="javascript:void(0);" data-original-title="" title="">Close</a>
</div>
</div>
App.js
$scope.qualifyX = function(busID) {
var penModal = $('#popups_container' + busID + ' #pen_popup');
var pen = $('#popups_container' + busID).next().find('input#Custombusiness_primary_entity_name').val();
var selectors = {pen: pen, penModal: penModal};
$http.get(getPtnData + '?ptn=' + selectors.ptn).success(function(data) {
selectors.ptnModal.find('#ptn_qualify_res').removeClass('grid-view-loading').addClass('grid-view');
$scope['tableParams' + busID] = new ngTableParams(
{
page: 1, // show first page
count: data.length, // count per page
sorting:
{
primary_trading_name: 'asc' // initial sorting
}
}, {
total: 0, // length of data
getData: function($defer, params) {
var filteredData = params.filter() ?
$filter('filter')(data, params.filter()) :
data;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
data;
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
};
Create a somewhat similar Plunker, on every click I want to reload the table with new data.

I was having a very similar problem where my table was rendering but not reloading upon an action. What you need to do is to reload $scope.tableParams every time your button is clicked. A simple way to do this is to wrap $scope.tableParams.reload() in a function, and then call that function when the button is clicked.
controller code:
$scope.doSearch = function () {
$scope.tableParams.reload();
}
html code:
<button ng-click="doSearch()">Search</button>

I resolved finally the problem.
When I received the update data for the table it's necessary reload the table as follows:
$scope.tableData = data;
$scope.tableParams.total($scope.tableData.length);
$scope.tableParams.reload();

in case anyone else hits this. I created my own filter that creates a new size array.
I used
$scope.tableParams.total(data.length)
to update the length before reloading the table.

This code works for me ,
write it in your function- where you get your dynamic data
$scope.tableParams.reload();
$scope.tableParams.page(1);
$scope.tableParams.sorting({});

EmberJS re-use same template, but displays the template twice

I am playing with Ember, and building a basic contact management app to learn Ember. I am following the Emberjs getting started guide. Only instead of doing a "to-do" app, Im doing my own thing in hopes of picking it up better.
My Router, and Routes:
App.Router.map(function() {
this.resource('users', function() {
this.resource('user', { path: ':user_id' });
this.route('motoDigitalTrue');
});
this.resource('about');
});
App.UsersRoute = Ember.Route.extend({
model: function() {
return App.User.find();
}
});
App.UsersMotoDigitalTrueRoute = Ember.Route.extend({
model: function(){
return App.User.filter(function(user) {
if (user.get('motoDigital')) {
return true;
}
});
},
renderTemplate: function(controller) {
this.render('users', {
controller:controller
});
}
});
Essentially, I have a template named 'users' that I want to reuse. This template lists all the users. I have a sorting button that when clicked, will only display the users who have the motoDigitalTrue property set to true. The sorting is correct, but it just displays another Users template, rather than re-populating the original.
My Users template:
<script type="text/x-handlebars" id="users">
<div class="span10 tableContainer">
<button class="btn btn-primary createUser" {{action createUser}}><i class="icon-plus icon-white"></i> Add a Contact</button>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Sort<span class="caret"></span></a>
<ul class="dropdown-menu">
{{#linkTo 'users.motoDigitalTrue' activeClass="selected"}}Receiving MOTO Digital{{/linkTo}}
</ul>
</div>
<div class="tableScrollable">
<table class="table table-striped">
<thead>
<tr>
<th class="nameHead">Name</th>
<th class="companyHead">Company</th>
<th class="emailHead">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">&nbsp</td>
<td class="company">&nbsp</td>
<td class="email">&nbsp</td>
</tr>
{{#each model}}
<tr>
<td class="name"><i class="icon-user"></i> <strong>{{#linkTo 'user' this }}{{firstName}} {{lastName}}{{/linkTo}}</strong></td>
<td class="company">{{company}}</td>
<td class="email"><i class="icon-envelope"></i> <a {{bindAttr mailto="email"}}>{{email}}</a></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
<div class="span3">
{{#if isCreateUser}}
<div class="well">
{{partial 'users/createUser'}}
<button {{action 'saveUser'}} class="btn btn-primary"><i class="icon-ok icon-white"></i> Save</button>
</div>
{{else}}
{{outlet}}
{{/if}}
</div>
</script>
I have been unable to find an answer, and any help would be appreciated!

I guess in your case to reuse templates, you should try using a partial, have a look here.
For example, rename your users template to _users
<script type="text/x-handlebars" data-template-name='_users'>
...
</script>
and then use the partial helper to render it
{{partial users}}
Note that {{partial}} takes the template to be rendered as an argument, and renders that template in place. This means that it does not change context or scope. It simply renders the given template with the current scope.
Hope it helps.