Develop Reference

Ajax is not working when using getContext on datatable in Webix

I'm setting up a file manager, when right clicking on folder it will popup context menu, before popup am disabling some menu item using ajax. But ajax call is not working when I right clicked on folder which arranged in datatable.
This is my code for popup menu item. Getting error when right clicking on folder which arranged in datatable.
webix.js?1.0.0:22356 Uncaught TypeError: Cannot read property 'row' of undefined"
actions: {
config: function () {
var t = this.config.templateName;
return {
view: "contextmenu",
width: 200,
padding: 0,
autofocus: !1,
css: "webix_fmanager_actions",
template: function (e, i) {
var s = t(e, i);
return "<span class='webix_icon fa-" + e.icon + "'></span>" + s
},
data: "actionsData"
}
},
oninit: function () {
this.getMenu().attachEvent("onBeforeShow", function (t) {
var e = this.getContext();
var folderid = e.id;
$.ajax({
url: "<?php echo base_url()?>/Directorylist/directory_activity",
type: "POST",
datatype: 'json',
async: false,
data: {'folderid':folderid},
success: function (data) {
var json = JSON.parse(data);
permission = [];
permission = json;
},
});
if (permission[0] == 1 && permission[1] == 0 && permission[2] == 0) {
$$(this).disableItem('copy');
$$(this).disableItem('cut');
$$(this).disableItem('paste');
$$(this).disableItem('create');
$$(this).disableItem('remove');
$$(this).disableItem('edit');
$$(this).disableItem('upload');
}
})
}
},
actionsData: {
config: function () {
return [{
id: "copy",
method: "markCopy",
icon: "copy",
value: copy
}, {
id: "cut",
method: "markCut",
icon: "cut",
value: cut
}, {
id: "paste",
method: "pasteFile",
icon: "paste",
value: paste
}, {
$template: "Separator"
}, {
id: "create",
method: "createFolder",
icon: "folder-o",
value: create
}, {
id: "remove",
method: "deleteFile",
icon: "times",
value: remove
}, {
id: "edit",
method: "editFile",
icon: "edit",
value: rename
}, {
id: "upload",
method: "uploadFile",
icon: "upload",
value: upload
}]
}
}
But when I removed these two lines and given direct value, it works fine.
var e = this.getContext();
var folderid = e.id;
above 2 lines removed and added
var folderid = '1';

