I'm implementing asp.net core 3.1 and have a JQuery DataTable in which the first column holds checkboxes. I'm keeping the selected rows objects in an array like the following for future manipulation. But my problem is how can I get access to each object from the last to the first one, something like I want to pop them out one by one and use them.
var OTable = $("#myDummyTable").dataTable();
$("input[type=checkbox]:checked", OTable.fnGetNodes()).each(function () {
var row = $(this).closest('tr');
var newRow = oTable.row(row);
keepSelectedRows.push(newRow);
});```
If there are elements in your array, and these elements are objects, you can just do
myArr.pop()
I'm assuming that your array is an array of objects!
To access that element,
let el = myArr.pop();
This should work.
Related
var Filtered_Region = imageCollection.filterBounds(geometry);
var Filtered_Meta_Reg = Filtered_Region.filterMetadata('CLOUD_COVER','less_than', 20)
var Filtered_Date_Meta_Reg = Filtered_Meta_Reg.filterDate('2019-01-01','2019-12-31')
print(Filtered_Date_Meta_Reg.size())
var Filtered_Free_image = Filtered_Date_Meta_Reg.first();
Using this piece of code in javascript i have a list(??) of class imageCollection objects which are filtered down to 30 using some methods.What i would like to do now is access these elements one by one.
I found that using .first() gives me the first element of this list(please correct me if the type produced is not a list) but i can't access the rest.
What i would like to do is via index use something like Filtered_Date_Meta_Reg[2],Filtered_Date_Meta_Reg[3] and access the 2nd and third element.How could this be done?
Hi suppose I have a jQuery selector such as this:
var a = $(this);
var b = a.nextUntil("button").text();
This will retrieve all the DOM elements till the next button. I want to access all these DOM elements individually as separate objects. Is there way to do that?
If you want to execute a function for each of the elements, you can use .each
If you want all the objects to be in an array, you can do something like this:
var arr = a.nextUntil("button")
and then index it as an array.
console.log($(a[0]).text())
I am trying to update a table to display the new row when I save a record. My code currently loads the entire table again along with the existing table. For example, I'm seeing rows 1-15, then I add a row and see 31 total rows, rows 1-15 and then rows 1-16 all in the same table.
Here is my code for the replace function which calls my original load function when it's time to replace the data. I based this off another example I saw.
function replaceData() {
var old_tbody = document.getElementsByTagName('tbody');
var new_tbody = document.createElement('tbody');
loadData(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody,old_tbody);
console.log("Data replaced");
}
I'm clearly not a JavaScript expert so any help would be appreciated.
getElementsByTagName function returns a HTML Collection (array-like object), that means that you have to specify which item of that array you want (even if there is only one item).
So your code basically should be:
var old_tbody = document.getElementsByTagName('tbody')[0];
Or you can use querySelector which returns only the first matched element. Like this:
var old_tbody = document.querySelector('tbody');
getElementsByTagName actually returns a collection of elements, so parentNode
doesn't work. To get the actual DOM node you would do the following.
var old_tbody = document.getElementsByTagName('tbody')[0];
AgGrid expects node(s) to be passed in to lot of it's data functions. How do you get a node by index? Look at the snip below:
api.forEachNode(function(node){
api.refreshRows([node]);
})
I can pass the node parameter to refreshRows() function since I'm getting it through forEachNode().
How do you get a node by index without iterating through forEachNode() ?
This might be a bit late for this question, but anyway for people who are searching for this in the future :
Apart from the answers given, you can also get the row node by using the following ways,
// Getting the row node by the row index
cont rowNode1 = api.getDisplayedRowAtIndex(rowIndex);
In some cases, the above approach is not suitable because the rowIndex can get changed when you do some changes to your grid (sort, filter, etc.).
The other method is to use the id of the row which will not change even if you sort, filter... the grid.
getRowNode(id) : Returns the row node with the given ID. The row node id is the one you provided with the callback getRowNodeId(data), otherwise, the id is a number auto-generated by the grid when the row data is set.
// Getting rowNode by row id
const rowNode2 = api.getRowNode(rowId);
You can use getVirtualRow() method to get a single row. This function is a part of the Row Model. You can get the Row Model by getModel() function.
var model = api.getModel();
console.log(model.getVirtualRow(idx));
Building on #Charlie H's answer, it's entirely possible that since the version that he was using, the API has changed a bit. I'm using the (current as of December 2017) version 15.0. I found that rowsToDisplay[] contains an array of rows accessible. The following, for example, does exactly what you'd think it would:
onCellEditingStarted: function (event) {
var displayModel = gridOptions.api.getModel();
var rowNode = displayModel.rowsToDisplay[event.rowIndex];
rowNode.setRowHeight(100);
gridOptions.api.onRowHeightChanged();
},
If you want to iterate through the grid row by row in order you can use this (where $scope.grid is your grid name):
$scope.high_index = 0;
$scope.rows = [];
$scope.grid.api.forEachNode(function (node) {
$scope.rows[node.childIndex] = node.id;
if (node.childIndex > $scope.high_index)
$scope.high_index = node.childIndex;
});
for (i = 0; i <= $scope.high_index; i++) {
var node = $scope.grid.api.getRowNode($scope.rows[i]);
}
Or if you want a row node by child index you can now use (after setting up $scope.rows above):
var node = $scope.grid.api.getRowNode($scope.rows[i]);
Where i is the row number you want.
Outside of a for I declare a variable using var list;. I use this variable inside of my for loop like so:
// add the html to the list
if (list == undefined)
list = item;
else
list.append(item.contents());
item is a cloned jquery object build from a $('list_template').clone(); call (list_template is a div with <li> elements inside). What I am doing is creating a list, which I will then appendTo() where I need it.
Right now this code works fine, but it doesn't seem right to me. Unfortunatly, I cannot seem to figure out how to correctly declare the list variable to be an empty Jquery object. I have tried both:
var list = $([]);
var list = $('');
Both of those cause the append to not work correctly (or as expected) with list.html() being null. Is there a way to initialize my variable to an empty jquery object, so all I have to do is list.append(item.contents()); without the if/else statements?
Edit: Ok to lessen confusion here is the whole javascript function that currently works fine:
var list;
// Loop through all of the objects
var objects = data.objects;
for (x = 0; x < objects.length; x++) {
// Clone the object list item template
var item = $("#object_item_list_template").clone();
// Setup the click action and inner text for the link tag in the template
item.find('a').bind('click', { val: objects[x].Id }, function (e) { ShowObjectDetails(e.data.val); })
.html(objects[x].Name);
// add the html to the list
if (list == undefined)
list = item;
else
list.append(item.contents());
}
// set the list of the topics to the topic list
$("#object_list").empty();
$('<ul>').appendTo("#object_list").append(list.contents());
The object list template is as follows:
<div id="object_item_list_template" style="display:none">
<li class="object_item"></li>
</div>
This all works correctly by cloning the list item, setting up the click action, and adding it to the list on the display.
I am trying to get rid of the if/else statement. I can't just do list.append() because if list is undefined (or not a Jquery object), it throws an exception.
An empty jQuery object is declared as:
$();
Docs for jQuery object creation: http://api.jquery.com/jQuery/
EDIT:
It sounds like you're trying to eliminate the if/else statement by extending list whether or not it has any content.
Is that right?
If so, try something like this:
list = $( list.get().concat(item.get()) );
or
$.extend(list, item);
(Assumes list is starting out as an empty jQuery object.)
EDIT:
Since you're creating elements in a loop, you can always push() then into a jQuery object.
Try something like this:
var list = $(); // Start off with empty jQuery object.
...
list.push(item.find('li').get(0)); // A jQuery object is an Array. You can `push()` new items (DOM elements) in.
...
('<ul>').appendTo("#object_list").append(list);
(I edited from the original to only push the DOM element into the jQuery object.)
Should add the current item in the loop to your list.
You could eliminate the find() calls in your code if you just cloned the children of #object_item_list_template:
$('li', '#object_item_list_template').clone(); // Clone the `li` without the `div`.
Now you have a clone of the li itself. No need to do a find.