We Keep Coding

JQuery - Why this variable doesn't lose its value after the function was executed?

I'm new to JQuery and I'm trying to define a JQuery function with the purpose of edit a table row: a modal asks for the new values and then, the function update the table row content. But when I select the row I want to edit, the variable in which the row was stored "accumulates" all the previous rows that have been edited in the same object and when I try to update the new values to this single row, all the rows edited before receive and show the same value. Why is this happening?
I'll show you the code:
$("#table").on("click", ".edit", function() {
var table = $("#table").DataTable();
var row = $(this).closest("tr");
//getting the <tr> content with Datatables API:
var values = $table.row(row).data();
$("#name").val(values[0]);
$("#surname").val(values[1]);
$("#city").val(values[2]);
$("#myModal .modal-footer").on("click", "#confirm", function() {
var newValues = []
//getting the <tr> content with Datatables API:
//this alert appears as many time as many rows have been changed
alert($table.row(row).data());
//deleting the old data from the server...
//getting the new values:
newValues.push($("#name").val());
newValues.push($("#surname").val());
newValues.push($("#city").val());
//adding the new date to the server...
$("#myModal").modal("hide");
//update the html table:
table.row(row).data([newValues[0], newValues[1], newValues[2]]);
});
});
As I've explained before, the variable "row" in the .on("click")
function "accumulates" all the rows that have been edited before.
I thought it was a scope probelm, so I've also tried to call an extern function which basically did the same things and took advantage of the event.data object:
$("#confirm").on("click", {table: table, row: row}, edit);
but with no luck. If any one can help me or even provide me some advice or documentation, it would be very appreciated.

You have to use two different and independent functions using an external variable to connect them; you can't use .on() in a nested way

Json data from table in an onclick function show in seperate div

I'm trying to get data used in my table to be used in a div when I click on the table. The thing is, there are multiple tables in my script according to the data of my JSON. So my JSON consists of object that consists of object. For example:
My table(s) are rendered like this:
data.forEach(function(somedata){
return '<table><tr><td>'+somedata.something+'</td></tr></table>';
});
Now I've tried to get the onclick to work in this case but I cant seem to figure out how. I'd like to not use specific ID's rendered in the foreach like:
var i=0;
data.forEach(function(somedata){
i++;
return '<table id="'.id.'"><tr><td>'+somedata.something+'</td></tr></table>';
});
the variable somedata consists of an object so I cant just make an onclick in the html code of the table either and send the data in it.
So somedata would look something like this but json encoded:
somedata{
[0]=>array(
'something'=>'test',
'theobject'=>array(...)
),
[1]=>array(etc...)
}
Now what I want is to get the data from theobject in a seperate div as soon as I click on the table that belongs to the right somedata.
I've been thinking of making a jquery on click for this but then I would need specific ID's in the table(if that's the only possible solution then I'd take it). Cant I do something with this or something? Or send the data at the same time it's being rendered cause in my code I can at the moment of course reach to somedata.theobject
I think I'm thinking a bit too difficult about this. Am I?

You can pass this in onclick function like
return '<table onclick=makeObject(this)><tr><td>'+somedata.something+'</td></tr></table>';
And then use the function to get the data
function makeObject(that){
var tbl = $(that).find('tr').map(function() {
return $(this).find('td').map(function() {
return $(this).html();
}).get();
}).get();
}

There are a few ways to go about this. Rather than using the forEach function we can use the jQuery.map function, since you've indicated that you're open to using jQuery :-)
var $els = $.map(data, function(somedata, i){
var $el = $('<table><tr><td>'+somedata.something+'</td></tr></table>')
.click(function(e) {
populateDivWithData(somedata.theobject);
});
return $el;
});
The call to .click inside each will create a separate click handler for each item in data; each click handler then has access to the relevant theobject value.
EDIT: Thanks #Loko for the reminder about the .forEach built-in

How to check if variable is an initialized DataTable?