You lost the scope of this after the second function.
Here's a time proven fix:
oninit: function () {
var self = this;
this.getMenu().attachEvent("onBeforeShow", function (t) {
var e = self.getContext();
var folderid = e.id;
See also: Javascript "this" scope
Or if you are using ES6 then you could use an arrow function:
oninit: function () {
this.getMenu().attachEvent("onBeforeShow", (t) => {
var e = this.getContext();
var folderid = e.id;
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Why inline editing is not working on this scenario?

I am trying to enable the inline editing for a jQgrid but I am not able to make it to work. It has to be something really "dummy" but I can't find it. I have compared this code against some other grids where the inline editing is working and is the same. So here it's what I have so far (I have removed a few parts, full source in Fiddle - see link below):
$(function () {
"use strict";
var $grid = $("#form_list"),
maximizeGrid = function () {
var newWidth = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid("setGridWidth", newWidth, true);
},
mydata = [...];
// Resize grid if window is being resized
$(window).on("resize", maximizeGrid);
$grid.jqGrid({
colNames: ["", "Form Name", "Fax Number", "FileName", "Folder"],
colModel: [
{name: "act", template: "actions", width: 115},
{name: "FormName", search: true, stype: "text"},
{name: "FaxNumber",search: true,stype: "text"},
{name: "FormFileName",search: true,stype: "text"},
{name: "folder",search: true,stype: "text"}],
cmTemplate: {width: 300,autoResizable: true},
iconSet: "fontAwesome",
rowNum: 25,
guiStyle: "bootstrap",
autoResizing: {compact: true,resetWidthOrg: true},
rowList: [25, 50, 100, "10000:All"],
toolbar: [true, "top"],
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
toppager: true,
cloneToTop: true,
hoverrows: true,
multiselect: true,
multiPageSelection: true,
rownumbers: true,
sortname: "Id",
sortorder: "desc",
loadonce: true,
autowidth: true,
autoresizeOnLoad: true,
forceClientSorting: true,
ignoreCase: true,
prmNames: {id: "Id"},
jsonReader: {id: "Id"},
url: '/echo/json/',
datatype: 'json',
mtype: 'POST',
postData: {json: JSON.stringify(mydata)},
actionsNavOptions: {
uploadFormicon: "fa-upload",
uploadFormtitle: "Upload this form",
cloneFormicon: "fa-clone",
cloneFormtitle: "Clone this form",
archiveFormicon: "fa-archive",
archiveFormtitle: "Archive this form",
custom: [
{action: "uploadForm",position: "first",onClick: function (options) {alert("Upload Form, rowid=" + options.rowid);}},
{
action: "cloneForm",
position: "first",
onClick: function (options) {
$.ajax({
url: '/ajax/forms/clone_by_id',
type: 'POST',
dataType: 'json',
data: {
form_id: options.rowid
}
}).done(function () {
$grid.trigger("reloadGrid", {
fromServer: true
});
toastr["success"]("The form has been cloned.", "Information");
}).error(function (response) {
toastr["error"]("Something went wrong, the form could not be cloned.", "Error");
console.error(response);
});
}},
{action: "archiveForm",position: "first",onClick: function (options) {alert("Archive Form, rowid=" + options.rowid);}
}]
},
formDeleting: {
url: '/ajax/forms/delete',
delicon: [true, "left", "fa-scissors"],
cancelicon: [true, "left", "fa-times"],
width: 320,
caption: 'Delete form',
msg: 'Are you sure you want to delete this form?',
beforeShowForm: function ($form) {
var rowids = $form.find("#DelData>td").data("rowids");
$form.closest(".ui-jqdialog").position({
of: window,
my: "center center",
at: "center center"
});
if (rowids.length > 1) {
$form.find("td.delmsg").html('Are you sure you want to delete all the selected forms?');
}
},
afterComplete: function (response, postdata, formid) {
if (response.responseText === "true") {
alert("Success");
} else {
alert("Error");
}
}
},
navOptions: {
edit: false,
add: false,
search: false
},
inlineEditing: {
keys: true,
focusField: "FormName",
serializeSaveData: function (postData) {
var changedData = {},
prop, p = $(this).jqGrid("getGridParam"),
idname = p.keyName || p.prmNames.id,
oldValue, cm;
for (prop in postData) {
oldValue = p.savedRow[0][prop];
if (p.iColByName[prop] != null) {
cm = p.colModel[p.iColByName[prop]];
}
if (postData.hasOwnProperty(prop) && (postData[prop] !== oldValue || prop === idname)) {
changedData[prop] = postData[prop];
}
}
return changedData;
},
aftersavefunc: function () {
toastr["success"]("The record was updated successfully.", "Information");
},
errorfunc: function () {
toastr["error"]("Something went wrong, the record could not be updated.", "Error");
}
},
onSelectRow: function (rowid, status, e) {
var $self = $(this),
$td = $(e.target).closest("tr.jqgrow>td"),
p = $self.jqGrid("getGridParam"),
savedRow = p.savedRow;
if (savedRow.length > 0 && savedRow[0].id !== rowid) {
$self.jqGrid("restoreRow", savedRow[0].id);
}
if ($td.length > 0 && $td[0].cellIndex !== p.iColByName.act) {
// don't start editing mode on click on "act" column
$self.jqGrid("editRow", rowid);
}
},
loadComplete: function () {
var $self = $(this),
p = $self.jqGrid("getGridParam");
if (p.datatype === "json") {
// recreate the toolbar because we use generateValue: true option in the toolbar
$self.jqGrid("destroyFilterToolbar").jqGrid("filterToolbar");
}
}
}).jqGrid('navGrid').jqGrid("filterToolbar").jqGrid('setFrozenColumns');
});
Any ideas? Here is the Fiddle

Issues with selectize.js and ajax

In my view i have the following code and i'm trying to get the select box to drop down with the values i send with the callback but unfortunately it does not work.
I was following http://maxoffsky.com/code-blog/laravel-shop-tutorial-3-implementing-smart-search/ with slight changes her and there to suite my use case.
<script>
$(document).ready(function(){
var root = '{{url("/")}}';
$('#testselect').selectize({
valueField: 'url',
labelField: 'description',
searchField: ['description'],
maxOptions: 10,
options: [],
create: true,
render: {
option: function(data, escape) {
return '<div>' + escape(data.description) + '</div>';
}
},
optgroups: [
{value: 'description', label: 'description'},
],
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: root+'/gettimecodes',
type: 'GET',
dataType: 'json',
data: {
q: query
},
error: function() {
callback();
},
success: function(res) {
console.log(res.data) // Prints my data all well and good.
var object = {description:"description"};
var array = ["Saab", "Volvo", "BMW"];
var json = {
"data":[
{"description":"Saab"},
{"description":"Volvo"},
{"description":"BMW"}
]
}
// callback(array); // Doesn't work. (Array)
// callback(object); // Doesn't work (Object)
// callback(json); // Doesn't work (JSON)
}
});
},
});
});
</script>
If any one could point me in the correct direction it would be greatly appreciated!
Updated with bashers recomendations.
$('#testselect').selectize({
valueField: 'description',
labelField: 'description',
searchField: ['description'],
maxOptions: 10,
options: [],
create: true,
render: {
option: function(data, escape) {
return '<div>' + escape(data.description) + '</div>';
}
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: '/gettimecodes',
type: 'GET',
data: {
q: query
},
error: function() {
callback();
},
success: function(res) {
callback(res.data)
}
});
},
});
The JSON that is returned in the response
{"data":[{"description":"Crushed blacks "},{"description":"Crushed blacks "},{"description":"Example of crushed blacks"},{"description":"Example of crushed blacks and video noise"},{"description":"Example of heavily de-interlaced artfacts on footage during title sequence - As source"}]}

Your valueField does not exist. url is not a property of the object you pass. Change valueField to description. Then let me know a more specific error if you get one. Also remove optGroups for now. Keep it basic.

javascript function not call in document.ready

I have two functions that make two combobox with jqwidgets libraries. two functions are mostly like each other. I call them in $(document).ready(function (), but first function is work well and the second not even call. I put the codes those in one function, but the second part never run.
function f1() {
var url2 = "/autosuggest/JsonOrigins.aspx";
var source2 = {
datatype: "json",
datafields: [{
name: 'id'
}, {
name: 'name'
}],
url: url2,
async: false
};
var dataAdapter2 = new $.jqx.dataAdapter(source2);
// Create a jqxComboBox
$("#originsjqxWidget").jqxComboBox({
source: dataAdapter2,
multiSelect: true,
displayMember: "name",
valueMember: "id",
width: 145
});
$("#arrow").jqxButton({});
$("#arrow").click(function () {
$("#originsjqxWidget").jqxComboBox({
showArrow: false
});
});
$("#originsjqxWidget").on('change', function (event) {
var items = $("#originsjqxWidget").jqxComboBox('getSelectedItems');
var selectedItems = "Selected Items: ";
$.each(items, function (index) {
selectedItems += this.label;
if (items.length - 1 != index) {
selectedItems += ", ";
}
});
$("#log").text(selectedItems);
});
};
function f2() {
var url = "/autosuggest/JsonTag.aspx";
var source = {
datatype: "json",
datafields: [{
name: 'id'
}, {
name: 'name'
}],
url: url,
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#categoriesjqxWidget").jqxComboBox({
source: dataAdapter,
multiSelect: true,
displayMember: "name",
valueMember: "id",
width: 145
});
$("#arrow").jqxButton({});
$("#arrow").click(function () {
$("#jqxComboBox").jqxComboBox({
showArrow: false
});
});
$("#categoriesjqxWidget").on('change', function (event) {
var items = $("#categoriesjqxWidget").jqxComboBox('getSelectedItems');
var selectedItems = "Selected Items: ";
$.each(items, function (index) {
selectedItems += this.label;
if (items.length - 1 != index) {
selectedItems += ", ";
}
});
$("#log").text(selectedItems);
});
}
$(document).ready(function () {
f1();
f2();
});

Remove the ; after your first function.

try this
var source2 = {
datatype: "json";
datafields: [{
name: 'id'
}, {
name: 'name'
}],
url: url2,
async: false
};

I think you have an extra ; at the end of function f1
function f1(){
...
if (items.length - 1 != index) {
selectedItems += ", ";
}
});
$("#log").text(selectedItems);
});
};

