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 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.
CodePudding user response:
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 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
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 );
}