Using button in table and passing data from a cell in JavaScript - javascript

I'm trying to use javascript to retrieve the data from row.insertCell(0) unfortunately I don't believe I am setting up my this statement correctly so I am getting nothing back. I would appreciate some advice on this.
var cardTable = document.getElementById("cardBody");
card.forEach(item => {
let row = cardTable.insertRow();
let refNum = row.insertCell(0);
refNum.innerHTML = item.G1_Card_Ref;
let select = row.insertCell(1);
var sBtn = document.createElement('input');
sBtn.type = "button";
sBtn.className = "btn";
sBtn.style.color = "blue";
sBtn.setAttribute('onclick', 'editCard('this')');
sBtn.value = "Select";
select.appendChild(sBtn);
This is a temporary function I created to look at the data coming back from the table.
function editCard(CardRefNo) {
document.getElementById("ecForm").style.display = "block";
}

Try setting the onclick listener like this
sBtn.onclick = function() {
// do stuff with sBtn here, this is the new editCard function
console.log(sBtn)
document.getElementById("ecForm").style.display = "block";
}

Related

Cannot dynamically add select element to dynamically created <div>

Ok so I want to do something simple in JavaScript, but I am getting an eror.
I want to dynamically create a div and then add another div plus a select control to it. But see the line I've marked with the error. When I include that line, I get the indicated error. What am I doing wrong? (I've simplified the code in the
myDiv = BuildContainerDiv();
myLabel = BuildLabel();
myDropdown = BuildDropdown();
myDiv.appendChild(myLabel); //Works fine.
myDiv.appendChild(myDropdown); // ERROR: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
BuildContainerDiv: function () {
div = document.createElement('div');
div.id = "MyDiv";
div.name = "MyDiv";
div.style.padding = "10px";
div.style.float = "left";
return div;
},
BuildLabel: function () {
var lab = document.createElement('div');
lab.id = "mylabel";
lab.name = "mylabel";
lab.innerHTML = "Some text:";
return lab;
},
BuildDropdown: function () {
var select = document.createElement('select');
select.id = "myselect";
select.name = "myselect";
var option1 = document.createElement("option");
option1.value = "0";
option1.innerHTML = "(none)";
select.appendChild(option1);
//.....
var option5 = document.createElement("option");
option5.value = "0";
option5.innerHTML = "all";
select.appendChild(option5);
return select;
},
Silly error on my part. In my original post, I noted a function I was using called BuildDropdown. The problem was that I had another function with the same name in another part of the file, and it did not return a Node but plain html:
BuildDropdown: function () {
var ctl= '<select name="MyDropDown" id="MyDropDown">';
//...
return ctl+ '</select >';
},
This function was an earlier attempt and I forgot to delete it, and this older method was somehow being called. Since it was in fact not returning a node, the error was accurate. Apologies for your time wasted.

Delete data from Firebase realtime database and update application in javascript

I want to delete an item from the Firebase real-time database by clicking the button in JavaScript. I get data from the database directly in the frontend. When I click the Delete button, the corresponding object should be removed from the database and the front end. I tried some logic functions and deleted a certain element from the database, but my HTML page did not update.
I have to refresh the page every time. How can I delete it in real-time?
Here is my complete code https://jsfiddle.net/waqasumer/x1ugL5yr/
function deleteTodo(e) {
const key = e.parentElement.parentElement.getAttribute('data-key');
firebase.database().ref('tasks').child(key).remove();
}
var main = document.getElementById("main-section");
function saveData() {
var todo = document.getElementById("todo-item");
if (todo.value === "") {
alert("Please enter task");
} else {
var key = firebase.database().ref('tasks').push().key;
var tasks = {
todo: todo.value,
key: key
}
firebase.database().ref('tasks/' + key).set(tasks);
document.getElementById("todo-item").value = "";
}
}
function getData() {
firebase.database().ref('tasks').on('child_added', function (data) {
var item = data.val().todo;
var key = data.val().key;
console.log(data.val());
var row = document.createElement("div");
row.setAttribute("class", "row");
row.setAttribute("data-key", key);
var col1 = document.createElement("div");
col1.setAttribute("class", "col text");
var task = document.createTextNode(item);
col1.appendChild(task);
row.appendChild(col1);
var col2 = document.createElement("div");
col2.setAttribute("class", "col");
var editBtn = document.createElement("button");
editBtn.setAttribute("class", "btn btn-success btn-circle btn-sm fa fa-pencil-square-o");
editBtn.setAttribute("onclick", "editTodo(this)");
col2.appendChild(editBtn);
row.appendChild(col2);
var col3 = document.createElement("div");
col3.setAttribute("class", "col");
var deleteBtn = document.createElement("button");
deleteBtn.setAttribute("class", "btn btn-primary btn-circle btn-sm btn-danger fa fa-remove");
deleteBtn.setAttribute("onclick", "deleteTodo(this)");
col3.appendChild(deleteBtn);
row.appendChild(col3);
main.appendChild(row);
})
}
getData();
function deleteAll() {
firebase.database().ref('tasks').remove();
main.innerHTML = "";
}
function deleteTodo(e) {
const key = e.parentElement.parentElement.getAttribute('data-key');
firebase.database().ref('tasks').child(key).remove();
}
Yes! As far as I saw, you have to refresh the page to get updated data. This is because you are using 'child_added' in your event listener which gets triggered only when a new child is added.
firebase.database().ref('tasks').on('child_added', function (data){})
You can just refer this and add value listeners to your function such that it retrieves data every time when the child gets changed.
https://firebase.google.com/docs/database/web/read-and-write#listen_for_value_events
EDIT
You can also delete a value using set() or update() method by passing null.
In this case, you can have a callback function. You can use this callback function to update your DOM.

How can I delete something in a tabel with a button in the tabel

I want to create a todo list but I can not find out how to delete something from the table using a button in the table.
this is my try
my html
<table id="output"></table
my JS
//variables
const out = document.getElementById('output');
// test
const tr = out.insertRow();
const cell1 = tr.insertCell(0);
const cell2 = tr.insertCell(1);
cell1.innerHTML = 'test';
cell2.innerHTML = "<button id='btn'>click</button>";
const btn = document.getElementById('btn');
btn.addEventListener('click', onclick);
function onclick(e) {
e.parentElement.parentElement.parentElement.removeChild(
e.parentElement.parentElement
);
}
the programm thinks that the event parameter(e) is undefined
You need this change in your code. -:
function onclick(e) {
e.target
.parentNode.parentNode.parentNode.removeChild(
e.target.parentNode.parentNode
);
}
Hope this helps.

Using javascript Not able to disable textbox.It Immediatly enable after disabled. Can anyone give me solution?

I have One simple registration Form which is developed in C#.Net. This form also contain one Grid view which display data from database.In this,I want to disable Insert button when i select particular raw data. and i had develop this code in jquery. I used below code.
function DoStuff(lnk) {
debugger;
var grid = document.getElementById('GridView1');
var cell, row, rowIndex, cellIndex;
cell = lnk.parentNode;
row = cell.parentNode;
rowIndex = row.rowIndex;
cellIndex = cell.cellIndex;
var rowId = grid.rows[rowIndex].cells[0].textContent;
var rowname = grid.rows[rowIndex].cells[1].textContent;
var rowcontact = grid.rows[rowIndex].cells[2].innerHTML;
var rowaddress = grid.rows[rowIndex].cells[3].innerHTML;
var rowemail = grid.rows[rowIndex].cells[4].innerHTML;
var Id = document.getElementById('txt_Id');
var name = document.getElementById('txt_Name');
var contact = document.getElementById('txt_PhoneNumber');
var address = document.getElementById('txt_Address');
var email = document.getElementById('txt_EmailId');
Id.value = rowId;
name.value = rowname;
contact.value = rowcontact;
address.value = rowaddress;
email.value = rowemail;
document.getElementById('Button1').disabled = true;
};
But when i run that page it becomes disable and immediately enable automatically.....:(
Can anyone give me solution ???
You have to call this function after form is completely loaded.
Use below code to make it that happen if you are using jQuery.
$( document ).ready(function() {
DoStuff(lnk);
});

javascript button works in ie, not firefox or chrome

I'm writing a simple web page that displays a table. It the right column of the table I want to add a button in every row that says 'View'. I wrote a function that does this in ie by creating a button object and setting value = 'view' but in firefox and chrome the button displays with no text. Does anyone know why? Here is my code:
function addRow(id, sender, message){
var theTable = document.getElementById('messageTable');
var lastRow = theTable.rows.length;
var newRow = theTable.insertRow(lastRow);
newRow.id = id;
var cellLeft = newRow.insertCell(0);
var textNode = document.createTextNode(id);
cellLeft.appendChild(textNode);
var secondCell = newRow.insertCell(1);
var textNode2 = document.createTextNode(sender);
secondCell.appendChild(textNode2);
var messageCell = newRow.insertCell(2);
var messageNode = document.createTextNode(message);
messageCell.appendChild(messageNode);
var viewCell = newRow.insertCell(3);
var viewNode = document.createElement('button');
viewNode.value = 'View';
viewNode.onclick = function(){
alert('clicked: ' + id);
};
viewCell.appendChild(viewNode);
}
You have to do viewNode.innerHTML = 'View' since in FF button displays whatever is wrapped by the tag but not the value attribute
<button>s aren't self-closing like <input>s, and don't have a value attribute. You already have the solution in other parts of your code:
viewNode.appendChild(document.createTextNode('View'));
You also don't need to create variables for nodes that you're only using once. You can consolidate your code in a few places by using the above style.

Categories

Resources