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;
});
Related
After a modification, I would like to add an attribute to highlight the newest or last updated row in my array until the user leaves the page. I don't know how to select the right row the getElementsByTagName() function.
Component
Here I get my selected object and add an attribute but the problem is that the id isn't the index of the row so it doesn't add the attribute to the right row.
getById(id: number) {
this.getByIdSub = this.service.get(id).subscribe((data) => {
console.log(data);
if (id != null) {
var t = document.getElementsByTagName("tr")[id].setAttribute("id", "test");
}
});
}
For example I want to select the first row of my array with the ID 10 and set the attribute to it but it will select the 10th row because I pass the ID 10 in the index.
my array
In this picture I clicked on the 3rd row but the first row is highlighted
If your id is id of the target element, then you can use document.querySelector("tr#" + id). This will select and return TR element with id attribute id. So your code would be:
getById(id: number) {
this.getByIdSub = this.service.get(id).subscribe((data) => {
console.log(data);
if (id != null) {
var t = document.querySelector("tr#" + id).setAttribute("id", "test");
}
});
}
You can find more info here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
I have a table with data and a button that when clicked should do something with the row index. I've done this like so:
$("#tblData tBody").on('click', '.updateButton', function() {
updateButtonRowIndex = $(this).closest('tr').prevAll().length;
alert(updateButtonRowIndex);
});
This works but when I apply sorting to one of the columns, it no longer takes the actual row number but restarts from 0. This means that if I sort on ID and click on the button for 182 (now at the top) it will show that the row index is 0 and it will draw a value in the wrong row (the actual row 0).
Any solution for this?
You need to store the value for the original row index, you can always use an attribute for that like this:
$("#tblData tBody").on('click', '.updateButton', function() {
if ($(this).closest('tr').attr('originalRowIndex')) {
alert("This is the original value: "
$(this).closest('tr').attr('originalRowIndex'));
} else {
updateButtonRowIndex = $(this).closest('tr').prevAll().length;
$(this).closest('tr').attr('originalRowIndex', updateButtonRowIndex)
alert(updateButtonRowIndex);
}
});
In Bootstrap Table
, one field has anchor tag, so when clicked i can get the data-index of parent row. Now i want to get the complete row data using the data-index
$(document).on('click', '.delete_icon', function(event) {
var index = $(this).parent().parent().data('index');
//Get the complete row data by using the dataindex
// Row has three fields
});
I cannot use data-uniqueid to get the data since my unique id is String like #1:1, #1:2 etc
you can obtain the row, index and data of the table with a click.
window.actionEvents = {
'click .dele_icon': function (e, value, row, index) {
alert('You click remove icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
}
};
http://jsfiddle.net/wenyi/e3nk137y/39/
foreach row in my table i've a delete button , on click this button i've the following function :
function deleteBussDay(jQtable)
{
var row = jQtable.parentNode.parentNode;
$(jQtable).closest('tr').remove();
openHour.splice(row.rowIndex,1);
// openHour is my array ,which i also want to delete from
}
the problem with this code it does delete the corret row from the table when clicking on delete but it removes the wrong row in the array . (one above of the selected row)
how can i fix it ?!
If, like you say, the correct row is removed, then you make the correct traversal to the table row here:
$(jQtable).closest('tr').remove();
Meaning, to get the rowIndex property of our table row, we can use the same jQuery object together with .prop():
function deleteBussDay(jQtable) {
var $row = $(jQtable).closest('tr'), rowInd = $row.prop('rowIndex');
$row.remove();
openHour.splice(rowInd ,1);
}
'rowIndex' counted for each table.
'rowIndex' changed when you sort table.
As alternative you can use some 'data' attribute as mark.
function deleteBussDay(jQtable)
{
var row = $(jQtable).closest('tr');
var id = row.data('rowIndex');
row.remove();
openHour.splice(id, 1);
// openHour is my array ,which i also want to delete from
}
or
function deleteBussDay(jQtable)
{
var row = jQtable.parentNode.parentNode;
var id = row.rowIndex;
$(row).remove();
openHour.splice(id, 1);
// openHour is my array ,which i also want to delete from
}
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