We Keep Coding

How can i get current Index using for each loop in javascript and update into realtime database

I am working with javascript also am a newbie in js so actually, I want to get the current index and then update a specific field to the realtime if somebody helps me out I will thankful to him here is my script where I fetch the data in realtime firebase and I put my value inside inner HTML format so I want when user press specific buttons its pending data update to booked.
userDataRef.once("value").then(function(snapshot) {
snapshot.forEach(function(childSnapshot, index) {
console.log(childSnapshot.val());
key = childSnapshot.key;
userid = childSnapshot.val().userid;
var carid = childSnapshot.val().carid;
var imageload = childSnapshot.val().imgurl;
var loadfirstname = childSnapshot.val().userfirstname;
var loadcarname = childSnapshot.val().carname;
var loadlastname = childSnapshot.val().userlastname;
var loadphonenumber = childSnapshot.val().phoneNumber;
var loaddropoffadd = childSnapshot.val().dropoffaddress;
var loadpickupadd = childSnapshot.val().pickupaddress;
loadprice = childSnapshot.val().price;
var appenddata =
'<div class="container rounded" style="background-color: #00829E" id="datalist">' +
'<div class="row">' +
'<div class="col-md-12">' +
'<div class="row">' +
'<div class="col-md-4 mt-2 mb-2 ml-2">' +
'<div class="container rounded"style="background-color: #efefef">' +
'<center>' +
'<img src="' + imageload + '" id="loadimage" style="height: 100px; width: 100px;">' +
'</center>' +
'</div>' +
'</div>' +
'<div class="col-md-6 mt-2 mb-2">' +
'<div class="container rounded para">' +
'<h5 id="loadcarname">' + loadcarname + '</h5>' +
'<p id="loadfirstname">First Name: ' + loadfirstname + '</p>' +
'<p id="loadlastname">Last Name: ' + loadlastname + '</p>' +
'<p id="loadphone">Phone Number: ' + loadphonenumber + '</p>' +
'<p id="loadpickup">Pickup Address: ' + loadpickupadd + '</p>' +
'<p id="loaddropoff">Dropoff Address: ' + loaddropoffadd + '</p>' +
'</div>' +
'</div>' +
'<div class="col-md-2"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-md-4"></div>' +
'<div class="col-md-4"></div>' +
'<div class="col-md-2 para1 mt-2">' +
'<p id="loadprice">Price:' + loadprice + ' Sum/Day</p>' +
'</div>' +
'<div class="col-md-2 mb-3">' +
'<button class="btn btn-info btn-sm rounded-pill check" id="approvebutton" value ="Booked" onclick="myFunction(this.value)" aria-pressed="true">Approve</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$("#listshow").append(appenddata);
});
});
when user press the button I call function named Myfunction I just want to update specific id in that function
my function name script
function myFunction(value) {
approvecar = document.getElementById('loadprice').value;
firebase.database.ref("carBooking/" + userid).update({
status: ""
});
}

To be able to write a value in the database, you need to know the complete path to that node. Right now, you know what value to write, but you've lost information about what key (the -M.... value) to write it to.
So you'll need to pass the key of the item the user clicked on, from your HTML into the myFunction function.
The simplest way to do that is something like:
'<button class="btn btn-info btn-sm rounded-pill check" id="approvebutton" value ="Booked"
onclick="myFunction(\''+key+'\', this.value)" // 👈 is changed
aria-pressed="true">Approve</button>' +
There may be some syntax problems in this part as I'm having a hard time parsing your HTML construction code.
Now that you're passing both the key and the value, you can update the correct node with:
function myFunction(key, value) {
approvecar = document.getElementById('loadprice').value;
firebase.database.ref("carBooking").child(key).update({
status: ""
});
}

I want The input value is not cleared when I popup a second time

