Basically, I have a multiselect optgroup in the jQuery Mobile style. When the options are selected they appear as comma separated in the actual select display. I've used this code to separate each item selected and put them each on a different row in my SQLite Table:
db.transaction(function(transaction) {
var optgroup = String($('#myselect').val());
var optarray = optgroup.split(',');
for(var i=0; i<optarray.length; i++){
transaction.executeSql('INSERT INTO mytable(myvalue)\
VALUES(?)',[optarray[i]],
nullHandler);
}
});
}
My question is: How do I redisplay these values as comma separated when I go back onto the page with the optgroup? To be clearer:
say I selected item1 and item2 from the select...it would look like this item1,item2
these are then broken up into two rows
row1 item1
row2 item2
Now when I go back onto that page I want to see these values that the user selected back in the optgroup in the original comma separated form. I hope this makes sense, any help would be appreciated
EDIT: Usually I would just select from the database and display the value on pageload with the id of the select but I need to display multiple values from multiple rows in one selectmenu
EDIT: As suggested I tried
db.transaction(function(transaction) {
transaction.executeSql('SELECT GROUP_CONCAT (columname) FROM mytable', [],
function(transaction, result) {
if (result != null && result.rows != null) {
for (var i = 0; i < result.rows.length; i++) {
var row = result.rows.item(i);
$('#myselect').val(row['GROUP_CONCAT(columname)']);
}
$('#myselect').selectmenu('refresh');
}
},errorHandler);
},errorHandler,nullHandler);
But upon checking the value returned, it is null. I put the group_concat line into the database checker and it correctly returns the rows comma separated but they still won't display in my select. Not sure if the return type is the issue? group_concat appears to return a String.
If I try displaying without group_concat then it correctly displays, but only the last element in the column
The group_concat function returns a comma-separated list of values:
SELECT group_concat(myvalue) FROM mytable
For updating the select, we can set the value by selecting the options and setting the attribute "selected" to true. And because we're using jQuery mobile, we also have to refresh the view after doing it. You can put the code in the callback after you select the rows. So something like
db.transaction(function(tx) {
tx.executeSql("select colname from selected;", [], function(tx, result) {
dataset = result.rows;
for (var i = 0, item = null; i < dataset.length; i++) {
item = dataset.item(i);
//set option with value in colname to true
$("option[value="+item['colname']+"]").attr("selected",true);
}
$("#select-choice").selectmenu("refresh") //refresh select
});
});
Demo
Related
I'm using datatables and importer CSV file to fill a table and fill a hidden input
I'm trying to delete an item when I press the delete button from the table, at the moment I have this
$('#task-place-table tbody').on('click', '.deleted', function () {
dataTable
.row($(this).parents('tr'))
.remove()
.draw();
itemCounter--;
document.getElementById('item-counter').value = itemCounter;
});
this code can delete the item from the table, but not from the hidden input
for example, this is the input
[{"url":"http://www.restaurant.com","businessTypeId":"1"},{"url":"http://www.hotel.com","businessTypeId":"2"},{"url":"http://www.test.com","businessTypeId":"3"}]
In the example, I deleted restaurant and test item, but in the hidden input, the items still remain there (NOTE: businessTypeId is not the row ID)
I would like to have this when I delete an item from the table
[{"url":"http://www.hotel.com","businessTypeId":"2"}]
IMPORTANT NOTE: businessTypeId is not the row ID or Item ID, number 2 is coincidence (that number is the ID in database)
how can I delete items?
Get a reference to the hidden input.
Modify the value array for that hidden input.
i.e:
// "3" being the 'id' of the deleted item(s)
hiddenInputHandle.value = hiddenInputHandle.value.filter(i->i.businessTypeId !== "3")
Solution, with splice and a for, to loop through the array, I can clear the data taking url as reference
$('#task-place-table tbody').on('click', '.deleted', function () {
let value = $(this).closest('tr').find('td').eq(1).text();
for (let i = 0; i < placesArray.length; i++) {
if (placesArray[i].url == value) {
placesArray.splice(i, 1);
break;
}
}
$('#places').val(JSON.stringify(placesArray));
dataTable
.row($(this).parents('tr'))
.remove()
.draw();
itemCounter--;
document.getElementById('item-counter').value = itemCounter;
});
I'm trying to select some rows based in Ids stored in a hidden field. There is a column in the boot grid table called Id, and it has the attribute "data-identifier = true". I'm passing the Ids in an array, and the values are correct (I've checked it in the debugger), but the rows aren't selected. What am I doing wrong? I've tried to pass it as a string array and a number array, and nothing seems to work.
$('td', row).each(function () {
if (this.className == $('#hdfSelectedShift').val()) {
if (this.children[1].value != "") {
var employeeIds = [];
employeeIds = this.children[1].value.split(';').map(Number);
$('#tableData').bootgrid("select", employeeIds);
}
else {
$('#tableData').bootgrid("deselect");
}
}
})
With the function shown above, no rows are selected, even though the array contains the ids. Can you guys please help me? If you need any other code, please ask me.
I Have managed to solve this by deselecting manually using javascript.
function deselect() { //função para deselecionar a tabela com employees (ajuste para o bootgrid)
$('#tableData tbody tr').each(function () {
this.cells[0].children[0].checked = false;
})
}
I have a html table with multiple columns, in two columns i'm displaying the dropdown list. When user selects the value from one dropdown list(Select Product1
or Select Product2 dropdown list), i want to remove the option selected in one dropdown and dont show that option in the other dropdown list...
Below sample code works when the class name is same for all the dropdown list available in the table(Select Product1,Select Product2), but in my case
the class name for the dropdown list is same for each colum in the table which breaks the below code.
var $combo = $(".combo");
$combo.on("change", function () {
var select = this,
selected = $("option:selected", this).text();
$combo.each(function (_, el) {
if (el !== select) {
$("option", el).each(function (_, el) {
var $el = $(el);
if ($(el).text() === selected) {
$el.remove();
}
});
}
});
});
Sample Demo : http://plnkr.co/edit/VSdhVfhyIfI0rV6efrZv?p=preview
In the above demo, when user selects product "laptop" from one dropdown list for one row, the option "laptop" should not be shown in the other dropdown list present in that row...
Look in same row instead of looping over all the selects in the table. ALso would be simpler to match values
$combo.on("change", function() {
var $sel = $(this),
val = $sel.val();
$sel.parent().siblings().find('.combo option[value=' + val + ']').remove()
});
Note however that you have a different issue also whereby if user changes one that was previously selected you don't have the ability to re-insert one.
Should consider keeping a clone of all the options stored in a variable so you can look for the missing one during subsequent changes
Im facing a small issue in sap.ui.table. I want to uncheck the checkbox of the table if i delete the record. Here im able to delete the record, But the selection of checkbox was not getting cleared and it is appending for the below row.
In the above image if you see, if i delete "Rani Test", Rani Test row will get deleted but checkbox will get selected to "Surya Test". Please check the below code..
onPressDelete: function(evt) {
var deleteRecord = evt.getSource().getBindingContext('familyDetailsModel').getObject();
var tableId = this.getView().byId("familyDetailsModel");
var index = tableId.getSelectedIndex();
//this.getView().byId("familyDetailsModel").removeSelectionInterval(index,1);
for (var i = 0; i < this.getView().getModel('familyDetailsModel').getData().length; i++) {
if (this.getView().getModel('familyDetailsModel').getData()[i] == deleteRecord) {
this.getView().byId("familyDetailsModel").removeSelectionInterval(i, i);
this.getView().getModel('familyDetailsModel').getData().splice(i, 1);
this.getView().getModel('familyDetailsModel').refresh();
break;
}
}
},
In the above code, splice() method im using to delete the row which is working perfectly. But checkbox is not getting deselected. To uncheck the checkbox im trying with removeSelectionInterval() method. But it is not behaving as expected.
Can someone please help me to sort this issue
Thanks in advance
This line var index = tableId.getSelectedIndex(); returns -1 in your scenario. Furthermore, to delete one line you need to specify removeSelectionInterval(index,index);
The second parameter is not the number of positions to delete. Is the indexTo, so you want to remove from the selected row, to the selected row.
Getting the row index from the event will work better for you. Try this:
var iIndex = oEvent.getSource().getParent().getIndex();
var oTable = this.getView().byId("__table0");
oTable.removeSelectionInterval(iIndex, iIndex);
Here the snippet: https://plnkr.co/edit/wkMc4LcjYYS3K73ClYUc?p=preview
I have a window which has drop down list and an HTML table where the table rows are populated on the basis of selection made in drop down list. Once the table is populated user clicks on each row for selection and clicks "OK" button. The user can also select only two out of three rows depending on the requirement. Once the "OK" button is clicked I store the rows selected in the localStorage using the following code and also preform some actions as follows:
$('.ok').bind('click', function() {
if (somecondition) {
//some process
}
$("#selectedTblDiv tr:selected").each(function(index,row) {
fnMatch($(row).find(("td:first").html()));
localStorage.setItem("test-" + index, $(row).find(("td:first").html()));
});
fnDialogClose();
});
Here I have stored the first element of each row in localStorage with unique ID. While I am retrieving the same on page refresh I do the following process:
function fnDisplay() {
//some code to open dialog
for (var i = 0; i < localStorage.length; i++) {
//some code and process
var $select = $("#list_button");
for (var j = 0; j < localStorage.length; j++) {
if (localStorage.getItem("test-" + j)){
var t = localStorage.getItem("test-" + j);
if (t == prevIDs) {
$("#list_button > option").each(function() {
if (this.text == prevIDs) {
$(this).remove();
}
});
$('<option>').text(prevIDs).attr("disabled", true).appendTo($select);
}
}
}
}
}
Here basically fnDisplay() opens a window and on some process drop down list is populated. And from the list user selects and the details are populated in the HTML table.Onclcik of "OK" it performs some actions and also stores the user selection of table in localStorage.
Again when the user opens the window the items in the drop down are disabled which were previously selected from the table. But the items which were not selected from the drop down are still enabled for selection.
My problem is as follows:
Drop down list has
10023
10024
10025
User selects 10023 and 10024 so HTML table is populated as follows:
HTML table
vehID Name Place Summary
----- ---- ----- -------
10023 car blore 4-wheeler
10024 bike pune 2 wheeler
Now user selects the rows 10023 and 10024 and clcik "OK".
Now the window is closed and reopened so my drop down looks as followss
10023 //disabled
10024 //disabled
10025 //enabled
and my html table is empty.
Now user has a provision to select the non-selected values. ie 10025
Now 10025 is selected and HTML is populated and the same row selection and "OK" button is clicked.
Now when the user reloads the window I want all the options in drop down to be disabled as all are selected. But as localStorage is based on row selection its overwriting the stored values when new value is selected. Though I have given unique ID to each row as
localStorage.setItem("test-"+index,somethin);
The value of index is set to 0 again when a new row is selected . So my drop down list looks like this
10023 //enabled
10024 //disabled
10025 //disabled
So here 10025 is overwriting on 10023. How do I resolve this issue by giving an unique ID to each?
The problem is that you are saving each selected item separately, causing existing items to be overridden when you're adding a new item.
Instead you can store an array of items in localStorage . When you're adding a new item, you can retrieve the array and push the new item into it. Something along the following :
var items = JSON.parse(localStorage.getItem("items")) || [];
$("#selectedTblDiv tr:selected").each(function (index, row) {
items.push($(row).find(("td:first").html()));
});
localStorage.setItem("items", JSON.stringify(items));