I am using Datatables and trying to populate the datatable through an ajax call. In datatable I have added a textbox functionality so users can change the value of final marks. Once the user has changed the value of final marks I want to use a onblur function to save that new final marks value in database. So I have to pass rosterID and new final marks to the onblur function. But I don't know how to pass 2 parameters in this. I have decided to pass it an object named as "obj". But it is not passing at all to the function and formal parameter for the function "obj1" seems undefined. Here is my code.
// piece of code from my datatables AJAX call.
{ data: 'SrNo', title: "Sr No" }, // 0
{ data: 'RosterID', title: "Roster ID", visible: false }, // 1
{ data: 'RollNo', title: "Roll No" }, // 2
{ data: 'StudentName', title: "Student Name" }, // 3
{
data: 'FinalScore', title: "Final Score", //4
render: function (data, type, full, row) {
var obj = {
ros: full.RosterID,
final: full.FinalScore
}
return '<input class="form-control" id="DTFinalaTermMarks"
name="DTFinalaTermMarks" type="text" onblur="updateFinalTermScore('+obj+');"
value = ' + data + ' >';
}
},
{ data: 'WeightedScore', title: "Weighted Score"}, //5
// function with formal parameter
function updateFinalTermScore(obj1) {
var roterID = obj1.ros;
alert("hi");
}
```
kindly help.
The object you need to use is this.
updateFinalTermScore(this)
In the context of an event such as onblur, created in a column renderer, it would look like the following:
{
title: "Salary",
data: "salary",
render: function (data, type, row, meta) {
return '<input class="form-control" id="DTFinalaTermMarks" ' +
'name="DTFinalaTermMarks" type="text" ' +
'onblur="updateFinalTermScore(this, ' +
'\'' + row.RosterID + '\'' + ');" ' +
'value = ' + data + ' >';
}
}
The return statement uses string concatenation to create the required HTML.
The this object represents the context of the onblur event - the node for which the event happened. In this case, that is the relevant <input> element.
You need to use this approach so that you can access the value of the <input> element - which may have been updated by the user before the onblur event.
The resulting HTML created by the DataTables render function is:
<input class="form-control"
id="DTFinalaTermMarks"
name="DTFinalaTermMarks"
type="text"
onblur="updateFinalTermScore(this, '123');" value="456">
Here, 123 is the roster ID. I assume this is a string value, which is why I use '\'' to surround that value in single quotes.
When the onblur event happens, the updateFinalTermScore can access the node represented by this and extract the user-provided value using the jQuery val() function:
function updateFinalTermScore(node, salary) {
console.log( $( node ).val() );
console.log( RosterID );
}