I want to add html code using append, but when adding a second time, the text in the input does not follow the new line :
HTML :
'<form>' +
'<input type="text" id="newFoldr" name="fname" placeholder=".ex nameFanpage" value="">' +
'<input type="button" class="cancelButton" id="cancelButton" value="Cancel" data-dismiss="modal" aria-label="Close">' +
'<input type="button" class="submitButton" id="submitButton" value="Create" style="width:142px;margin-left: 5px;">' +
'</form>' +
Javascript :
$('.submitButton').click(function () {
var addFolder = '<div class="_5bm7 _2mk4" role="presentation" style="height: 50px;border:none;"><div class="_5bmf"></div>' +
'<div class="_1577">' +
'<div class="ellipsis">' +
'<div class="_1i5z"><div class="_1i5-">' +
'</div>' +
'</div>' +
'<span id="namaFolder"></span>' +
'</div>' +
'</div>' +
'</div>';
if( document.getElementById("newFoldr").value === '' ){
swal("Whoops!", "You need to write something!", "info");
} else {
$('.columnFolder').append(addFolder);
var inputan = document.getElementById("newFoldr").value;
document.getElementById("namaFolder").innerHTML= inputan;
swal("Success!", "Your folder has been created!", "success");
}
});
Screenshot : http://prntscr.com/h1pz43

if you are not able to clear the input value just add below code in else block
document.getElementById("newFoldr").value = "";
Complete javascript code is as below
$('.submitButton').click(function () {
var addFolder = '<div class="_5bm7 _2mk4" role="presentation" style="height: 50px;border:none;"><div class="_5bmf"></div>' +
'<div class="_1577">' +
'<div class="ellipsis">' +
'<div class="_1i5z"><div class="_1i5-">' +
'</div>' +
'</div>' +
'<span></span>' +
'</div>' +
'</div>' +
'</div>';
if( document.getElementById("newFoldr").value === '' ){
swal("Whoops!", "You need to write something!", "info");
} else {
$('.columnFolder').append(addFolder);
var inputan = document.getElementById("newFoldr").value;
$('.columnFolder div._5bm7._2mk4:last').find('span').text(inputan);
document.getElementById("newFoldr").value = "";
swal("Success!", "Your folder has been created!", "success");
}
});

How to select single element value which created dynamically in html using jQuery / Javascript?

I have a scenario like this:
for (var k in active) {
notifications.append(
'<a href="javascript:toast();">' +
'<div>' +
'<input class="phone_number" type="hidden" id='+active[k].phone_number+' value='+active[k].phone_number+'>'+
'</input>'+
'<span class="notify bg-blue">' + '<i class="fa fa-clock-o"></i>' + '</span>' +
'<span>' +
'<span>Sim ' + active[k].phone_number + ' Expires in ' + active[k].expiry_count + 'days</span>' +
'<br/>' +
'<span class="time">Just Now</span>' +
'</span>' +
'</div>' +
'</input>'+
'</a>');
}
i created dynamic elements using jade template engine.
here i need to identify each <a> click and i nedd to get the value of hidden field.
function toast() {
var grade;
//var phone_number=document.getElementById('phone_number').value;
$.each($('.phone_number'), function () {
grade = $(this).val();
alert(grade);
});
}
by doing this i got a loop of value. which i didn't want. i need single item value. how to solve this ?

pass this to the toast
'<a href="javascript:toast(this);">' +
and change the toast method to
function toast( thisObj )
{
var grade = $( thisObj ).parent().find( '.phone_number[type="hidden"]' ).attr( "value" );
alert( grade );
}