Drag and Drop Bug

UPDATE: Found this ticket about the bug http://bugs.jqueryui.com/ticket/5718. I try the position:absolute but it breaks the data on html
I have implemented drag and drop in my app to sort data. When dragging of data it must be align with others data. But in the picture below.
Notice that, when I drag the Internet it goes on top.
It must be align with others when dragging. How to fix this? Is there a way that the data must be in the cursor, not on the top when dragging?
Here are the codes for drag and drop:
<script>
var addPositions = function() {
$('.dropenv, .dropcat').each(function() {
var position = 0;
$(this).children().each(function() {
$(this).data('position', position);
position++;
});
});
};
$(document).ready(function() {
addPositions();
$(".dropenv").sortable({
connectWith: "tbody.env-data",
dropOnEmpty: true,
handle: '.env-handle',
start: function(event, ui) {
parentID = ui.item.parent().siblings('tr').attr('id');
},
stop: function(event, ui) {
datas = new Array();
var i = 0;
ui.item.closest('tbody').children('tr').each(function() {
datas[i] = $(this).attr('id');
i++;
});
$.ajax({
type: "POST",
data: {
'cat_id': parentID,
'env[]': datas,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
url:"/envelopes/sort/",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function(data) {
notify('', data, { autoClose: true, delay: 1000 });
},
error: function(ts) {
notify('', ts.responseText, { autoClose: true, delay: 1000 });
}
});
}
});
$( ".dropcat").sortable({
connectWith: "tbody.cat-data",
dropOnEmpty: true,
handle: '.cat-handle',
update: function(){
datas = new Array();
var i = 0;
$('.dropcat tr.masterList').each(function() {
datas[i] = $(this).attr('id');
i++;
});
$.ajax({
type: "POST",
data: {
'cat[]': datas,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
url:"/envelopes/categories/sort/",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function(data) {
notify('', data, { autoClose: true, delay: 1000 });
},
error: function(ts) {
notify('', ts.responseText, { autoClose: true, delay: 1000 });
}
});
}
});
});
</script>

Found the answer: overflow:auto
<table class="simple-table responsive-table" style="overflow:auto">