Related
I have written code for a terminal UI application using blessed package in NodeJS which contains 2 forms, say form1 and form2 with some widgets like list and checkboxes in each form. So how can I navigate between the forms with keyboard?
var blessed = require('blessed');
// Create a screen object.
var screen = blessed.screen({
smartCSR: true
});
screen.title = 'my window title';
var parentform = blessed.form({
parent: screen,
keys: true,
left: 0,
top: 2,
width: 80,
height: 50,
// bg: 'green',
content: '',
border:{
type:'line'
},
style:{
border:{
fg:'green',
bg:'green'
}
}
});
var list = blessed.List({
top:2,
left:'center',
parent:parentform,
height:8,
width:20,
mouse:true,
keys:true,
items:["abc","xyz","123","456"],
border:{
type:'line'
},
style:{
selected:{
bg:'blue',
fg:'white'
},
item:{
bg:'white',
fg:'blue'
},
// focus:{
// bg:'red'
// }
}
});
var parentform_cb1 = blessed.Checkbox({
parent: parentform,
top:12,
left:10,
content:"cb1",
height:1,
width:12,
// bg:'white',
mouse:true
});
var parentform_cb2 = blessed.Checkbox({
parent: parentform,
top:14,
left:10,
content:"cb2",
height:1,
width:12,
// bg:'white',
mouse:true
});
var parentform_cb3 = blessed.Checkbox({
parent: parentform,
top:16,
left:10,
content:"cb3",
height:1,
width:12,
// bg:'white',
mouse:true
});
var parentform_cb4 = blessed.Checkbox({
parent: parentform,
top:18,
left:10,
content:"cb4",
height:1,
width:12,
// bg:'white',
mouse:true
});
var parentform_cb5 = blessed.Checkbox({
parent: parentform,
top:20,
left:10,
content:"cb5",
height:1,
width:12,
// bg:'white',
mouse:true
});
var form2 = blessed.form({
parent: screen,
keys: true,
left: 90,
top: 2,
width: 80,
height: 50,
content: '',
mouse:true,
scrollable:true,
scrollbar: {
style: {
bg: 'blue'
},
},
border:{
type:'line'
},
style:{
border:{
fg:'green',
bg:'green'
}
}
});
var form2_cb1 = blessed.Checkbox({
parent: form2,
top:4,
left:4,
content:"form2 cb2",
height:1,
width:18,
mouse:true
});
screen.key(['escape', 'q', 'C-c'], function(ch, key) {
return process.exit(0);
});
list.focus();
screen.render();
Currently I am able to do it with a mouse, but how can i do it with keyboard?
To navigate between the forms you can simply, attach a key event to the last checkbox item of form1 and the checkbox item of form2.
parentform_cb5.key(["tab"], function (ch, key) {
// focuses on form 2 when you press tab
form2.focusNext();
});
form2_cb1.key(["tab"], function (ch, key) {
// focuses back on the screen when you press tab
screen.focusNext();
});
I want to get the data-id of the element selected in pop-up.
i have to show the selection in the grid, whose solution you have provided. but for Database storage i need the ID value of the selection... how can i get and bind the ID in the grid.???
<script type="text/javascript">
$(function () {
// declaration
$("#lognForm").ejDialog(
{
enableModal: true,
enableResize: false,
width: 291,
close: "onDialogClose",
containment: ".cols-sample-area",
showFooter: true,
footerTemplateId: "sample"
});
$("#defaultlistbox").ejListView({ dataSource:ej.DataManager({
url: "http://js.syncfusion.com/ejServices/Wcf/Northwind.svc/", crossDomain: true
}),
query: ej.Query().from("Suppliers").select("SupplierID", "ContactName"),
fieldSettings: { text: "ContactName"},mouseUp: "onmouseup",height:"400px" ,enableCheckMark: true,
enableFiltering: true,
});
$("#btnOpen").ejButton({ size: "medium", "click": "onOpen", type: "button", height: 30, width: 172 });
$("#Grid").ejGrid({
columns: [
{ field: "title", headerText: "ListviewData", width: 80 },
]
});
$("#btn1").ejButton({ size: "medium", "click": "onbtnOpen", type: "button", height: 30, width: 172 });
});
function onOpen() {
$("#btnOpen").hide();
$("#lognForm").ejDialog("open");
}
function onbtnOpen(){
$("#lognForm").ejDialog("close");
}
function onDialogClose(args) {
$("#btnOpen").show();
}
function onmouseup(e) {
var selections = $('#defaultlistbox').ejListView("getCheckedItems");
var items = [];
$(selections).each(function () {
var $this = $(this);
var item = { title: $this.find("span").html() };
items.push(item);
});
if (selections.length > 0) {
var obj = $("#Grid").ejGrid("instance");
obj.setModel({ dataSource: items })
obj.refreshContent();
}
else{
var obj = $("#Grid").ejGrid("instance");
obj.dataSource([]); }
}
</script>
<li class="e-user-select e-list e-list-check e-state-default" data-id="2">
If you have a reference to that javascript DOM object, simply look for the dataset property. It's a hashmap containing string keys, that are on your HTML element prefixed with data.
For example, you'll find data-id on your object as myObject.dataset["id"].
http://jsfiddle.net/tXFbk/2/
HTML:
<div class="control-group">
<label for="some_id" class="control-label">Some ID</label>
<div class="controls">
<input type="text" id="some_id" name="some_id" class="span4"/>
</div>
</div>
JS:
$(function() {
$('#some_id').select2({
allowClear: true,
placeholder: 'Some ID',
minimumInputLength: 2,
multiple: true,
data: [
{id: 1, text: 'some text'},
{id: 2, text: 'some other text'},
{id: 3, text: 'some more text'}
]
});
$('#some_id').select2('data', [
{'id':1,'text':'some text'}
]);
console.log($('#some_id').select2('val'));
});
On first load it duplicates values and after clearing value it doesn't clear it from input. Also if you add an item (eg. "some more text") and then remove it, it doesn't clear it from input value. Is there any way to make it stop duplicating values?
One more thing - how to disable adding already added items?
Select2 4.0.0 support duplicate tags.
Jsfiddle Demo link
$eventSelect.on("select2:select", function (e) {
log("select2:select", e);
$eventSelect.append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>');
});
$eventSelect.on("select2:unselect", function (e) {
log("select2:unselect", e);
e.params.data.element.remove();
});
function formatResultData (data) {
if (!data.id) return data.text;
if (data.element.selected) return
return data.text;
};
Base on select2 event and github issues
Pic:
Check the following On Selecting event, and setting the isNew property in createSearchChoice
let me know if it resolved your issue
$('#some_id').select2({
tags: true,
tokenSeparators: [","],
createSearchChoice: function (term, data) {
if (term.trim().length > 0) {
if ($(data).filter(function () {
return this.text.toLowerCase().localeCompare(term.toLowerCase()) === 0;
}).length === 0) {
return {
id: term,
text: term,
isNew: true // this is necessary to check if the item is newly added or not
};
}
}
},
multiple: true,
minimumInputLength: 1,
allowClear: true,
data: [
{id: 1, text: 'some text'},
{id: 2, text: 'some other text'},
{id: 3, text: 'some more text'}
],
}).on("select2-selecting", function (e) {
var tagId = '';
if (e.choice.isNew) {
self.AddTagToDatabase(e.choice.text);
} else {
var isValidTag = true;
$(config.element[0] + ' ul li').find('div').each(function (index, item) {
if ($(item).html().toLowerCase().trim() == e.choice.text.toLowerCase().trim()) {
isValidTag = false;
e.choice.text = '';
return;
}
});
}
})
You need to trigger the change event of select2 to reflect the changes.
$("#dropdownId").val("yourValues").trigger("change");
after setting the values, you need to fire trigger values manually, to reflect the latest changes done in your dropdownlist
I have this code. In here I am retrieving a new set of values via a URL through Jquery Ajax($.get()) on calling a function gotoa() on some click event. I am obtaining the set of values correctly as i am getting right result on alert. But the grid is not updating itself at that moment. When i refresh the whole page then the grid updates. How to update the grid on calling of gotoa() itself. ?
The code ::
<script type="text/javascript">
function gotoa(){
$.get("http://localhost:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function(result){
alert(result);
var storedata={
identifier:"ID",
label:"name",
items:result
};
var store = new dojo.data.ItemFileWriteStore({data: storedata});
alert(store);
//var gridh = dijit.byId("gridDiv");
//gridh.setStore(store);
var gridStructure =[[
{ field: "ID",
name: "ID_Emp",
width: "20%",
classes:"firstname"
},
{
field: "Names",
name: "Name",
width: "20%",
classes: "firstname"
},
{ field: "Email",
name: "Mail",
width: "20%",
classes:"firstname"
}
]
];
var grid1 = new dojox.grid.DataGrid({
id: 'grid2',
store: store,
structure: gridStructure,
rowSelector: '30px',
selectionMode: "single",
autoHeight:true,
columnReordering:true},
document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid1.domNode);
/*Call startup() to render the grid*/
grid1.startup();
// assuming our grid is stored in a variable called "myGrid":
dojo.connect(grid1, "onSelectionChanged", grid1, function(){
var items = grid1.selection.getSelected();
// do something with the selected items
dojo.forEach(items, function(item){
var v = grid1.store.getValue(item, "Names");
function showDialog() {
dojo.require('dijit.Tooltip');
dijit.byId("terms").show();
}
//if(name!="Mail")
showDialog();
}, grid1);
});
dojo.connect(grid1, "onCellClick", grid1, function sendmail(){
var items = grid1.selection.getSelected();
dojo.forEach(items, function(item){
var v1 = grid1.store.getValue(item, "Email");
alert(v1);
request.setAttribute("variablemail", v1);
});
});
},"text");
}
</script>
The output of alert(result) at a particular point of time is like this ::
[{"ID":1,"Names":"Shantanu","Email":"shantanu.tomar#gmail.com"},{"ID":2,"Names":"Mayur","Email":"mayur.sharma#gmail.com"},{"ID":3,"Names":"Rohit"},{"ID":4,"Names":"Jasdeep"},{"ID":5,"Names":"Rakesh","Email":"rakesh.shukla#gmail.com"},{"ID":6,"Names":"Divyanshu"},{"ID":8,"Names":"hello"},{"ID":9,"Names":"fine"},{"ID":10,"Names":"shivani"}]
And the output of alert(store) is like ::
[object Object]
And i am calling gotoa() on clicking anywhere inside a content pane(for the time being, later on will put a button or something) like this ::
<div dojoType="dijit.layout.ContentPane" title="Pending Activities" style="background-image: url('http://localhost:8080/2_8_2012/images/17.png');" onClick="gotoa();">
How to upgrade grid data ? thanks.
I am a newbie to dojo, i think this code will help you::
<script type="text/javascript">
function gotoa(isUpdate){
$.get("http://localhost:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function(result){
alert(result);
var storedata={
identifier:"ID",
label:"name",
items:result
};
var store = new dojo.data.ItemFileWriteStore({data: storedata});
alert(store);
if (isUpdate) {
var grid = dojo.byId('grid2');
grid.setStore(store);
} else {
var gridStructure =[[
{ field: "ID",
name: "ID_Emp",
width: "20%",
classes:"firstname"
},
{
field: "Names",
name: "Name",
width: "20%",
classes: "firstname"
},
{ field: "Email",
name: "Mail",
width: "20%",
classes:"firstname"
}
]
];
var grid1 = new dojox.grid.DataGrid({
id: 'grid2',
store: store,
structure: gridStructure,
rowSelector: '30px',
selectionMode: "single",
autoHeight:true,
columnReordering:true},
document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid1.domNode);
/*Call startup() to render the grid*/
grid1.startup();
// assuming our grid is stored in a variable called "myGrid":
dojo.connect(grid1, "onSelectionChanged", grid1, function(){
var items = grid1.selection.getSelected();
// do something with the selected items
dojo.forEach(items, function(item){
var v = grid1.store.getValue(item, "Names");
function showDialog() {
dojo.require('dijit.Tooltip');
dijit.byId("terms").show();
}
//if(name!="Mail")
showDialog();
}, grid1);
});
dojo.connect(grid1, "onCellClick", grid1, function sendmail(){
var items = grid1.selection.getSelected();
dojo.forEach(items, function(item){
var v1 = grid1.store.getValue(item, "Email");
alert(v1);
request.setAttribute("variablemail", v1);
});
});
}
});
}
</script>
use gotoa() for initial loading of grid and gotoa(true) for updating the grid.
I have my grid with multiselect = true, something likes this, you can click each checkbox and then delete, when I delete my first row I know the method selarrrow creates and arrays It just delete, but when I want to delete the second row It just never do the delRowData method, and when I select multiple checkbox It just delete the first. I think my method is looping over and over againg each time and never delete at least visually the other row, how can I fix it?? any advise thanks
this is my method:
onSelectRow:function(id) {
$("#mySelect").change(function (){
if(($("#mySelect option:selected").text()) == 'Deleted') {
var id = $("#list2").getGridParam('selarrrow');
for(var i =0; i<id.length;i++) {
$("#list2").jqGrid('delRowData',id[i]);
}
});
}
html
</head>
<body>
<div>
Move to:
<select id="mySelect">
<option value="1">Select and option</option>
<option value="2">Trash</option>
<option value="3">Deleted</option>
</select>
</div>
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>
js
$("#Inbox").click(function () {
$.post('../../view/inbox.html', function (data) {
$('#panelCenter_1_1').html(data);
$("#list2").jqGrid({
url: '../..controller/controllerShowInbox.php',
datatype: 'json',
colNames: ['From', 'Date', 'Title', 'Message'],
colModel: [
{ display: 'From', name: 'name', width: 50, sortable: true, align: 'left' },
{ display: 'Date', name: 'date', width: 150, sortable: true, align: 'left' },
{ display: 'Title', name: 'title', width: 150, sortable: true, align: 'left' },
{ display: 'Message', name: 'message', width: 150, sortable: true, align: 'left' },
],
searchitems: [
{ display: 'From', name: 'name' },
{ display: 'Date', name: 'date' },
{ display: 'Title', name: 'title' },
{ display: 'Message', name: 'message' },
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'id_usuario',
viewrecords: true,
sortorder: "desc",
caption: "Inbox",
multiselect: true,
multiboxonly: true,
onSelectRow: function (id) {
$("#mySelect").change(function () {
if (($("#mySelect option:selected").text()) == 'Trash') {
var id = $("#list2").getGridParam('selarrrow');
if (id != '') {
var grid = $("#list2");
grid.trigger("reloadGrid");
$.post('../../controller/controllerChangeStatus.php', { id: id }, function (data) {
$('#panelCenter_2_1').html(data);
grid.trigger("reloadGrid");
});
}
} else if (($("#mySelect option:selected").text()) == 'Deleted') {
id = $("#list2").getGridParam('selarrrow');
if (id != '') {
var grid = $("#list2");
grid.trigger("reloadGrid");
$.post('../../controller/controllerChangeStatus.php', { id: id }, function (data) {
$('#panelCenter_2_1').html(data);
grid.trigger("reloadGrid");
});
}
} else {
}
});
}
});
});
});
You code looks very strange for me. I can't explain the effects which you describe without having the demo code, but I could point you to some places in the code which should be rewrote.
First problem: you use id parameter in the line onSelectRow:function(id) and then use the same variable name id to declare var id = $("#list2").getGridParam('selarrrow');. I don't understand why you do this. If you don't need parameter of onSelectRow you can just use onSelectRow:function() which will make the code more clear.
Second problems: you use binding to change event in $("#mySelect").change, but you use the statement inside of another event onSelectRow. So on every row selection you will have one more event handler to the change event. For example you would replace the body of $("#mySelect").change(function (){ to alert("changed!"). Then you would select two different rows and change the option in the "#mySelect". You will see two alerts. Then you select another row and change the option in the "#mySelect". You will see three alerts. And so on.
So you should rewrote your code in any way. If you will still have the same problem you should include full demo code (including HTML code with <select id="mySelect">...) which can be used to reproduce your problem.
I use a different approach. I build a vector of selected row ids and then process 'em with a single batch statemente server side then reload the grid.
More or less the code is.
var righe = $(nomeGrigliaFiglia).getGridParam("selarrrow");
if ((righe == null) || (righe.length == 0)) {
return false;
}
var chiavi = [];
for (var i = 0; i < righe.length; i++) {
var Id = righe[i];
var data = $(nomeGrigliaFiglia).jqGrid('getRowData', Id);
// Process your data in here
chiavi[i] = new Array(2)
chiavi[i][0] = data.FieldKey;
chiavi[i][1] = data.FieldChildId;
}
Note that I'm using this to actually send a int [][] to a C# Action
multiselect: true,
in your data process php $SQL .= "DELETE FROM ". $table. " WHERE no in ($_POST[id]);" ;