We Keep Coding

JavaScript loop inside tinymce button

My JavaScript loop is not working properly inside a tinymce button.
I set a variable n which is the array size that I get from my html input.
var n = $('#total').val();
Then, I create the array of tinymce buttons: var menuItems = [];
In my tinymce editor init, I create the buttons:
editor.on('init', function (e) {
for (var i=1; i<=n; i++){
var obj = {
text: 'Item ' + i,
onclick: function() {
var msg = ' <strong>#item' + i + '#</strong> ';
editor.insertContent(msg);
}
}
menuItems.push(obj);
}
});
Last step is add the menuItems to the tinymce buttons:
editor.addButton('myButton', {
type: 'menubutton',
text: 'Items',
icon: false,
menu: menuItems
});
The buttons are displaying correct with the correct label. I have the buttons:
Item 1
Item 2
Item 3
However, doesn't matter which button I click, the text displayed in the editor is item3. It always get the last button text.
Does anyone know why it is happening?
Thanks

Use let instead of var since let would keep its lexical block scope where var would not:
editor.on('init', function(e) {
for (let i = 1; i <= n; i++) { // <-- use let here
var obj = {
text: 'Item ' + i,
onclick: function() {
var msg = ' <strong>#item' + i + '#</strong> ';
editor.insertContent(msg);
}
}
menuItems.push(obj);
}
});
Here is the documentation on let

jQuery DataTable - Column level filters on top and fixed height not working together

