We Keep Coding

How do I get text from each span with a specific class tag?

I have a list of email addresses. Each of them is in a span like so: <span class="checked-emails-list">email#example.com</span> I need to get that email address and put it in an array of objects. Each object has 2 fields, the email address and a string. The string is preset and not important here.
I'm using an each loop in my javascript file to retrieve the span text, but I'm doing it incorrectly, as it just places "text" in the email field. What would be the correct way to retrieve the span text value?
var rowObject = {
Email: '',
ConfirmEmail: '',
deleted: 'no'
}
var emailSubs = [];
$('.checked-emails-list span').each(function () {
rowObject.Email = ($(this).text);
rowObject.ConfirmEmail = ($(this).text);
emailSubs.push(rowObject);
});

$(this).text()
in jQuery, 'text' is a method. You are using like a property.

In Plain Javascript I would do something like this
var element = document.getElementsByClassName("checked-emails-list");
var result = [];
element.forEach(function(element){
result.push(element.innerHTML);
});

.text is not function it should be text(). And another problem is that you are using rowObject object on each loop. It makes reference all time until you reinitialized it. you should reinitialize this object inside the loop
var emailSubs = [];
$('.checked-emails-list span').each(function () {
let rowObject={
Email: $(this).text(),
ConfirmEmail:$(this).text(),
deleted: 'no'
}
emailSubs.push(rowObject);
});
console.log(emailSubs);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='checked-emails-list'>
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
</div>

$(document).ready(function(){
var emailSubs = [];
$('.checked-emails-list').each(function () {
var obj = this
emailSubs.push({
Email: $(this).text(),
ConfirmEmail:$(this).text(),
deleted: 'no'
});
});
console.log(emailSubs.length)
})
<span class="checked-emails-list">email111#example.com</span><br/>
<span class="checked-emails-list">email2222#example.com</span><br/>
<span class="checked-emails-list">email3333#example.com</span><br/>

jquery get first text element attribute from selected dropdown

both simple and complicate question:
I have my dropdown item created programmatically from ajax request and that is ok. So i serve name and surname for convenient aestetic way, but i need to send an ajax post with only surname and value is needed for other purposes.
$('#dropDocente').append('<option value="'+value.idDocente+'"">' + value.surname + ' ' + value.name +'</option>');
what i would achieve is:
var testd = $("#dropDocente option:selected").text();
console.log("Surname is : "+testd);
desired output == Surname is : Doe
so, in other hand, i would like get only first element of text in selected dropbox.
I can help me to understand how to reach my goal?

In jQuery, you don't use the .text() method to get the value of a dropdown menu. You need to just have:
var testd = $("#dropDocente").val();
and that will return the selected option's value from the dropdown.