Is there a way to determine if a variable is an initialized DataTable or not? I assumed $.fn.dataTable.isDataTable() could be used, but this only works for table selectors, not for variables containing an initialized DataTable. This function is returning false for such variables:
var table = $("#table").DataTable(); // Valid initialized DataTable
console.log($.fn.dataTable.isDataTable("#table")); // Returns true
console.log($.fn.dataTable.isDataTable(table)); // Returns false...why?
Since $.fn.dataTable.isDataTable() cannot be used to check a variable, is there another way to see if such a variable is an initialized DataTable? I'm basically trying to do this:
if (isDataTable(variable)) {
// datatable ... do datatable stuff
} else {
// not a datatable... do other stuff
}

I asked this question to the creator of DataTables, and he suggested using instanceof:
var table = $("#table").DataTable(); // Valid initialized DataTable
if (table instanceof $.fn.dataTable.Api) {
// datatable ... do datatable stuff
} else {
// not a datatable... do other stuff
}
This approach works exactly as needed. He also went on to extend $.fn.dataTable.isDataTable() in this commit so that it will allow variable inputs.

You don't need to pass an JQuery instance to isDataTable().
isDataTable() requires an ID.
For more information : isDataTable()
Please check this:
How to check if DataTables are initialized

From Documentacion of DataTable:
https://datatables.net/reference/api/$.fn.dataTable.isDataTable()
This method provides the ability to check if a table (tag) node is already a
DataTable or not. This can be useful to ensure that you don't
re-initialise a table that is already a DataTable.

HTML injection using Jquery?

I want to insert a label called "octosplit-label" right under the current octosplit-label.
How do I do this in Javascript?
I had an attempt that didn't work here
function addOneCheckbox($label) {
$('#issues-container .table-list').append($label);
}

Try modifying your function like this:
function addOneCheckbox($label) {
$('#octosplit-label').after($label);
}
Remember that IDs should be unique, so the HTML contained within $label should not have the same ID (which is octosplit-label) and also there should be no other labels currently on the page with that same ID.

This should work for you (from jQuery documents:
function addOneCheckbox($label) {
$($label).insertAfter('#octosplit-label');
}
The $label needs to be all of the html for the label.

Please keep in mind that IDs have to be unique; therefore you cannot give the new label the same ID as the existing one:
$('#octosplit-label').after( $('<label/>',{'id':'some_id','for':'if_so_desired'}) );
Reference:
jQuery.after() API Documentation

You should add some validation before try to modifying the DOM.
function addOneCheckbox(label) {
var element = $('#issuelist').find('#octosplit-label');
if(element.length > 0) {
element.append(label);
}
}

jquery extension return $.each confusion

I am trying to use a jQuery extension I came across (handsontable). I am having no problem creating the table
var spreadsheet = $("#dataTable").handsontable({
rows: 3,
cols: 15,
minSpareRows: 2
});
However after I create the table I want to call various helper functions I see declared in the javascript for the Handsontable object. The problem is the extension seems to return this.each(function() { ... }); and I don't understand how I can access the underlaying Handsontable object from this. The js for the extension can be found here and I put a small demo together on the following link
http://jsfiddle.net/7JTG2/7/
as you can see I would like get the data of one of the cells when I click a button.

The relevant code is in the end:
$.fn.handsontable = function (action, options) {
if (typeof action !== 'string') { //init
options = action;
return this.each(function () {
if($(this).data("handsontable")) {
instance = $(this).data("handsontable");
...
} else {
...
instance = new Handsontable($(this), currentSettings);
$(this).data("handsontable", instance);
}
});
}
}
That means, the code sets the Handsontable instances as a data attribute to the elements (and returns the selected set to be chainable). Having one element, you can easily extract it with instance = $el.data("handsontable"). If you have a set of elements, you will need to loop over it - e.g. with each().

Looks like you could just use the onChange method of the plugin to capture data every time it is entered automatically. No need for a button. A simple example to add to your code above.
onChange: function(data) {
$("#data").append(JSON.stringify(data));
}