var songsRef = firebase.database().ref('/KTV-Bar/' + loggeduser + '/Reservations/');
songsRef.on('child_added', function (snapshot) {
mRetrieveSongs = snapshot.val();
$("#dataTables").append(
"<tr data-id='" + snapshot.key + "'>"
+ "<td>" + mRetrieveSongs.playlistkey + "</td>"
+ "<td>" + mRetrieveSongs.username + "</td>"
+ "<td>" + mRetrieveSongs.numberofhours + "</td>"
+ "<td>" + mRetrieveSongs.dates + "</td>"
+ "<td>" + snapshot.key + "</td>"
// +"<td id=room>"+"</td>"
+ "<td id=room>" + '<select id="selectRoom"></select>' + "</td>"
+ "<td>" + mRetrieveSongs.capacity + "</td>"
+ "<td>" + '<input type="button" value="Accept" id = "accept" onclick="writeUserData(this)" ">'
+ ' <input type="button" value="Decline" id = "decline" onclick="myFunctionDecline(this)" ">'
+ "<td>" + '<th> </th>">'
+ "</td>"
+ "</tr>"
)
});
var roomRef = firebase.database().ref('/KTV-Bar/' + loggeduser + '/Room');
roomRef.on('child_added', function (snapshot) {
mRetrieveRooms = snapshot.val();
rooms = mRetrieveRooms.room;
var select = document.getElementById("selectRoom");
for (var i = 0; i < rooms.length; i++) {
var opt = rooms[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
});
I want to have the same data of my dropdowns in each row of the table. I populated my dropdowns from my firebase data, but it only populated the first row dropdown of the table.
How can I solve this?
Assuming that you are appending options dynamically. You can take advantage of my code to generate desire output.
var options = ["Make", "America", "Great", "Again"];
var firstDropdown = document.getElementById('first');
var secondDropdown = document.getElementById('second');
appendOptions(firstDropdown, options);
appendOptions(secondDropdown, options);
function appendOptions(elem, options) {
options.forEach(function(value) {
var option = document.createElement("option");
option.text = value;
elem.appendChild(option);
});
}
<select id="first">
</select>
<select id="second">
</select>
Related
I get data from the user and put it into the table by collating, I want to show a random line from the table I want to delete the other rows
function bilgi(){
var random = Math.floor(Math.random() * (allobjs.length - 1) ) + 1;
if (allobjs[random].id != 'blank'){
allobjs[random].animate({fill: 'rgb(19, 167, 236)'}, 1000);
$(function() {
$.getJSON('/static/yer.json', function(data) {
var deger = $("input[name=deger]").val()
var al = deger.split(",")
$.each(data, function(i, f) {
if(f.plaka == random){
var tblRow = "<tr>" +
"<td>" + "<img class='aaa'src='/static/bayrak.jpg' alt='' />" + "</td>" +
"<td>" + deger + "</td>" +
"<td>" + f.yerler + "</td>" +
"<td>" + f.bolge + "</td>" +
"<td>" + f.ili + "</td>" +
"<td>" + f.teskilati + "</td>" +
"<td>" + f.acm + "</td>" +
"</tr>"
$("tbody").append(tblRow);
}
});
$("tbody tr").hide()
var toplam= $("tbody tr").size()
ratgel=Math.floor(Math.random() * toplam);
$("tbody tr").eq(ratgel).show(1000)
});
});
}}
In javascript add class NOSHOW to each tr you want to hide Then using css .NOSHOW{display:none;} If you want a complete solution show your html.
something like the following might work:
At the start of your function add the following:
var tr = getElementsByTagName('tr');
for(var i = 0; i < tr.length;i++){
tr[i].className += "noshow";
}
then in you html add:
<style>
.noshow{
display:none;
}
</style>
This should work as you then append the row you want to the end of the table.
Later, when you want to display the entire table again you can use:
element.classList.remove("noshow");
I have created one form and form after submitting the value I want to show them in a table. In table I have one section where I want to delete or edit a particular user on a button. But when I am passing the id to that function I am getting error saying that refernece error occurred!
function getEmployeeDetails() {
for (var i = 0; i < userArray.length; i++) {
var tr = "<tr>";
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 +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].hindi +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].othersLang +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].description +
"</td>" +
"<td class='table-data'/td>" +
"<button onclick='deleteUser( userArray[i].id )'>Delete</button> || <button onclick='editUser( userArray[i].id )'>Edit</button>" +
"</td>" +
"</tr>";
tbody.innerHTML += tr;
}
}
function deleteUser(id) {
console.log("delteuser", typeof id, id);
}
function editUser(id) {
console.log("edit", id);
}
Where I have made the mistakes?
The problem is in the string concatenation you are using in the onClick event.
You can use a backtick character instead.
Copy-paste and check the below code.
<html>
<body>
<table id="table"></table>
<script>
getEmployeeDetails();
function getEmployeeDetails() {
let userArray = [{ id: 1 }, { id: 2 }];
var tr = "";
for (var i = 0; i < userArray.length; i++) {
tr +=
`<td class="table-data">
<button onclick="deleteUser(` +
userArray[i].id +
`)">Delete</button> || <button onclick="editUser( ` +
userArray[i].id +
`)">Edit</button>
</td>`;
}
document.getElementById("table").innerHTML = tr;
}
function deleteUser(id) {
console.log("delteuser", typeof id, id);
}
function editUser(id) {
console.log("edit", id);
}
</script>
</body>
</html>
Change
<button onclick='deleteUser( userArray[i].id )'>
To something like
<button onclick='deleteUser('+userArray[i].id+')'>
In your current attempt you are not inserting the value of userArray[i].id but the variable userArray[i].id which is kind of nonsense.
Same story with the editUser function
I want to get the value of the input fill from a function to another function but I am not sure how.
From this funtion input fill:
$("#buttonDone4").click(function () {
function productAddToTable() {
$("#table").fadeIn();
// First check if a <tbody> tag exists, add one if not
if ($("#table tbody").length == 0) {
$("#table").after("<tbody></tbody>");
}
// Append product to the table
$("#table").append(
"<tr>" +
"<td>" + document.getElementById("perimeter2").innerHTML + "</td>" +
"<td>" + "4" + "</td>" +
"<td>" + "<input type='text' name='periAns' size='10'/>" + "</td>" +
"</tr>"
);
}
productAddToTable();
$("#buttonDone4").fadeOut();
$(".p1").fadeIn();
$("#buttonCheck").fadeIn();
});
To this function:
$("#buttonCheck").click(function () {
var pa = document.getElementByName["periAns"].value;
var peri = (document.getElementById("perimeter2").innerHTML / 4);
if(peri == pa ){
console.log("yes");
}else{
console.log("no");
}
});
Put ID to the inputs and use jquery.
$("#table").append(
"<tr>" +
"<td>" + document.getElementById("perimeter2").innerHTML + "</td>" +
"<td>" + "4" + "</td>" +
"<td>" + "<input type='text' id ='periAns' size='10'/>" + "</td>" +
"</tr>"
);
}
$("#buttonCheck").click(function () {
var pa = Number($("#periAns").val()) //assuming this is an input
var peri = Number(document.getElementById("perimeter2").innerHTML)
var finPeri = peri / 4
if(finPeri == pa ){
console.log("yes");
}else{
console.log("no");
}
});
having a hard time on addEventlistner. it gives me uncaught reference error when page is loaded
window.onload= initializer;
var refUsers;
var tableBody;
INITIALIZER
function initializer(){
refUsers=firebase.database().ref().child("users");
tableBody = document.getElementById("table_body");
loadTables();
}
LOADS TABLE
function loadTables(){
refUsers.on("value", function(snap){
var data = snap.val();
var file11 = "";
for(var key in data){
file11 += "<tr>" +
"<td>" + data[key].firstname + "</td>" +
"<td>" + data[key].lastname + "</td>" +
"<td>" + data[key].birthdate + "</td>" +
"<td>" + data[key].email + "</td>" +
"<td>" + data[key].date + "</td>" +
"<td>" + data[key].time + "</td>" +
'<td>' +
'<button class="btn btn-sm btnColorAccept center-block okButton" dataOk-confirmation="' + key + '">' +
'<span class="glyphicon glyphicon-ok"></span>' +
'ACCEPT</button>' +
'</td>' +
'<td>' +
'<button class="btn btn-sm btnColorDecline center-block removeButton" dataRemove-confirmation="' + key + '">' +
'<span class="glyphicon glyphicon-remove"></span>' +
'DECLINE</button>' +
'</td>' +
"</tr>;";
}
tableBody.innerHTML = file11;
if(file11 != ""){
var elementForOkButton = document.getElementsByClassName("okButton");
for( var i=0; i< elementForOkButton.length; i++){
elementForOkButton[i].addEventListener("click", okButtonElementFirebase, false);
}
}
});
} //end table function
GOT ERROR ON THIS LINE
elementForOkButton[i].addEventListener("click", okButtonElementFirebase, false);
FOR BUTTON WHEN CLICKED
function okButtonELementFirebase(){
var keyOkButton = this.getAttribute("dataOk-confirmation");
var firebaseRefUsers = refUsers.child(keyOkButton);
firebaseRefUsers.remove();
}
function okButtonELementFirebase(){
You have a typo - okButtonELementFirebase should be okButtonElementFirebase.
I amd dynamically generating my edit table from javaScript. But function mentioned via it are not recognaizeable from AngularJS, for that, I am not able to remove and edit my rows.
Here HvacStandards() and checkemail() and showInvite() are only working. for other's i am getting following exception in chorom console:
Errors:
Uncaught ReferenceError: editRow is not defined
Uncaught ReferenceError: deleteRow is not defined
AngularJs code
$scope.HvacStandards = function () {
var rowID = $scope.newRow;
if ($scope.currentRow > 0) {
saveEdits();
} else {
var teamName = $("#teamName").val();
var email = $("#email").val();
var sHtml = "<tr id='row"+rowID+"'>"
+ "<td id=\"tno" + rowID + "\">" + rowID
+ "</td>"
+ "<td id=\"tName" + rowID + "\">" + teamName
+ "</td>" + "<td id=\"mail" + rowID + "\">" + email
+ "</td>" + "<td><button onclick='editRow(" + rowID
+ ")'>Edit</button> " + "<button onclick='deleteRow("
+ rowID + ")'>Delete</button>" + "</tr>";
$("#inviteTable").append(sHtml);
$scope.newRow++;
$("#teamName,#email").val("");
$scope.emails[$scope.number]=$scope.formData.email;
}
};
$scope.editRow = function(rowID) {
$('#teamName').val($('#tName' + rowID).html());
$('#email').val($('#mail' + rowID).html());
$scope.currentRow = rowID;
};
$scope.saveEdits = function (){
$('#teamName' + currentRow).html($('#tName').val());
$('#email' + currentRow).html($('#mail').val());
$("#teamName,#email").val("");
$scope.currentRow = -1;
};
$scope.deleteRow = function (rowID) {
$('#row' + rowID).remove();
};
$scope.showInvite = function(){
$scope.show = true;
$scope.formData = {};
};
and my html is like following:
<div name="showInviteDiv" id="showInviteDiv">
<a ng-click="showInvite()" ng-show="!show">Invite a Team</a>
</div>
<div class="invite-form" name="inviteTeamDiv" id="inviteTeamDiv" ng-show="show">
<form ng-submit="HvacStandards()" novalidate class="css-form"
name='inviteTeamsForm'>
<div>
<input type="text" name="teamName" ng-model="formData.teamName" id="teamName"
placeholder="Team Name" style="width: 38%;" required="required"
ng-minlength="6" ng-maxlength="30">
<input
type="text" name="email" ng-model="formData.email" id="email"
placeholder="Email" style="width: 38%;" required="required"
ng-pattern="/^[a-z]+[a-z0-9._]+#[a-z]+\.[a-z.]{2,5}$/" ng-change="checkEmail(form Data.email)" ng-blur="checkEmail(formData.email)">
</div>
<div>
<input type="submit" value="Invite Team"
ng-disabled="inviteTeamsForm.$invalid || isEmailExists"> or <a ng-click="hideInvite()">I'm done sending invites</a>
</div>
In the Table that you are creating, you used onclick instead of ng-click. You need to use ng-click in order to use scope function.
So your HvacStandards function will look like this:
$scope.HvacStandards = function () {
var rowID = $scope.newRow;
if ($scope.currentRow > 0) {
saveEdits();
} else {
var teamName = $("#teamName").val();
var email = $("#email").val();
var sHtml = "<tr id='row"+rowID+"'>"
+ "<td id=\"tno" + rowID + "\">" + rowID
+ "</td>"
+ "<td id=\"tName" + rowID + "\">" + teamName
+ "</td>" + "<td id=\"mail" + rowID + "\">" + email
+ "</td>" + "<td><button ng-click='editRow(" + rowID
+ ")'>Edit</button> " + "<button ng-click='deleteRow("
+ rowID + ")'>Delete</button>" + "</tr>";
$("#inviteTable").append(sHtml);
$scope.newRow++;
$("#teamName,#email").val("");
$scope.emails[$scope.number]=$scope.formData.email;
}
};
$scope.HvacStandards = function () {
var rowID = $scope.newRow;
if ($scope.currentRow > 0) {
saveEdits();
} else {
var teamName = $("#teamName").val();
var email = $("#email").val();
var sHtml = "<tr id='row"+rowID+"'>"
+ "<td id=\"tno" + rowID + "\">" + rowID
+ "</td>"
+ "<td id=\"tName" + rowID + "\">" + teamName
+ "</td>" + "<td id=\"mail" + rowID + "\">" + email
+ "</td>" + "<td><button ng-click='editRow(" + rowID
+ ")'>Edit</button> " + "<button ng-click='deleteRow("
+ rowID + ")'>Delete</button>" + "</tr>";
//$("#inviteTable").append(sHtml); // don't do this
// use compile in following manner
$("#inviteTable").append(
$compile(sHtml)($scope)
);
$scope.newRow++;
$("#teamName,#email").val("");
$scope.emails[$scope.number]=$scope.formData.email;
}
};
try this
$scope.HvacStandards = function () {
var rowID = $scope.newRow;
if ($scope.currentRow > 0) {
saveEdits();
} else {
var teamName = $("#teamName").val();
var email = $("#email").val();
var sHtml = "<tr id='row"+rowID+"'>"
+ "<td id=\"tno" + rowID + "\">" + rowID
+ "</td>"
+ "<td id=\"tName" + rowID + "\">" + teamName
+ "</td>" + "<td id=\"mail" + rowID + "\">" + email
+ "</td>" + "<td><button ng-click='editRow(" + rowID
+ ")'>Edit</button> " + "<button ng-click='deleteRow("
+ rowID + ")'>Delete</button>" + "</tr>";
// $compile(sHtml)($scope) aissign to variable:
let shown = $compile(sHtml)($scope);
$("#inviteTable").append(
shown;
);
$scope.newRow++;
$("#teamName,#email").val("");
$scope.emails[$scope.number]=$scope.formData.email;
}
};