i am trying to have a button in a table column and when its clicked, i want to invoke a service with values from that row. can someone please help achieve this.
function setResponseData(data, length) {
var insertHTML = "<TR class=\"heading\"><TD align=\"center\"> TIMESTAMP </TD><TD align=\"center\"> OPERATION TYPE </TD><TD align=\"center\"> LOG LEVEL </TD><TD align=\"center\"> VERSION </TD><TD align=\"center\"> TYPE </TD><TD align=\"center\"> SESSIONID </TD><TD align=\"center\"> PIECEID </TD><TD align=\"center\"> SHIPMENTID </TD><TD align=\"center\"> SYSTEM ORIGIN </TD><TD align=\"center\"> SYSTEM DESTINATION </TD><TD align=\"center\"> SYSTEM DATAORIGIN </TD><TD align=\"center\"> DIRECT INJECTION ORGANISATION </TD><TD align=\"center\"> PRODUCT </TD><TD align=\"center\"> STATUS </TD><TD align=\"center\"> STATUS CODE </TD><TD align=\"center\"> STATUS MESSAGE </TD><TD align=\"center\"> NODENAME </TD><TD align=\"center\"> PIECENUMBER </TD><TD align=\"center\"> TOTALPIECES </TD><TD align=\"center\"> SYSTEMNAME </TD><TD align=\"center\"> INSERT TIMESTAMP </TD><TD align=\"center\"> EVENT CODE </TD><TD align=\"center\"> CUSTOMERID </TD><TD align=\"center\"> PAYLOAD </TD></TR>";
//var PayloadBtn = document.createElement("BUTTON");
for (var i = 0; i < length; i++) {
var audit = data.results[i];
//var PayloadBtn = document.createElement("BUTTON");
//PayloadBtn.innerHTML = audit.PAYLOAD;
if ((i % 2) == 0) {
insertHTML += "<TR style='background-color:#F0F0E0'>";
} else {
insertHTML += "<TR style='background-color:#E0E0C0'>";
}
if (Boolean(audit.TIMESTAMP)) {
insertHTML += "<TD align=\"center\"> " + audit.TIMESTAMP + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.OPERATIONTYPE)) {
insertHTML += "<TD align=\"center\"> " + audit.OPERATIONTYPE + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.LOGLEVEL)) {
insertHTML += "<TD align=\"center\"> " + audit.LOGLEVEL + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.VERSION)) {
insertHTML += "<TD align=\"center\"> " + audit.VERSION + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.TYPE)) {
insertHTML += "<TD align=\"center\"> " + audit.TYPE + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.SESSIONID)) {
insertHTML += "<TD align=\"center\"> " + audit.SESSIONID + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.PIECEID)) {
insertHTML += "<TD align=\"center\"> " + audit.PIECEID + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.SHIPMENTID)) {
insertHTML += "<TD align=\"center\"> " + audit.SHIPMENTID + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.SYSTEMORIGIN)) {
insertHTML += "<TD align=\"center\"> " + audit.SYSTEMORIGIN + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.SYSTEM_DESTINATION)) {
insertHTML += "<TD align=\"center\"> " + audit.SYSTEM_DESTINATION + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.SYSTEMDATAORIGIN)) {
insertHTML += "<TD align=\"center\"> " + audit.SYSTEMDATAORIGIN + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.DIRECT_INJECTION_ORGANISATION)) {
insertHTML += "<TD align=\"center\"> " + audit.DIRECT_INJECTION_ORGANISATION + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.PRODUCT)) {
insertHTML += "<TD align=\"center\"> " + audit.PRODUCT + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.STATUS)) {
insertHTML += "<TD align=\"center\"> " + audit.STATUS + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.STATUS_CODE)) {
insertHTML += "<TD align=\"center\"> " + audit.STATUS_CODE + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.STATUS_MESSAGE)) {
insertHTML += "<TD align=\"center\"> " + audit.STATUS_MESSAGE + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.NODE_NAME)) {
insertHTML += "<TD align=\"center\"> " + audit.NODE_NAME + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.PIECENUMBER)) {
insertHTML += "<TD align=\"center\"> " + audit.PIECENUMBER + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.TOTALPIECES)) {
insertHTML += "<TD align=\"center\"> " + audit.TOTALPIECES + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.SYSTEM_NAME)) {
insertHTML += "<TD align=\"center\"> " + audit.SYSTEM_NAME + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.INSERT_TIMESTAMP)) {
insertHTML += "<TD align=\"center\"> " + audit.INSERT_TIMESTAMP + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.EVENT_CODE)) {
insertHTML += "<TD align=\"center\"> " + audit.EVENT_CODE + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.CUSTOMERID)) {
insertHTML += "<TD align=\"center\"> " + audit.CUSTOMERID + " </TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
if (Boolean(audit.PAYLOAD)) {
insertHTML += "<TD><input class='myclass' type='button' value='Download' onclick =getPayload(${data.results[i]})/></TD>";
} else {
insertHTML += "<TD align=\"center\"> </TD>";
}
}
document.getElementById("contentTable").innerHTML = insertHTML;
}
function getPayload(audit) {
var param = "?";
var flag = "false";
if (audit.VERSION != "" && audit.SESSIONID!= "" && audit.SHIPMENTID!="" && audit.SYSTEM_NAME!="" && audit.TYPE!="") {
param += "shipmentId=" + audit.SHIPMENTID;
param += "version=" + audit.VERSION;
param += "sessionId=" +audit.SESSIONID;
param += "systemName=" + audit.SYSTEM_NAME;
param += "messageType=" + audit.TYPE;
param += "operationType=" + audit.OPERATIONTYPE;
flag = "true";
}
var err = document.getElementById("errorContent");
err.style.display = "none";
var XHR = new XMLHttpRequest();
// We setup our request
XHR.open("GET", "/restv2/getPayloadml" + param);
I want to invoke the function getPayload when the download button is clicked, but its not calling that function.
My download button is in a for loop and are displayed in a table column. when i click a particuar button, i want that row values to be sent to the function getPayload so i am giving as onclick =getPayload(${data.results[i]. am doing something wrong here that the function is not called.
In your browser's DOM explorer, examine the result of this string literal:
You'll find it to be, literally, this:
Which is incorrect in that:
onclickattribute value.${data.results[i]}is a syntax error.It looks like you're trying to use template literals. You should also be using double-quotes around attribute values, not single-quotes. So the string literal (template literal) would be something like this:
Note the use of back-ticks to wrap the literal and the use of double-quotes around attribute values. Browsers are pretty lenient about allowing single-quotes, but in general when your code isn't doing what you expect then the first thing to do is ensure that it's at least technically syntactically correct.