We Keep Coding

href in DataTables

I am trying to insert a href into one of my columns in DataTables but Im having some issues since I need the actual href to show my slug and then the full company name.
Example how it should be formatted: "company"
Real data: Toyota Cars.
I am using columns.render which seems to be the correct function but I can't wrap my head around how I can get 'company' between the a tags. The function does not even make use of the "data" specifier, instead it takes the data first in my ajax file which in this case is slug.
My DataTable.js file
ajax: '/api/datatable',
columns: [
{ data: 'slug' },
{ data: 'company' },
],
"columnDefs": [
{ targets: [0, 1], visible: true},
{ "targets": 0,
"data": "This doesnt even seem needed?",
"render": function ( data, type, row, meta ) {
return 'full company name';
}
}
],

I will go ahead and give an answer, based on the assumption that you are trying to merge values of 2 columns. If my assumption is not correct, please, update the question to clarify "expected vs actual" results.
You are using data parameter in render function. That parameter is based on the value you specified in columns.data. In your case (with target === 0), data will contain the value that DataTable got for { data: 'slug' } column.
If you want to merge values from different columns into one, then render function is the correct way to do it. However, instead of data, you should use row parameter, which contains all key-value fields for a row.
For example:
// ...
"targets": 0,
"data": null,
"render": function ( data, type, row, meta ) {
return ''+row.company+'';
// or whatever your row object key-value structure is
}
// ...

create custom tags with jsdoc