you can add value.surname as a data-surname data tag onto the option and then retrieve that value by selecting the option and using .data('surname'). you can do this for any other value you want to single out as well
$(document).ready(function() {
var values = [
{ surname: "Doe", name: "John", idDocente: "some value here" },
{ surname: "Shmo", name: "John", idDocente: "some value here2" },
{ surname: "Little", name: "John", idDocente: "some value here3" },
];
for (var i = 0; i < values.length; i++) {
var value = values[i];
$('#dropDocente').append('<option value="'+value.idDocente+
'" data-surname="'+ value.surname +'">' + value.surname + ' '
+ value.name +'</option>');
}
// default first
$('.results').text($("#dropDocente option:first").data('surname') + ', ' + $("#dropDocente option:first").val());
// on change, get the surname
$('#dropDocente').on('change', function() {
$('.results').text($("#dropDocente option:selected").data('surname')+ ', ' + $("#dropDocente option:selected").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDocente">
</select>
<br/><br/><br/>
<div class="results">
</div>

You could just split full name on select change.
Something like this:
$('select').on('change', function(){
var id = $(this).val();
var fullName = $('select option:selected').text();
var surname = fullName.split(" ", 1);
});
Full example here: https://jsfiddle.net/1aj06Lw6/1/

Firebase Data Not Saving to Database

I'm having a problem attempting to add data to Firebase. Disregard the vars I don't use as I am trying different things and have commented out stuff I am not using at the moment.
But essentially, what I want to do is save this data to Firebase as follows:
A user enters his name and age in input boxes and then hits submit.
Once he/she hits submit, the function addFB() runs and ideally would create a child called users, and then under that, create a new child with the newly typed in userName (the User's name from the input box), and store his name and age in that child.
However, nothing is going to Firebase from this. Please help. Thanks in advance!
<h2>Add</h2>
<input type=text" id="userName">
<input type="number" id="userAge">
<button id="btUpdateMessage" margin-bottom="20px" onclick="addFB()"> Update</button>
<script>
var lblCurrentMessage = document.getElementById('lblCurrentMessage'),
userName = document.getElementById('userName'),
btUpdateMessage = document.getElementById('btUpdateMessage'),
userAge = document.getElementById('userAge'),
rootRef = new Firebase('https://********.firebaseio.com');
var usersRef = rootRef.child('users');
function addFB() {
usersRef.child(userName).set({
Name: userName,
Age: userAge
});
userName.value = '';
userAge.value = '';
}

*rootRef = new Firebase('https://********.firebaseio.com');*
The above code is not correct. This is the old method.
Just check the below code. This will help you.
function addFB() {
var userName = document.getElementById('userName'),
userAge = document.getElementById('userAge');
firebase.database().ref('users/' + userName).set({
Name: userName,
Age: userAge
});
}

What about this?
var rootRef = Firebase('https://********.firebaseio.com');
var contactsRef = rootRef .child('users');
function addFB() {
contactsRef.child(userName)
.push({
userName: document.getElementById('userName').value,
userAge: document.getElementById('userAge').value
});
Name.value = '';
Age.value = '';
}

setting form input to a value in firebase

Another Questions here,
I am trying to copy an input (or a value) from an input on my form to fire values,here is my code :
<script>
var dataBase = new Firebase ('https://yjyc-signup.firebaseio.com/Entries');
var fName = document.getElementById('name');
var eMail = document.getElementById('email');
var submitBtn = document.getElementById('submit');
//var phoneNumber = document.getElementById('phonenumber');
var nameRef = dataBase.child('Name');
var emailRef = dataBase.child('Email');
//var phonenumberRef = dataBase.child('phone number');
submitBtn.addEventListener('click', function(){
dataBase.push({ 'name': 'hello', 'Email': 'Email', 'Phone number': 'phonenumber' });
//nameRef.set(fName.value);
//emailRef.set(eMail.value);
//phonenumberRef.set(phoneNumber.value);
swal("Thanks Alot!", "Thank you for signing up, a representative will be in touch with you shortly", "success")
});
</script>
as you can see the 'name': is harcoded to hello , but I am looking to link it to the value of the name input at the form.
any suggestions?
Thank you so much for you help.

To set the dynamic value instead of hardcoded one you just need to use variables. Based on your code something like this should do the trick:
dataBase.push({ 'name': document.getElementById('name').value, 'Email': document.getElementById('email').value, 'Phone number': document.getElementById('phonenumber').value });

How do you create an inline edit in backbone view?

so I am trying to get the fields in my backbone model being called in the view, editable and validated by the model. How do I go about doing that? I know there is an html way of doing contenteditable="true" but I am looking for a more backbone oriented way or a way to actually make that validate too.
Here is my current code for my main.js file (but I am not trying to .append it I want it to stay in place and also trying to figure out how to get the field to be called specifically depending on which text they clicked on. Ultimately the button should change too (to save changes).
The main.js
App.Models.User = Backbone.Model.extend({
defaults: {
firstName: 'first',
lastName: 'last',
email: 'Email',
phone: '222',
birthday: 'date'
},
validate: function (attrs) {
if (!attrs.firstName) {
return 'You must enter a real first name.';
}
if (!attrs.lastName) {
return 'You must enter a real last name.';
}
if (attrs.email.length < 5) {
return 'You must enter a real email.';
}
if (attrs.phone.length < 10 && attrs.phone === int) {
return 'You must enter a real phone number, if you did please remove the dash and spaces.';
}
if (attrs.city.length < 2) {
return 'You must enter a real city.';
}
}
});
App.Views.UserUpdate = Backbone.View.extend({
model: App.Models.User,
events: {
'click .edit': 'editUserProfile'
},
editUserProfile: function(field) {
var field =
$('#user').append('<input type="text" class="edit" placeholder="' + field+'" /> ' );
},
initialize: function() {
this.model.on('change', function() {
this.render();
}, this);
},
render: function() {
this.$el.html(this.model.get('email'));
}
});
This is the jade file:
extends layout
block content
div.centerContent
script(type="text/javascript", src="/js/main.js")
h4 User goes here with equal before it no space
div(contenteditable="true")
form#user
- var firstName = "John"
- var lastName = "Smith"
label #{firstName} #{lastName}
- var email = "test#test.com"
label.edit #{email}
- var phone = "555-555-5757"
label #{phone}
- var pin = "PIN: LIO20001"
label #{pin}
- var birthday = "07/28/1982"
label #{birthday}
button Post
hr
div.user User
p
button.edit Edit

I have created a fiddle for this: http://jsfiddle.net/LTGjT/18/
You should assign the contenteditable and id for each editable label:
- var firstName = "John"
- var lastName = "Smith"
label #{firstName} #{lastName}
- var email = "test#test.com"
label(contenteditable="true", id="email") #{email}
- var phone = "555-555-5757"
label(contenteditable="true", id="phone") #{phone}
- var birthday = "07/28/1982"
label(contenteditable="true", id="birthday") #{birthday}
The reason is to recognize what label is being edited by getting the event.target, in your old code the event.target will always be the parent div.
Then in backbone listen to the input event for the change of the label then update the model:
App.Models.User = Backbone.Model.extend({
defaults: {
firstName: 'first',
lastName: 'last',
email: 'abc#abc.com',
phone: '222',
birthday: '01/01/2001'
},
initialize: function() {
},
validate: function (attrs) {
if (!attrs.firstName) {
return 'You must enter a real first name.';
}
if (!attrs.lastName) {
return 'You must enter a real last name.';
}
if (attrs.email.length < 5) {
return 'You must enter a real email.';
}
if (attrs.phone.length < 10 && attrs.phone === int) {
return 'You must enter a real phone number, if you did please remove the dash and spaces.';
}
if (attrs.city.length < 2) {
return 'You must enter a real city.';
}
}
});
App.Views.UserUpdate = Backbone.View.extend({
model: App.Models.User,
events: {
'click button' : 'saveHandler'
},
initialize: function() {
var self = this;
self.render();
console.log(this.model);
$('[contenteditable=true]').on('input', function(e){
var field = e.target.id;
var value = e.target.innerText;
self.model.set(field, value);
logUser(self.model);
});
self.model.on('change', function(){
$('button').show();
});
},
saveHandler: function(e) {
//Validate & Save logic
//this.model.save()
e.preventDefault();
$(e.target).hide();
},
render: function() {
var template = _.template($('#user-view').html());
this.$el.html(template({user: this.model.toJSON()}));
$('body').prepend(this.$el);
logUser(this.model);
}
});