I want to disable all keyboard keys in wysihtml5 text editor .
I am using this editor https://github.com/bassjobsen/wysihtml5-image-upload
can anyone help me to do this. I have try "load" event and its works perfectly but i cannot use "onkeypress" or "onkeyup"\
var defaultOptions = $.fn.wysihtml5.defaultOptions = {
"font-styles": false,
"color": false,
"emphasis": false,
"lists": false,
"html": false,
"link": false,
"image": true,
events: {
"load": function() {
console.log('loaded!');
}
},
I think that is the answer below
var defaultOptions = $.fn.wysihtml5.defaultOptions = {
"font-styles": false,
"color": false,
"emphasis": false,
"lists": false,
"html": false,
"link": false,
"image": true,
events: {
"load": function() {
$('.wysihtml5-sandbox').contents().find('body').on("keydown",function(event) {
return false;
});
}
},
Related
This is the input json
set = {
"pending": [
{
"is_active": true,
"order_updated": false,
"po_id": "m86lu",
}, {
"is_active": true,
"order_updated": false,
"po_id": "m86lu",
}, {
"is_active": true,
"order_updated": false,
"po_id": "m86l89u",
}]}
set = set.pending[0].filter(({ po_id }) => {
return po_id === 'm86lu';
});
I need to get only json set that has po_id 'm86lu'.
The output needs to be like this
set = {
"pending": [
{
"is_active": true,
"order_updated": false,
"po_id": "m86lu",
}, {
"is_active": true,
"order_updated": false,
"po_id": "m86lu",
}
]}
How do I get it? Looks like I am using the filter function incorrectly.
The pending key would be lost in that way
set = {
pending: set.pending.filter(({ po_id }) => { return po_id === 'm86lu'; })
}
Loop through json, add to new set one by one based on the suggestion from comment.
var input = {
"pending": [
{
"is_active": true,
"order_updated": false,
"po_id": "m86lu",
}, {
"is_active": true,
"order_updated": false,
"po_id": "m86lu",
}, {
"is_active": true,
"order_updated": false,
"po_id": "m86l89u",
}]}
var output = {};
for (var key in input) {
if (!input.hasOwnProperty(key)) {
continue;
}
let content = input[key].filter(({ po_id }) => { return po_id === 'm86lu'; });
output[key] = content;
}
console.log(output);
I've checked the documentation but I cannot find it... how can I disable the rollover color on AmCharts Map on mouseover? Basically disable the change of color of map (for example, a state on US map). I don't want any mouseover interactivity or change of color. Thanks.
var map = AmCharts.makeChart("propertiesMap", {
"type": "map",
"listeners": [{
"event": "mouseover",
"method": removeListener
}],
"dragMap": false,
"theme": "light",
"colorSteps": 5,
"mouseEnabled": false,
"selectable": false,
"zoomOnDoubleClick": false,
"dataLoader": {
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22422.json",
format: "json",
"areas": [{
"mouseEnabled": false
}]
},
"areasSettings": {
"autoZoom": false,
"balloonText": "",
"outlineThickness": 1,
"selectable": false,
},
"valueLegend": {
"right": 10,
"minValue": "Cold",
"maxValue": "Hot"
},
"zoomControl": {
"zoomControlEnabled": false,
"panControlEnabled": false,
"homeButtonEnabled": false
}
});
To disable the rollover color for all states/areas, set the rollOverColor to null in your areasSettings object:
"areasSettings": {
// ...
"rollOverColor": null
},
Demo
From the docs
removeListener(chart, type, handler)
So in your case:
removeListener(myChart, 'mouseover', stateHoverFunction)
I am using a jQuery datatable with checkbox column for select checked rows value in button click event. Please see my below image.
I use this code for getting check rows
var checkedRows = dtTable._('tr.checked', { "filter": "applied" });
My problem is when i click the header row check box it's works fine. But it's shows null
in single row check box click. I am clueless.
Edit
firebug
JQuery
var dtTable = null;
var ajaxUrl = "";
$(document).ready(function () {
GetCustomerAcceptence();
$("#btnReceived").click(function () {
var checkedRows = dtTable._('tr.checked', { "filter": "applied" });
if (checkedRows == null) {
alert("checkedRows is null.");
}
else {
alert("checkedRows is not null. Value : " + checkedRows[0][1]);
}
});
function GetCustomerAcceptence() {
/* Clear datatable before reload. */
ClearDataTable();
var elementName = "";
ajaxUrl = "";
elementName = "#tblCustomerAcceptence";
ajaxUrl = '#Url.Action("GetCustomerAcceptenceOrders", "Dispatch")';
dtTable = $(elementName).dataTable({
bProcessing: false,
bLengthChange: false,
bInfo: false,
bFilter: false,
bPaginate: false,
sAjaxSource: ajaxUrl,
aoColumns: [
{
"sClass": "checkbox-column",
bSortable: false,
"mRender": function (data, type, full) {
return '<input type="checkbox" onclick="check(this)" class="icheck-input">';
}
},
{ sTitle: "Id", bSortable: false, bVisible: false },
{ sTitle: "Number", bSortable: false, },
{ sTitle: "Description", bFilterable: true, bSortable: false, },
{ sTitle: "PoBox Number", bSortable: false, },
{ sTitle: "Owner", bSortable: false, },
{ sTitle: "Physical Weight", bSortable: false, },
{ sTitle: "Vol.Weight", bSortable: false, },
{ sTitle: "Last Status", bSortable: false, },
{ sTitle: "Zone", bSortable: false, },
],
"fnServerParams": function (aoData) {
aoData.push(
{ "name": "MasterAWB", "value": "0" },
{ "name": "PoboxNumber", "value": "0" },
{ "name": "TypeofGoods", "value": 0 },
{ "name": "Provider", "value": 0 },
{ "name": "DateFrom", "value": "0" },
{ "name": "DateTo", "value": "0" },
{ "name": "Zone", "value": 0 },
{ "name": "BagNumber", "value": "0" }
);
},
});
}
function ClearDataTable() {
if (dtTable != null) {
dtTable.dataTable().fnClearTable();
dtTable.dataTable().fnDestroy();
}
}
});
I am really sorry to say that there is a mistake in check box column. I need to place check function in my webpage to fire the check box checked event.
/* checkbox in table */
function check(e) {
if ($(e).parent('td').parent('tr').hasClass('checked')) {
$(e).parent('td').parent('tr').parent('tbody').parent('table').children('thead').find('th:first').children('div').removeClass('checked');
$(e).parent('td').parent('tr').removeClass('checked');
}
else {
$(e).parent('td').parent('tr').addClass('checked');
dtTable.fnDraw();
}
}
/* end */
Need to load only the parent node for the sake of performance and then load the children when the user clicks on the icon, and the icon does not seem to expand when I do not carry child node. Can anyone help me?
My code return in json. below:
"JsonData": [
{
"id": "13",
"text": "MainBox",
"parent": "#",
"state": {
"opened": false,
"disabled": false,
"selected": false
},
"children": false,
"icon": null,
"li_attr": "{class = 'jstree-leaf' }",
"a_attr": null
}
]
EDIT
My jquery below:
root = $('#tree-files').jstree({
'core': {
'data': //code before
},
"plugins": ["themes", "json_data", "ui", "contextmenu"]
});
I figured out the answer. i hope be help for someone.
root = $('#tree-files').jstree({
'core': {
'data': {
'url': function (node) {
return 'Action/Controller';
},
'headers': headers,
'xhrFields': { withCredentials: true },
'async': true,
'data': function (node) {
//handler params here
return { 'id': node.id } ;
},
success: function (dados) {
//code success here
}
},
"check_callback": true,
"themes": {
"theme": "default",
"dots": false,
"icons": true,
},
},
"plugins": ["themes", "json_data", "ui", "contextmenu", "crrm"]
});
The autocomplete is working fine, but it's displaying the auto suggestion box with 1 character, and I would like to change it to display the auto suggestion box only when the input is >=3.
I've been trying to insert 'minLength' option but it is not taking any effetct.
I've tried to modify the sixth line to:
.autocomplete(conf.opts, minLength: 3 || {});
But had no success.
Here's my JS file:
var myEditor;
// AutoComplete FieldType
$.fn.dataTable.Editor.fieldTypes.autoComplete = $.extend(true, {}, $.fn.dataTable.Editor.models.fieldType, {
"create": function (conf) {
conf._input = $('<input type="text" id="' + conf.id + '">')
.autocomplete(conf.opts || {});
return conf._input[0];
},
"get": function (conf) {
return conf._input.val();
},
"set": function (conf, val) {
conf._input.val(val);
},
"enable": function (conf) {
conf._input.autocomplete('enable');
},
"disable": function (conf) {
conf._input.autocomplete('disable');
},
// Non-standard Editor method - custom to this plug-in
"node": function (conf) {
return conf._input;
}
});
$(document).ready(function () {
myEditor = new $.fn.dataTable.Editor({
"ajaxUrl": "./php/pTreinamentos.php",
"domTable": "#example",
"fields": [{
"label": "Tema",
"name": "tema",
"type": "autoComplete",
"opts": {
"source": ['banana']
}
}
]
});
// DataTable
var oTable = $('#example').dataTable({
"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sAjaxSource": "./php/pTreinamentos.php",
"bFilter": true,
"bAutoWidth": false,
"iDisplayLength": 20,
"aoColumns": [{
"mData": "tema"
}
],
"oTableTools": {
"sSwfPath": "../../TableTools/media/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "single",
"sPaginationType": "bootstrap",
"aButtons": [{
"sExtends": "editor_create",
"editor": myEditor
}, {
"sExtends": "editor_edit",
"editor": myEditor
}, {
"sExtends": "editor_remove",
"editor": myEditor
}
]
}
});
});
The solution was to add the option inside the field structure.
"fields": [{
"label": "Data",
"name": "data",
"type": "autoComplete",
"opts": {
"source": ['banana'],
"minLength": 3
}