I am trying to display data in a jQuery DataTable which has column level filter at the top, fixed height and scroller enabled. I am able to display the column level filter at the top and have it working. But, as soon as I set the height (scrollY property), the column level filters at the top disappear.
Fiddler: https://jsfiddle.net/8f63kmeo/6/
HTML:
<table id="CustomFilterOnTop" class="display nowrap" width="100%"></table>
JS
var Report4Component = (function () {
function Report4Component() {
//contorls
this.customFilterOnTopControl = "CustomFilterOnTop"; //table id
//data table object
this.customFilterOnTopGrid = null;
}
Report4Component.prototype.ShowGrid = function () {
var instance = this;
//create the datatable object
instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({
columns: [
{ data: "Description", title: "Desc" },
{ data: "Status", title: "Status" },
{ data: "Count", title: "Count" }
],
"paging": true,
//scrollY: "30vh",
//deferRender: true,
//scroller: true,
dom: '<"top"Bf<"clear">>rt <"bottom"<"Notes">ilp<"clear">>',
buttons: [
{
text: 'Load All',
action: function (e, dt, node, config) {
instance.ShowData(10000);
}
}
]
});
//now, add a second row in header which will hold controls for filtering.
$('#' + instance.customFilterOnTopControl + ' thead').append('<tr role="row" id="FilterRow">' +
'<th>Desc</th>' +
'<th>Status</th>' +
'<th>Count</th>' +
'</tr>');
$('#' + instance.customFilterOnTopControl + ' thead tr#FilterRow th').each(function () {
var title = $('#' + instance.customFilterOnTopControl + ' thead th').eq($(this).index()).text();
$(this).html('<input type="text" onclick="StopPropagation(event);" placeholder="Search ' + title + '" class="form-control" />');
});
$("div.Notes").html('<div class="alert alert-warning">This is a notes section part of the table dom.</div>');
};
Report4Component.prototype.BindEvents = function () {
var instance = this;
$("#CustomFilterOnTop thead input").on('keyup change', function () {
instance.customFilterOnTopGrid
.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
};
Report4Component.prototype.ShowData = function (limit) {
if (limit === void 0) { limit = 100; }
var instance = this;
instance.customFilterOnTopGrid.clear(); //latest api function
var recordList = [];
for (var i = 1; i <= limit; i++) {
var record = {};
record.Description = "This is a test description of record " + i;
record.Status = "Some status " + i;
record.Count = i;
recordList.push(record);
}
instance.customFilterOnTopGrid.rows.add(recordList);
instance.customFilterOnTopGrid.draw();
};
return Report4Component;
}());
$(function () {
var report4Component = new Report4Component();
report4Component.ShowGrid();
report4Component.BindEvents();
report4Component.ShowData();
});
function StopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
Current Status
When the following properties are commented,
//scrollY: "30vh",
//deferRender: true,
//scroller: true,
the table appears with the column level filters on top as shown below,
Issue:
When the above properties are enabled, the column level filter disappears,
You can use the fiddler to see this behavior.
Expectation:
I want to have a DataTable with column level filter on top, fixed height and scroller enabled. What am I missing? Any help / suggestion is appreciated.

You need to use table().header() API function to access thead element instead of referencing it directly. When Scroller or FixedHeader extensions are used thead element appears outside of your table in a separate element.
See updated jsFiddle for code and demonstration.

How to add Rowspan in JQuery datatables

Im using Jquery datatables to construct a table.
My requirement is like below
This is not a static table, and we are rendering it using json data. Here I'm, rendering the rows dynamically using "aoColumns".
Is there any way to use rowspan so that the cells (1,2,David,Alex) can be spanned.
Does datatables support this kind of table ?

Datatables does not support this kind of grouping out of the box.
But, as in many cases, there is a plugin available.
It is called RowsGroup and is located here: Datatables Forums. A live example is also included.
If you change the JS part in this example to the below you will have your desired output presented to you in the output window.
$(document).ready( function () {
var data = [
['1', 'David', 'Maths', '80'],
['1', 'David', 'Physics', '90'],
['1', 'David', 'Computers', '70'],
['2', 'Alex', 'Maths', '80'],
['2', 'Alex', 'Physics', '70'],
['2', 'Alex', 'Computers', '90'],
];
var table = $('#example').DataTable({
columns: [
{
name: 'first',
title: 'ID',
},
{
name: 'second',
title: 'Name',
},
{
title: 'Subject',
},
{
title: 'Marks',
},
],
data: data,
rowsGroup: [
'first:name',
'second:name'
],
pageLength: '20',
});
} );
Here is a screenshot of the result:

I tried the RowsGroup plugin, but it achieves this just by hijacking the DataTables sort mechanism. If you tell it to group a given column, what it does for you is basically to apply a sort to that column that you can't turn off. So, if you want to sort by another column, you can't. That didn't work in my application.
Instead, here's a working fiddle for a recipe that allows you to achieve this result:
https://jsfiddle.net/bwDialogs/fscaos2n
The basic idea is to flatten all of your multi-row data into a single row. Content in your 2nd, 3rd, etc. rows are stored as a hidden <script> template tag within your first row.
It works by using DataTables' drawCallback function to manipulate the DOM once DataTables has rendered it, without confusing DataTables by having to try parsing rowspan cell content.
Since this modifies the DOM after DataTables has done its magic, your multi-row sections will stick together even with pagination, searching, and sorting.
Cheers.

add a below code and modify according to your requirement
$(window).on("load",function() {
MakeRows();
addRowspan();
$(".paginate_button").on("click", function() {
MakeRows();
addRowspan();
});
});
function MakeRows() {
var tmp_tbl = $("#dashboardDetails");
var _l = tmp_tbl.find("tr");
var _td = "",_t_td = "", old_txt = "",_t_txt = ""; _tr_count = 1;_tr_countadd = 1;
for(i = 0;i< _l.length; i ++) {
_t_td = tmp_tbl.find("tr").eq(i).find("td").eq(0).find("span");
_t_txt = $(_t_td).text();
_t_txt = _t_txt.replace(/\//,"_");_t_txt = _t_txt.replace(/\//,"_");
if (_t_txt.length > 0) {
if(_t_txt != old_txt) {
if($(_l).eq(i).hasClass(_t_txt) == false) {
_tr_count = 1;_tr_countadd = 1;
$(_l).eq(i).addClass("" + _t_txt + "").addClass(_t_txt + "_" + i);
}
old_txt = _t_txt;
} else {
_tr_count = _tr_count + 1;
if (_tr_countadd == 1) {
$(_l).eq(i).addClass("" + _t_txt + "").addClass(_t_txt + "_" + i)
.addClass("hiddenClass").addClass("maintr").attr("trcount", _tr_count).attr("addedtrcount", "maintr");
_tr_countadd = _tr_countadd + 1;
} else {
$(_l).eq(i).addClass("" + _t_txt + "").addClass(_t_txt + "_" + i)
.addClass("hiddenClass").attr("trcount", _tr_count)
}
}
}
_t_td = "";
}
}
function addRowspan() {
var t_txt = "";
var _alltrmain = $(".maintr");
var _h_td = ["0","10","11","12","13"];
for (i = 0; i <= _alltrmain.length; i ++) {
for (j = 0; j <= _h_td.length; j ++) {
t_txt = $(_alltrmain).eq(i).attr("trcount");
$(_alltrmain).eq(i).prev().find("td").eq(_h_td[j]).attr("rowspan", t_txt);
}
}
}

Slickgrid: Multiple Grouping with dynamic Parameters

I am working on SlickGrid JS plugin. And i want to dynamically group the Grid/Table based on the table header. How should I pass the parameters [getter,formatter, aggregators] dynamically
without hard coding like this
dataView.setGrouping([
{
getter : "department",
collapsed : false,
formatter : function(g){
return g.value;
},
comparer : groupComparer
},{
getter : "faculty",
collapsed : false,
formatter : function(g){
return g.value;
},
comparer : groupComparer
}
]);
Is it possible to use any looping statements to generate Array of parameters

I have tried much, and found this solution
arr=["department","faculty"]; //Dynamically generated array having titles to group
var ar = []; //empty array to push parameters
for(i = 0; i < arr.length; i++)
{
ar[i] = {
getter: arr[i],
formatter: function (g) {
return ": " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
},
aggregators: [
new Slick.Data.Aggregators.Avg("percentComplete"),
new Slick.Data.Aggregators.Sum("cost")
],
aggregateCollapsed: false,
lazyTotalsCalculation: false
};
}
dataView.setGrouping(ar);

Backgrid not appending my custom cell

Hello I am trying to append a custom type of cell I created to my backgrid instance but I keep getting the following error:
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
I Console.logged the collection and the columns it turns out the above exception occurs on my custom cell. I think it is because it does not have a column attribute:
This is what my custom cell looks like:
return QuestionCell.extend({
distractors: ['-', 't', 'f'],
template: 'gradescreen/table/mc',
render: function () {
var $val_td, view = this, correct_td = '',
current_state = view.model.get('responses').stateModel.get('state'),
correct_answer = '', selected = '-', select = '', pos, key_length;
view.current_response = view.getCurrentResponse(view.model);
if (view.current_response.get('response').prefix) {
selected = view.current_response.get(
'response'
).prefix === 'a' ? 't':'f';
}
if (view.question_meta.get('correct_prefix') ===
view.current_response.get(
'response').prefix) {
correct_td = ' correct_td';
}
$val_td = $('<td class="response_td' + correct_td + '" />');
app.fetchTemplate(view.template, function (tmpl) {
$val_td.html(tmpl({cid: view.cid, q_number: view.question_number}));
key_length = _.keys(view.question_meta.get('answers')).length;
for (pos = 0; pos <= key_length; pos++) {
var prefix = view.distractors[pos];
correct_answer =
prefix === view.question_meta.get('correct_prefix') ?
'correct_response':'';
select = selected === prefix ? 'selected="true"':'';
$('#answer_options_' + view.cid, $val_td).append(
'<option class="' + correct_answer + '" ' + select + ' >' +
prefix + '</option>');
}
if (current_state > 2) {
$('#answer_options_' + view.cid, $val_td).prop('disabled', true);
}
//view.bindEvents($val_td);
});
this.el = $val_td;
return this;
}
});
});
It is extended from a cell I call as a QuestionCell which is extended from Backgrid.Cell and only contains from default attributes and methods.
This is how I am passing the cell to backgrid.
var grid, columns = [];
_.each(questions, function (question, position) {
if (question.get('type') === 'tf')
{
columns.push({
name: 'responses[0]',
label: 'Q-' + (position + 1),
cell: TFCell.extend({
question_meta : question,
question_number: position + 1,
group_id: view.group_id
})
});
}
else
{
//this last one isn't getting rendered for some reason.
columns.push({
label: 'Q-' + (position + 1),
cell: Backgrid.SelectCell.extend({
optionValues: [
['-', '-'], ['a', 'a'], ['b', 'b'],
['c', 'c'], ['d', 'd']
]
})
});
}
});
grid = new Backgrid.Grid({
columns: columns,
collection: view.model.get('student_responses')
});
$('#Student_Grid').append(grid.render().$el);
Please help. How can I get this to get rendered. Many Thanks

Reading through the documentation it looks like it's supposed to be
$('#Student_Grid').append(grid.render().el);
instead of
$('#Student_Grid').append(grid.render().$el);
$el looks like a function where as el is the node object that you'd want to append.