notifications = $(".notifications")
active = [{ phone_number: "982334",expiry_count: "1"},
{ phone_number: "982334",expiry_count: "1"}]
var k;
for (var k in active) {
notifications.append(
'<a href="javascript:toast();">' +
'<div>' +
'<input class="phone_number" type="hidden" id='+active[k].phone_number+' value='+active[k].phone_number+'>'+
'</input>'+
'<span class="notify bg-blue">' + '<i class="fa fa-clock-o"></i>' + '</span>' +
'<span>' +
'<span>Sim ' + active[k].phone_number + ' Expires in ' + active[k].expiry_count + 'days</span>' +
'<br/>' +
'<span class="time">Just Now</span>' +
'</span>' +
'</div>' +
'</input>'+
'</a>');
}
$(document).on('click', 'a', function(){
alert($(this).find('.phone_number').val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notifications"></div>
Its simple.Try this
$(document).on('click', 'a', function(){
alert($(this).find('.phone_number').val())
})

Send the toast function the k you are iterating over
'<a href="javascript:toast(' + k + ');">'
then use k in your function
function toast(k) {
//use k (maybe select by id)
}

How set default value for dropdown list after it is dynamic download

I try to set default value for dropdown list after it is dynamic download and I do this in the following way:
function editUser() {
// массив для взятий информации о пользователе из таблицы
var userInfo = [];
// $("table").find("tr").each(function () {
//
// if($(this).is(":visible")){
// alert("success");
// console.log("SUCCESS")
// }
// })
var count = 0;
// здесь надо передать одно значение, то есть один ряд с инфой о пользователе иначе кинуть alert
$("table").find("tr").each(function () {
if ($(this).find("input").is(":checked")) {
count++;
}
});
if (count <= 1) {
$("table").find("tr").each(function () {
if ($(this).find("input").is(":checked")) {
$(this).find("td").each(function () {
userInfo.push(this.innerHTML);
})
return false;
}
count = 0;
});
}
else {
alert("Выбрано больше одного значения");
if ($("#tableForUser").length != 0) {
getUsers();
count = 0;
return;
}
if ($("#tableForOwners").length != 0) {
getOwners();
count = 0;
return;
}
if ($("#tableForDrivers").length != 0) {
getDrivers();
count = 0;
return;
}
}
console.log(userInfo);
// alert("SUCCESS");
console.log(listCities);
$("#head").children().remove();
var trHTML = '';
trHTML += '<form id="changeForm" class="form-horizontal" role="form">' +
'<input id="inputID" class="form-control" type="text" style="visibility:hidden">' +
'<div class="form-group">' +
'<label class="col-lg-3 control-label">Ник:</label>' +
'<div class="col-lg-8">' +
'<input id="inputNick" class="form-control" type="text">' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<label class="col-lg-3 control-label">Имя:</label>' +
'<div class="col-lg-8">' +
'<input id="inputFirstname" class="form-control" type="text">' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<label class="col-lg-3 control-label">Фамилия:</label>' +
'<div class="col-lg-8">' +
'<input id="inputLastname" class="form-control" type="text" >' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<label class="col-lg-3 control-label">Мобильный телефон:</label>' +
'<div class="col-lg-8">' +
'<input id="inputMobile"class="form-control" type="text">' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<label class="col-lg-3 control-label">Электронная почта:</label>' +
'<div class="col-lg-8">' +
'<input id="inputEmail" class="form-control" type="text">' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<label class="col-lg-3 control-label">Город:</label>' +
'<div class="col-lg-8">' +
'<div class="ui-select">' +
'<select id="cities" class="form-control">' +
'</select>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<label class="col-md-3 control-label">Пароль:</label>' +
'<div class="col-md-8">' +
'<input id="inputPassword1" class="form-control" type="password">' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<label class="col-md-3 control-label">Подтвердите пароль:</label>' +
'<div class="col-md-8">' +
'<input id="inputPassword2" class="form-control" type="password">' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<label class="col-md-3 control-label"></label>' +
'<div class="col-md-8">' +
// '<input type="button" class="btn btn-primary" onclick="saveChanges();" value="Save Changes">'
'<button type="button" class="btn btn-primary" onclick="saveChanges();">Сохранить</button><br>' +
'<span></span>' +
'<button type="button" class="btn btn-default" onclick="">Отменить</button><br>' +
'</div>' +
'</div>' +
'</form>';
$("#head").append(trHTML);
if (userInfo[1] == null) {
alert("Выберите пользователя для редактирования");
$("#head").children().remove();
}
else {
//Записываем индекс
// massChanges.push(userInfo[0]);
// console.log(massChanges);
$(getCities().done(function () {
document.getElementById("inputID").value = userInfo[0];
document.getElementById("inputNick").value = userInfo[1];
document.getElementById("inputFirstname").value = userInfo[2];
document.getElementById("inputLastname").value = userInfo[3];
document.getElementById("inputMobile").value = userInfo[4];
document.getElementById("inputEmail").value = userInfo[5];
$("#cities").val(userInfo[6]);
// $('cities option:contains(userInfo[6])').prop('selected',true);
document.getElementById("inputPassword1").value = userInfo[7];
document.getElementById("inputPassword2").value = userInfo[7];
userInfo = [];
}))
}
}
where function getCities() declare as:
var listCities = [];
var city;
function getCities() {
$.ajax({
type: "GET",
url: "/admin/getCities",
datatype: "json",
success: function (response) {
$.each(response, function (i, item) {
listCities.push(item);
});
$.each(listCities, function (i, item) {
city += '<option>' + item + '</option>';
})
$("#cities").append(city);
},
error: function () {
alert("error")
}
})
}
But every times I get following error:
Cannot read property 'done' of undefined at editUser. There are any idea how i can solve this problem?

But every times I get following error: Cannot read property 'done' of
undefined at editUser. There are any idea how i can solve this
problem?
You are passing function call of getCities() to jQuery(), which does not have a .done() method. Remove jQuery() wrapper around getCities() call
getCities().done(function(){/* do stuff */})
Also, return $.ajax() call from getCities function
function getCities() {
return $.ajax(/* settings */)
}

Stop button action after press it

I have a JS function that loads the comments of a certain answer. The idea is to call an API function and to return the comments.
The problem is that everytime I press the button it loads the comments, the same exact comments.
I want something that after you press comment, you cannot load more comments. I though stopPropagation would do the trick but nothing happened.
Is it possible to when I press the Comment button after I call it, it closes my #showarea
<div class="post-button clearfix">
<div class="post-button clearfix">
<button class="btn icon-chat show-textarea" title="Add a comment on this answer" type="button" data-answer="{$answer['publicationid']}">Comment</button>
<div class="textarea">
{include file="comment_form.tpl"}
</div>
</div>
</div>
comment_form.tpl
$('.comment-form').hide();
var commentsFetched = false;
$("body").on("click", ".show-textarea", function(){
if (commentsFetched) { // check the flag
return;
}
$.getJSON("/controller/api/comments/comment.php", {
answerid : answerid
}, function (data) {
commentsFetched = true;
$.each(data, function(i, comment) {
console.log(comment);
$('.comment-form').append('<article class="tweet-data">' +
'<div class="comment-items">' +
'<div class="qa-c-list-item hentry comment" id="c3574">' +
'<div class="asker-avatar">' +
'<a>' +
'<img width="40" height="40" src="' +
comment.user_photo +
'"></a>' +
'</div>' +
'<div class="qa-c-wrap">' +
'<div class="post-button">' +
'<button name="" onclick="" class="btn icon-flag" title="Flag this comment as spam or inappropriate" type="submit">flag</button>' +
'<button name="" class="btn icon-answers" title="Reply to this comment" type="submit">reply</button>' +
'</div>' +
'<span class="qa-c-item-meta">' +
'commented' +
' 1 day' +
' ago' +
' by ' +
'<a style="display: inline" href="" class="qa-user-link url nickname">' +
comment.username +
'</a> ' +
'<span class="qa-c-item-who-points"> ' +
'<span class="qa-c-item-who-points-pad">(</span><span class="qa-c-item-who-points-data">140</span><span class="qa-c-item-who-points-pad"> points)</span> ' +
'</span> ' +
'</span> ' +
'</span> ' +
'<div class="qa-c-item-content" style="color: #2d2727; font-size: 13px"> ' +
'<a name="3574"></a><div class="entry-content">' +
comment.body +
'</div> ' +
'</div> ' +
'</div> <!-- END qa-c-item --> ' +
'</div> ' +
'</div>');
});
});
$('.comment-form').show();
});
$("body").on("click", ".textarea-ok, .textarea-cancel", function(){
commentsFetched = false;
$('.comment-form').hide();
});

set a flag to know if you already fetched the comments.
var commentsFetched = false;
$("#showarea").click(function() {
if (commentsFetched) { // check the flag
return;
}
$.getJSON("/controller/api/comments/comment.php", {
answerid : answerid
}, function (data) {
commentsFetched = true; // set the flag
$.each(data, function(i, comment) {
...
You should probably disable the button to give your users a visual indication no more comments can be loaded