I am trying to create custom tags in jsdoc 3.4.2. The config.json file is
{
"tags": {
"allowUnknownTags": true,
"dictionaries": ["jsdoc","closure"]
},
"source": {
"include": [
"app/"
],
"exclude": [],
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
"plugins": [
"plugins/custom-tags.js"
],
"templates": {
"cleverLinks": false,
"monospaceLinks": false
},
"opts": {
"destination": "./docs",
"recurse": true,
"encoding": "utf8"
}
}
In the custom-tags.js i have added these lines
exports.defineTags = function (dictionary) {
dictionary.defineTag("service", {
mustHaveValue: true,
canHaveType: false,
canHaveName: true,
onTagged: function (doclet, tag) {
doclet.service = tag.value;
}
});
};
But when i used the #service in the code, it is not showing. I had looked some link relating this and found out for custom tags we need to create template, but not found a way of creating one. I had installed jsdoc globally on my windows machine.

You are correct there is a two step process.
First you define a tag for jsdoc to find in the code and update its doclet object (like you have done)
Second you need the template, the thing which turns the doclet object into HTML, to know about the new property and do something with it.
Like you I've had a hard time finding instructions on making templates. The best I can suggest is check the jsdoc source code. You'll need to create a JavaScript file which exposes a publish function. The publish function will then iterate over the doclet object to generate HTML.
I had the same need as you but all I wanted to do was add a new section (header and text maybe a table of parameters) to the existing jsdoc template. I didn't really want to go and create a whole new template just for that so I ended up defining my tags in a way that they would end up appending or prepending HTML to the doclet.description property. Worked for me.
exports.defineTags = function(dictionary) {
dictionary.defineTag('routeparam', {
mustHaveValue: true,
mustNotHaveDescription: false,
canHaveType: true,
canHaveName: true,
onTagged: function(doclet, tag) {
if (!doclet.routeparams) {
doclet.routeparams = [];
}
doclet.routeparams.push({
'name': tag.value.name,
'type': tag.value.type ? (tag.value.type.names.length === 1 ? tag.value.type.names[0] : tag.value.type.names) : '',
'description': tag.value.description || '',
});
}
});
};
exports.handlers = {
newDoclet: function(e) {
const parameters = e.doclet.routeparams;
if (parameters) {
const table = tableBuilder.build('Route Parameters', parameters);
e.doclet.description = `${e.doclet.description}
${table}`;
}
}
}
Feel free to check out my repo to see how I did it https://github.com/bvanderlaan/jsdoc-route-plugin

how to stop Bootstrap-3-Typeahead dropdown displaying the elements in the sorted order

I'm using Bootstrap-3-Typeahead
Is there a way to avoid the dropdown data getting sorted in natural order ?
This will show all the data in the source in the drop down list in the onFocus event. So the problem is it will only show limited number of elements with the natural sorted order though I don't want them to be.
How can I avoid them getting sorted.
$('#device').tagsinput({
typeahead: {
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo','Amstedrdam', 'Washidngton', 'Syddney', 'Bedijing', 'Caidro','Amzstderdam', 'Washidnzgton', 'Sydzdney', 'Beijzding', 'Caidzro'],
autoSelect: false,
showHintOnFocus : true,
minLength : 0
}
});

The problem is not in the Typeahead plug-in , but in the second bootstrap-tagsinput plug-in. Unfortunately you can not solve it without editing the source.
Take a look to this JSFiddle
How you can read from source of the bootstrap-tagsinput.js at line 310:
sorter: function (texts) {
return texts.sort();
},
The sorter option is provided by the bootstrap-tagsinput plug-in to the Typeahead plug-in and since the plug-in is executed in a immediately invoked function expression you can't overwrite the sorter method.
You should fork the plug-in and change the sorter option:
sorter: function (texts) {
var sorter = typeahead.sorter || function (items) { return items.sort(); }
return sorter(texts);
},
So your plugin initialization will be:
$('#ppp').tagsinput({
typeahead: {
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo', 'Amstedrdam', 'Washidngton', 'Syddney', 'Bedijing', 'Caidro', 'Amzstderdam', 'Washidnzgton', 'Sydzdney', 'Beijzding', 'Caidzro'],
sorter: function (texts) {
return texts;
}
}
});
...once you have done this then it will work

The library provides a way to override the sorter. You could simply use that to override the default sorter and return the list as-is:
sorter: function (items) {
return items;
},
Also, here is the default sorter implementation.

how to save a SlickGrid column order (js)?

I have two grids in my application.
var columns1 = [
{
name: "Address",
field: "address"
id: "address",
sortable: true
}
]
var columns2 = [
{
{
name: "Rating, in %",
field: "rating"
id: "rating_percent",
resizable: false
}
]
They are absolutely independent from each other. Also, I have some grid events descriptions in another js file.
grid.onColumnsReordered.subscribe(function (e, args) {
_this.updateHeaderRow();
// here
});
When user changes the columns order, then I want to save this order. Should I change (overwrite) the DOM elements, I mean column1 and column2?
So question: how can I save the columns order?

njr101's answer (using store.js) is great, but note: store.js cannot store functions (i.e. for editors, formatters), so once you store.get() the columns, you'll need to add the functions back, using your original stock "columns" array:
if (store.get('gridColumns')) {
grid.setColumns(store.get('gridColumns')); // Restore settings if available
grid.getColumns().forEach(function(ch) { // Re-create editor and formatter functions
var result = $.grep(columns, function(e){ return e.id == ch.id; });
if (result[0]) {
ch.editor = result[0].editor;
ch.formatter = result[0].formatter;
}
});
}

I have done this before and the easiest way I found was to store the columns in local storage. I use the store.js library which makes this pretty simple.
grid.onColumnsReordered.subscribe(function (e, args) {
store.set('gridColumns', grid.getColumns());
});
When you want to restore the columns (e.g. when the user returns to the page) you can just call:
grid.setColumns(store.get('gridColumns'));

How to set ckeditor config when using the jquery version?

I'm using the jquery version of ckeditor, like this:
$(".textarea").ckeditor();
I need to specify the toolbar buttons, but I don't know how. All the help I found here on stackoverflow or using google was for the old javascript ckeditor version, OR I don't know how to use it with jquery (code above).
Also, how do I specify the css file location, so that the ckeditor loads my css and displays the data the same way it will be displayed on the site?
Anyone can help with this mess?

$(".textarea").ckeditor(function() {
// Instance loaded callback.
}, {
// Config here.
});

Not sure if this is a new feature of CKEDITOR, but just want to share my solution (in case it helps anyone looking for this now):
$("textarea.youreditor").ckeditor
(
{
customConfig: "/path/to/custom/config.js"
}
);
... and my config looks like this (simply copied the default config.js:
CKEDITOR.editorConfig = function(config)
{
config.toolbar_Full =
[
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }
];
};
** I am cross posting my solution from here: How do I pass in config info to CKEditor using the jQuery adapter?

This is how I set the config using jQuery....
var config = {
toolbar: [ /* Whatever toolbars you wish go here. */ ],
height: 250,
width: 500,
align: "left",
contentsCss: ["body { /* Style your body any way you like */ } otherCSSStuff { /* Style away. */} "]
/*and whatever other options you wish to config... */
};
$( 'textarea.editor' ).ckeditor( config, function() { /* Your callback function. */ } );