I have a Html Table which displays data and is having delete and update functionality as below,
function DesignBTable(data) {
$("#ExpTableBody tr").remove();
var rowIndex = 0;
$.each(data, function (index, value) {
var fromDt = moment(value.from_date).format("MMM/YYYY");
var toDt = moment(value.to_date).format("MMM/YYYY");
$("#ExpTableBody").append("<tr>" +
"<td>" + value.org_name + "</td>" +
"<td>" + fromDt + "</td>" +
"<td>" + toDt + "</td>" +
"<td>" + value.designation + "</td>" +
"<td>" + value.location + "</td>" +
"<td>" + value.is_relevant + "</td>" +
"<td>" + '<input type="button" value = "X" class="btn btn-danger btn-sm" onClick="Javacsript:deleteRow(\'' + value.exp_id + '\',\'' + value.from_date + '\')">' + ' ' +
'<input type="button" value = "E" class="btn btn-info btn-sm" onClick="Javacsript:editRow(\'' + value + '\')">' + "</td>" +
"</tr>");
//alert(moment(value.from_date).format("MM/YYYY"));
rowIndex++;
});
};
The value object contains various fields.
On the Click event of the delete button I send value.exp_id and value.from_date as parameter to deleteRow function.
I want to add Edit functionality where if I click on the edit button it should send the value as object so that I can access all the fields in it.
When I try to send value as parameter to the JS function it errors out as undefined.
To create a string for code that uses the object, you would need to create a string representation of the object:
... onClick="editRow(' + JSON.stringify(value) + ')" ...
(Note: The JSON object is not supported in some older browsers.)
If you create elements directly instead of creating a string that you create elements from, you can bind the event directly and use the object without creating a string representation of it:
$("#ExpTableBody").append(
$("<tr>").append([
$("<td>").text(value.org_name),
$("<td>").text(fromDt),
$("<td>").text(toDt),
$("<td>").text(value.designation),
$("<td>").text(value.location),
$("<td>").text(value.is_relevant),
$("<td>").append([
$("<input>", { type: "button", value: "X", className: "btn btn-danger btn-sm" }).click(function(){
deleteRow(value.exp_id, value.from_date)
}),
$("<input>", { type: "button", value: "E", className: "btn btn-info btn-sm" }).click(function(){
editRow(value);
})
])
])
);
As a side effect, by using the text method to put the values in the cells, it's protected agains script injection. If you actually have HTML code that you want to put in a cell, you would use the html method instead. That naturally means that you should encode it properly when you create that HTML code to protect against script injection.
Side note: The javascript: pseudo protocol is only used when you put code in an URL, i.e. a href attribute. If you use it anywhere else it becomes a label instead. This is not harmful, but useless and confusing.
the problem of 'value' accessibility is it's defined only inside the function not outside.
I see you use JQuery, so you can use JQuery.data to make a link between an html object and a custom value. In your case you can add the value directly to the button at the end of the row.
Related
I am using simple JavaScript code to submit a form and storing the form data into an array in the form of objects and later showing the data on click of a button. I also have provided two buttons -'EDIT' and 'DELETE' for each elements while showing the data in tabular form under 'Action' header.
I can pass the corresponding ids to those methods to perform edit and delete operation on specific entries/object and based on that I want to keep data in final array and want to show them after the operation.
However I have done the 'delete' functionality but I could not get any lead to implement the 'EDIT' button functionality.
I want to know- is it possible to prepopulate the form with data available and make the changes and again save it back when I click on edit button?
Note: I am not using any database connection for this. Here in the below code I am storing the objects in dataArray
sample form object- I am storing dataArray after submit:
0: CreateUser
description: "I am Web developer"
email: "test#gmail.com"
english: "english"
gender: "Male"
hindi: "hindi"
id: "12312"
name: "test"
othersLang: "others"
role: "dev"
Please have a look at it ---
function getEmployeeDetails() {
let totalLength = userArray.length;
if (totalLength === 0) {
alert("No user Data Found");
return;
}
let tbody = document.getElementById("tbody");
tbody.innerHTML = "";
for (let i = 0; i < userArray.length; i++) {
let tr = `<tr id=` + userArray[i].id + `>`;
tr +=
"<td class='table-data'/td>" +
userArray[i].id +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].name +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].email +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].gender +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].role +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].english +
userArray[i].hindi +
userArray[i].othersLang +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].description +
"</td>" +
`<td class="table-data">
<button onclick="deleteUser(` +
userArray[i].id +
`)">Delete</button> || <button onclick="editUser( ` +
userArray[i].id +
`)">Edit</button>
</td>`;
tbody.innerHTML += tr;
}
}
function deleteUser(id) {
console.log('ID',id);
userArray = userArray.filter(x => x.id === id);
console.log("aftre", userArray);
let elem = document.getElementById(id);
elem.remove();
return userArray;
}
function editUser(id) {
console.log("edit", id);//prints corresponding id
}
I am not sure if this can be achieved or not.
Any suggestion on this is highly appreciated.
I'm not sure I understand what you're trying to achieve, but if you're trying to prepopulate your page without the use of any database, you could use a file with some json data in it.
see JavaScript: Create and save file
Or you could pretty much hardcode it into your page on an on-load event.
On a side note, if you know you're not going to work with Internet Explorer you could use the find() function instead of the filter(), as find() will stop its iteration on the array once it finds the FIRST occurrence of whatever you passed in its function, and filter() will just keep going.
Seeing as you're trying to get data using a unique ID, it might be better to use it instead :)
see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
So I got into this tricky situation. I have a variable which present table data:
row += '<td>' + c + '<button class="btn btn-success" id="' + callId + ' " onclick="handleCall()">Call</button>' + '<button class="btn btn-danger" id="' + hangupId + ' " onclick="handleHangUp()">Hangup</button>' + '</td>' ;
Latter on I will append that into my table. Now, when I click Call button, I want to get the button's Id. I have tried this way:
function handleClick() {
console.log(this);
}
but it refer to window object. Can anybody show me the way to achieve my goal? Thanks
Simply pass the elements ID as a parameter to keep it simple,
Change,
onclick="handleCall()"
to,
onclick="handleCall(this.id)"
this referring to the button in question the user is pressing.
then,
function handleClick(id) {
console.log(id);
}
Finally don't use inline event handlers as they are a pain to work with in the long run, make use of the addEventListener method.
row += '<td>' + c + '<button class="btn btn-success" id="' + callId + ' " onclick="handleCall(this)">Call</button>' + '<button class="btn btn-danger" id="' + hangupId + ' " onclick="handleHangUp()">Hangup</button>' + '</td>' ;
function handleClick(element) {
console.log(element);
//here you will have all element properties
}
There are two ways you can do this, you can do it via jQuery by using attr or if you are wanting to stay vanilla Javascript then you can use .id.
For jQuery please see code below:
console.log(jQuery('element').attr('id'));
For Javascript please see code below:
console.log(element.id);
I am using JavaScript to fill a <div> tag with other <div>s. It has been working until I changed an identifier used inside a onclick event. The old identifier (index) was just a small number from 0-1000, but the new identifier (id) is a uuid.v4() generated string that looks like this:
f5ec8170-e75c-4a93-9997-1a683b7d2e00
I have the exact same code for index and the id. But whenever I click on the button which is suppose to activate the function call with the id as an argument it gives me:
Missing ) after argument
Which does not happen when I click on the button which does the same thing with index as an argument instead of id.
My code:
var id = messages[i].id;
var index = 0;
var newElement =
'<div class="fullMessage" id="fullRightMessage' + i + '">'+
'<h6 class="textMessage">' + messages[i].comment + '</h6>' +
'<button class="likeButtonMessage" onclick="likeClicked(right, ' + index + ', 1);">LIKE</button>' +
'<button class="dislikeButtonMessage" onclick="likeClicked(right, ' + id + ', -1);">DIS</button>' +
'<h4 id="scoreright' + i + '" class="messageScore">' + messages[i].score + '</h4>' +
'</div>'
You do not enclose the uuid with quotation marks. Before it worked because your id was a clean integer which doesn't need them.
Exchange the line with id to
'<button class="dislikeButtonMessage" onclick="likeClicked(right, \'' + id + '\', -1);">DIS</button>' +
Your previous ID was interpreted as an int, which is the reason why it worked.
Your new ID is a string, requiring you to enclose it in quotation marks:
onclick="likeClicked(right, \'' + id + '\', -1);"
This is because this is not valid code:
likeClicked(right, f5ec8170-e75c-4a93-9997-1a683b7d2e00, -1)
I have some jQuery script in which I'm adding some rows to a table (when the user press a button). My problem is that I want to change the id of the elements inside the rows dynamically. I have set a global variable i which I set as an id to some elements inside my table. The problem is that after some debugging I found out that the id doesn't change at all and stays as the letter i (and not the variable i set to 0 and increase every time the user press the button). Any ideas?
var i=0;
var a1=i.toString().concat("1");
var a2=i.toString().concat("2");
var a3=i.toString().concat("3");
$("#table1").append("<tr><td><center><input id=\"a1\"></input></center></td><td>
center><button id=\"a2\">Load</button></center></td><td ><img id=\"a3\"></td>
</tr>");
$("#a2").click(function(){
$z=$("#a1").val();
$("#a3").attr("src",$z);
i++;
});
That's because you're writing those directly as strings. You need to concatenate them into the actual string. You can concatenate strings together using +.
$("#table1").append(
"<tr>" +
"<td>" +
"<center><input id=\"" + a1 + "\" /></center>" +
"</td>" +
"<td>" +
"<center><input id=\"" + a2 + "\" /></center>" +
"</td>" +
"<td>" +
"<center><input id=\"" + a3 + "\" /></center>" +
"</td>" +
"</tr>"
);
For what it's worth, the <center> tag is deprecated and should not be used. You may also consider creating some kind of template rather than generating your HTML as strings directly inside of JavaScript.
This question already has answers here:
Adding onClick event dynamically using jQuery
(7 answers)
Closed 8 years ago.
I want to fetch the json data from serve and then loop the rows of table. the html code is like:
<table id="topics_list_table">
<thead>
<tr><th>Topic Title</th>
<th>Author Name</th>
<th>Likes</th>
<th>Created Time</th>
<th>Actions</th>
</tr></thead>
<tbody>
</tbody>
</table>
the jQuery part:
$.ajax({
url: some url here,
type:'GET',
success:function(res){
$.each(res, function(index, value){
$('#topics_list_table > tbody:last').
append(
"<tr>" +
"<td>" + value.title + "</td>"+
"<td>" + value.author_name + "</td>"+
"<td>" + value.likes + "</td>"+
"<td>" + value.created + "</td>"+
"<td>" +
"<a href='/components/topics/" + value.id + "' class='mini ui black buttons' id='detail_check'>check</a>"+
"</td>"+
"</tr>"
);
});
}
});
I could get all the data from the remote side, but the key question is this part
<a href='/components/topics/" + value.id + "' class='mini ui black buttons' onclick='somefunction()'>check</a>
I inspect this page and found, sth like
<a href="/components/topics/53cf67fad0c0f7fdda3ef8d5" class="mini ui black buttons" onclick='somefunction()'>check</a>
already exists in the dom.
but
1, the style class="mini ui black buttons" can not be applied.
2, when you try to click the "check" and want to trigger the somefunction(). it doesnt work.
so, why couldn't i get the dom element after appending the rows? OR, is there any other better way to loop rows after fetching the data?
thx
onclick attributes only work in the initial HTML, not in appended elements. See this question.
Instead, add the event handler using .click() or .on('click'):
success:function(res){
$.each(res, function(index, value){
var $row = $("<tr>" +
"<td>" + value.title + "</td>"+
"<td>" + value.author_name + "</td>"+
"<td>" + value.likes + "</td>"+
"<td>" + value.created + "</td>"+
"<td>" +
"<a href='/components/topics/" + value.id + "' class='mini ui black buttons' id='detail_check'>check</a>"+
"</td>"+
"</tr>");
$row.find('.mini.ui.black.buttons').on('click',somefunction);
$('#topics_list_table > tbody:last').
append($row);
});
}
Or, if it's the same function for every such link, just add it using event delegation:
$('#topics_list_table').on('click', '.mini.ui.black.buttons', somefunction);