I am binding a users profile data to a variable like this:
// Profile Management
var user = firebase.child('users').child(userID);
$firebaseObject(user).$bindTo($scope, 'user');
Here is the HTML:
<div ng-show="firebaseUser">
<h1>Your Profile</h1>
<div class="contentContainer">
<div class="profilePicture">
<img src="images/noProfile.png">
</div>
<div class="personalInfo">
<input type="text" ng-model="user.Name" ng-change="user.$save()" type="text"
label="Name" placeholder="Your Name.." name="userName">
<input type="text" ng-model="user.Phone" ng-change="user.$save()" type="text"
label="Phone" placeholder="Your Phone #.." name="userPhone">
<label>Email</label>
{{firebaseUser.password.email}}
</div>
</div>
</div>
It's working, when I type into the profile, it automatically updates the Firebase database, however there is severe lag, it's extremely noticeable if you type to fast a lot of words get skipped, this happens so much that it's un-usable.
What am I doing wrong?
User this. ng-model-options="{debounce: {'default': 500} } the scope cycle gonna be triggered will delay by 500ms. You can also adjust it to fit with the usage of the app. Cheer!
<input type="text" ng-model="user.Name" ng-change="user.$save()" type="text"
ng-model-options="{debounce: {'default': 500} }"
label="Name" placeholder="Your Name.." name="userName">
<input type="text" ng-model="user.Phone" ng-change="user.$save()" type="text"
ng-model-options="{debounce: {'default': 500} }"
label="Phone" placeholder="Your Phone #.." name="userPhone">
Related
Using vue, is there any way to clear the input value individually?
Because a lot of input will be used, writing in this way will have a lot of functions.
But you can’t use loops, because there are actually different fields
<input v-model="name" type="text" placeholder="name">
<span #click="clearName()" v-if="this.name.length > 0">x</span>
<input v-model="email" type="text" placeholder="email">
<span #click="clearEmail()" v-if="this.email.length > 0">x</span>
<input v-model="address" type="text" placeholder="address">
<span #click="clearAddress()" v-if="this.address.length > 0">x</span>
method:{
clearName(){
this.name=''
}
clearEmail(){
this.email=''
}
clearAddress(){
this.address=''
}
}
You can use a common method name that accepts an argument. For example:
// JS
clearField(fieldName) {
this[fieldName] = '';
}
// HTML
<input v-model="name" type="text" placeholder="name">
<span #click="clearField('name')" v-if="this.name.length > 0">x</span>
<input v-model="email" type="text" placeholder="email">
<span #click="clearField('email')" v-if="this.email.length > 0">x</span>
<input v-model="address" type="text" placeholder="address">
<span #click="clearField('address')" v-if="this.address.length > 0">x</span>
Make one function and pass the property name as parameter then access it using [] :
clear(property){
this[property]=''
}
or just do an inline instruction :
<input v-model="name" type="text" placeholder="name">
<span #click="name=''" v-if="this.name.length > 0">x</span>
I'm writing out a test script where I'm wanting to select an existing p tag in a form and update the copy being used. I don't have access to the original code and having to use JavaScript only to make updates until it's approved by the client's tech lead and test results.
My original code is:
var p = document.querySelector(".form-bg form p").innerHTML;
p.innerHTML = 'By hitting Get Your Quote, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company.';
However, the p tag's content isn't being updated and hitting barriers stating the code is undefined or isn't a function.
So, I attempted using .appendChild() with a thought process of creating a new element and hiding the existing if I can't update the existing copy.
My updated code using .appendChild() is:
let updatedCopy = document.createElement('p');
updatedCopy.id = 'testCopy';
updatedCopy.innerHTML = 'By hitting Get Your Quote, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company';
document.getElementsByClassName('form-bg').appendChild(updatedCopy);
I've tried running this within the browser, but haven't been successful yet. Any guidance would be greatly appreciated! :)
Lastly, here's the HTML snippet with the form that's needing to be modified:
<div id="lightbox_shell">
<div class="test-w_contact-lightbox-individuals">
<div class="form-main-bg">
<div class="close-bg">
<button class="close" type="button">close</button>
</div>
<!-- Form Starts Here -->
<div class="form-bg">
<div class="legend">
Provide your information so an agent can reach you.
</div>
<form method="post">
<input name="offering" type="hidden" value="Individual"> <input name="language" type="hidden" value="English">
<div class="contact-fields">
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text firstname" data-manual="1"><input class="required" id="firstname" maxlength="150" name="firstname" placeholder="First Name *" title="First Name" type="text"></span>
</div>
<div class="flex_2col">
<span class="input-text lastname" data-manual="1"><input class="required" id="lastname" maxlength="150" name="lastname" placeholder="Last Name *" title="Last Name" type="text"></span>
</div>
<div class="clearfloat"></div>
</div>
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text phone" data-manual="1"><input class="required" id="phone" maxlength="12" name="phone" placeholder="Phone Number *" title="Phone Number" type="tel"></span>
</div>
<div class="flex_2col">
<span class="input-text zipcode" data-manual="1"><input class="required" id="zipcode" maxlength="5" name="zipcode" placeholder="Zip Code *" title="Zip Code" type="tel"></span>
</div>
<div class="clearfloat"></div>
</div>
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text email" data-manual="1"><input class="required" id="email" maxlength="255" name="email" placeholder="Email *" title="Email" type="email"></span>
</div>
<div class="flex_2col">
<div class="requirement-info">
* fields are required
</div>
<ul class="misc">
<li>
<p>Would you like an agent to call asap?</p><label class="checkbox"><input name="yesmeet" type="checkbox"> Yes</label> <label class="checkbox"><input name="nomeet" type="checkbox"> No</label>
</li>
</ul>
</div>
<div class="clearfloat"></div>
</div>
</div>
<p style="font-size: 13px;line-height: 100%;margin: 15px 0 14px;">By hitting submit, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company.</p>
</form>
</div>
<div class="raq-complete-panel">
<div class="thanks">
<div class="title">
Thank You!
</div>
<p>An agent will call you<br>
<span class="eta">within 15 minutes.</span></p>
</div>
<div class="info">
<p>Your confirmation number is <span class="number"></span>.</p>
<p>If you have any questions regarding your request, contact us at <a class="textlink" href="mailto:email#test.com">email#test.com</a></p>
<p>Please provide your confirmation number listed above for reference.</p>
</div>
</div>
<div class="clearfloat"></div>
</div>
</div>
</div>
Your first try was so close. You want your assignment to be like this:
var p = document.querySelector(".form-bg form > p");
then you can set the innerHTML.
p.innerHTML = "Your new text";
Need help on how to use angular with firebase for realtime data,
what i have done
-I have done all installed and imported the firebase sdk
-Configured the environment file with the firebase api
what i want as a result
-I want to post the form input to my forebase realtime storage
-Read and write the input data in my angular app
result im getting
if i submit the form nothing really happens in my browser console and firebase console.
Please im now learning and would be glad for an assistance and correction.
source https://firebase.google.com/docs/database/web/read-and-write
send.component.ts
<form (ngSubmit)="this.authService.wire_Transfer" novalidate>
<div class="authBlock2">
<span style="color: brown;">Enter details for Wire transfer</span>
<div class="formGroup">
<input type="text" class="formControl" matInput placeholder="Enter Recipient Name "
name="recipient" />
</div>
<div class="formGroup">
<input type="text" class="formControl" matInput placeholder="Enter Recipint Bank "
name="bank" />
</div>
<div class="formGroup">
<input type="text" class="formControl" placeholder="Account Number"
name="account" />
</div>
<div class="formGroup">
<input type="text" class="formControl" matInput placeholder="Enter Amount "
name="amount" />
</div>
<div class="formGroup">
<input type="text" class="formControl" placeholder="Enter your PIN"
name="pin" #pin = "ngModel"/> />
</div>
<div class="formGroup">
<button mat-raised-button data-toggle="modal" type="submit" >sen</button>
</div>
</div>
</form>
auth.service.ts
Transfer(userId, name, bank, account, amount,) {
firebase.database().ref('transfer/' + userId).set({
name: name,
bank: bank,
account : account,
amount: amount
});
}
I have 2 inputs where I enter value and concat it into new one
Here is code from HTML
<div class="form-group">
<label>{{l("FirstName")}}</label>
<input #firstNameInput="ngModel" class="form-control" type="text" name="name" (ngModelChange)="onNameChange()" [(ngModel)]="landlord.firstName" required maxlength="32">
<validation-messages [formCtrl]="firstNameInput"></validation-messages>
</div>
<div class="form-group">
<label>{{l("LastName")}}</label>
<input #lastNameInput="ngModel" class="form-control" type="text" name="name" (ngModelChange)="onNameChange()" [(ngModel)]="landlord.lastName" required maxlength="32">
<validation-messages [formCtrl]="lastNameInput"></validation-messages>
</div>
And concat value I show in this field
<div class="form-group">
<label>{{l("OrganizationName")}}</label>
<input #organizationName="ngModel" class="form-control" type="text" name="organizationName" [(ngModel)]="landlord.organizationName" required maxlength="500">
<validation-messages [formCtrl]="organizationName"></validation-messages>
</div>
Here is code from ts file
onNameChange() {
this.landlord.organizationName = `${
this.landlord.firstName ? this.landlord.firstName : ''
} ${this.landlord.lastName ? this.landlord.lastName : ''}`;
}
My problem, that last character is deleted from firstName or lastName
How I can fux this stuff?
Your ngModelChange event is firing before the model is actually updated, so with the current value at the time the event is fired, prior to the change. Likely to do with the ordering of (ngModelChange) and [(ngModel)] in your template.
Change your event to fire on (input) and it will get the most recent value.
<div class="form-group">
<label>{{l("FirstName")}}</label>
<input #firstNameInput="ngModel" class="form-control" type="text" name="name" (input)="onNameChange($event)" [(ngModel)]="landlord.firstName" required maxlength="32">
</div>
OR
Change the order of your attributes in your template:
<div class="form-group">
<label>{{l("FirstName")}}</label>
<input #firstNameInput="ngModel" class="form-control" type="text" name="name" [(ngModel)]="landlord.firstName" (ngModelChange)="onNameChange()" required maxlength="32">
</div>
Stackblitz: https://stackblitz.com/edit/angular-p7ecgh
I've been able to narrow down where the 'error' occurs, which is within the credit card form section:
<div class="form-group">
<label for="cardNumber">Your card number</label>
<div class="input-group">
<input
type="tel"
class="form-control card-number input-medium"
name="cardNumber"
placeholder="Enter Your Valid Card Here"
autocomplete="cc-number"
required autofocus
value=""
/>
<span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
</div>
</div>
<div class="form-group">
<label for="cardNumber">Your Email Address</label>
<div class="input-group">
<input
type="email"
class="form-control"
name="email"
placeholder="Enter Your Valid Email Here"
required autofocus
value=""
/>
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
</div>
</div>
My suspicious are that the form I'm using (which uses the Stripe API) has a customer error reporting feature, so if for example the customer's card has expired then an error pops up just above the 'form-group' code shown above - and also in the php and javascript there is a reference to .index.php which is at the bottom of the page here:
<script>
$('.close').click(function(){
window.location.href='index.php';
});
</script>
But that's only my hunch....
Any ideas why this page is behaving like this? Thanks!
Answer = remove 'autofocus' - thanks to #Rick