I currently have an input box, which is inside a modal, setup like the following
<div style="padding-bottom: 8px">
<label for="edit-user-email">Email Address</label>
<input type="email" class="form-control" id="edit-user-email" value="{{getEmail}}">
</div>
And I have a UI helper to fill in the value setup below
UI.registerHelper "getEmail", () ->
editUsersDep.depend()
try
#console.log Session.get("currentUser")
return Session.get("currentUser").email.address
catch e
return
Now when I edit the value of the box, lets say changing the value from test#gmail to test2#gmail and then close my modal without actually updating the value for the currentUser session variable, and then re-open the modal I am expecting/wanting the value in that box to return to test#gmail.com but instead it is staying at test2#gmail.com.
The Session variable is being set as such. this corresponds to a row in a table. That works fine.
"click #foreman-edit-projects": () ->
FlashMessages.clear()
editUsersDep.changed()
supersOfForeman = []
projectsAdded = Meteor.users.findOne({_id: this._id}).on_projects
allSupers = Meteor.users.find({"roles.__global_roles__": {$in: ["admin", "super"]}, username: {$ne: "site.admin"}}).fetch()
for admin in allSupers
if admin.has_foreman
if this._id in admin.has_foreman
supersOfForeman.push(admin._id)
else
continue
Session.set("editSupersForUser", supersOfForeman)
Session.set("editProjectsForUser", this.on_projects)
Session.set("currentUser", this)
$("#editProjectsModal").modal("toggle")
The console.log I put in there to test that the method was actually being called when the modal pops up, which it does, but the value isn't changing. The log also always happens after I open the modal. Any thoughts?
I'm a bit confused by your question. I think you meant to say, "...instead it is staying at test2#gmail.com". If that's right, you might want to edit your question to reflect that.
Also, where are you setting the Session variable?
Assuming that you are trying to get the current user's email address, you can use Meteor.user() rather than constantly trying to set your session variable.
So, you can replace it with:
UI.registerHelper "getEmail", () ->
editUsersDep.depend()
try
return Meteor.user().emails[0].address
catch e
return
Related
So basically I have a modal component with an input field that tells it which modal should be opened (coz I didn't want to make a component for each modal):
#Input() type!:string
ngOnChanges(changes: SimpleChanges): void {
this.type = changes["type"].currentValue;
this.openModal();
}
that field is binded to one in the app component:
modalType = "auth";
HTML:
<app-modal [type] = modalType></app-modal>
In the beginning it's got the type "auth" (to login or register), but when I click on an icon I want to open a different modal, I do it like so:
<h1 id="options-route"
(click) ="modalType = 'settings'"
>⚙</h1>
but this only works the first time, when modalType already has the value "settings" the event doesn't trigger even though the value has technically changed
I think the problem is that it's the same value because i tried putting a button that does the exact same thing but with the value "auth" again and with that it was clear that the settings button only worked when tha last modal opened was auth and viceversa
any ideas? I want to be able to open the settings modal more than once consecutively possibly keeping onChange because ngDoCheck gets called a whole lot of times and it slows down the app
You need to include the changeDetectorRef, in order to continue in this way.
More about it https://angular.io/api/core/ChangeDetectorRef
Although, a better and a faster alternative is the use of a behavior Subject.
All you have to do is create a service that makes use of a behavior subject to cycle through each and every value exposed and then retrieve that value in as many components as you want. To do that just check for data changes in the ngOnInit of target component.
You may modify this for implementation,
private headerData = new BehaviorSubject(new HeaderData());
headerDataCurrent = this.headerData.asObservable();
changeHeaderData(headerDataNext : HeaderData) {
this.headerData.next(headerDataNext)
console.log("subscription - changeUserData - "+headerDataNext);
}
Explanation:
HeaderData is a class that includes the various values that can be shared with respective data types.
changeHeaderData({obj: value}), is used to update the subject with multiple values.
headerDataCurrent, an observable has to be subscribed to in the target component and data can be retrieved easily.
I mean i'm too l-a-z-y to use your slightly-not-so-much-tbh complicated answers so I just did this:
I added a counter that tops to 9 then gets resetted to 0 and I add it to the value
screwYouOnChangesImTheMasterAndYouShallDoMyBidding = 0;
//gets called onClick
openSettings(){
if(this.screwYouOnChangesImTheMasterAndYouShallDoMyBidding === 9){
this.screwYouOnChangesImTheMasterAndYouShallDoMyBidding = 0;
}
this.screwYouOnChangesImTheMasterAndYouShallDoMyBidding = this.screwYouOnChangesImTheMasterAndYouShallDoMyBidding + 1;
this.modalType = "settings"+this.screwYouOnChangesImTheMasterAndYouShallDoMyBidding;
}
then in the child component I just cut that last character out:
ngOnChanges(changes: SimpleChanges): void {
let change = changes["type"].currentValue as string;
change = change.substring(0, change.length - 1);
this.type = change;
this.openModal();
}
works like a charm 😂
In my application I have a inputbox where I search for the inputted value. I made it so it searches when the value inside the textbox has been changed.
The code is something like this:
<input id="searchTextField" [(ngModel)]="searchText" (ngModelChange)="SearchTextChange()" />
Back end Typescript code is like this :
private SearchTextChange(): void {
//do search
}
Problem is that I realized this is highly inefficient, because I realized in most cases, when people type a word, I don't want it to search when people type the letter"a" or "app" when the intended word maybe "apple" or something like that.
Is there a way to limit the search amount gets triggered either in angular 2 or typescript?
so I either only perform a search max every 2 seconds, or only let angular fire off the event on the same control maximum 1 ngModelChange for every 2 seconds?
Template :
<input id="searchTextField" [(ngModel)]="searchText" />
Put this code in your component :
searchText:string;
ngAfterViewInit()
{
let inputElm = document.getElementById("searchTextField");
Observable.fromEvent(inputElm , 'keyup').debounceTime(200).subscribe( res => {
// this will wait for 200ms and then this will called on input
// call you api here like
// this.get(searchText).subscribe();
});
}
I am working on a project in Squarespace to create a very basic combination lock form where inputting different codes (invoice #'s) takes you to specific URLs. Because it is Squarespace, I don't think I have very many options for coding other than html (but I could be wrong - I'm very much in learning-mode!!).. I did find a similar question here Query String Redirection: How to change form input to URL?, but how to implement the response into squarespace's code block is way beyond me...
Right now my code looks like this:
</span></p>
<div style="margin-top:5px;">
<form method="GET" action="/our-team/bob">
<div class="input-append">
<input class="span2" id="appendedInputButton" name="code" type="text">
<button class="btn btn-primary" type="submit">Submit!</button>
</div>
</form>
</div>
Using this code, the form takes you to the our-team/bob page every time, regardless of what is entered into the form. e.g. if 0000 is entered into the form, I am redirected to www.mydomain.com/our-team/bob?code=0000 -- which is still just the our-team/bob page; if 1234 is entered into the form, I am redirected to www.mydomain.com/our-team/bob?code=1234 --- which is still just the our-team/bob page; and if nothing is entered into the form and I click submit, it still redirects me to the our-team/bob page.
Ideally, each unique code will bring me to a unique page that I have developed. But squarespace doesn't let me use a "?" in a page url, so I can't just redirect that way. I would like to be able to enter a specific code that takes me to a corresponding page and need to check the code against an array with some simple logic like this:
If string is 1234, go to /our-team/bob
If string is 5555, go to /our-team/jane
If string is 0000, go to /our-team/allen
(etc.)
If string is anything else, show an error and not leave the page at all OR go to some sort of error page.
Hopefully this makes sense (and hopefully it is possible to do!) Please let me know if there is any other information I can provide you with. Your help is VERY much appreciated!
What you are asking for is not possible with HTML and standard HTTP protocol. The form values are either sent as query string parameters (if you are using GET) or as part of the request body (if you are using POST). Here you seem to be asking to make some mapping between the value entered by the user and the specific page being called on the server. The only way to achieve that is to use some javascript. Subscribe to the onsubmit event of the form and write the mapping between the client value and the server one:
<form method="GET" action="/our-team/bob" onsubmit="return handleSubmit();">
...
</form>
and then you could define the handleSubmit function to implement your custom logic:
<script>
var handleSubmit = function() {
var value = document.getElementById('appendedInputButton').value;
if (value === '1234') {
window.location.href = '/bob';
} else if (value === '5555') {
window.location.href = '/jane';
} else if (value === '0000') {
window.location.href = '/allen';
} else {
window.location.href = '/some-default-page';
}
return false;
};
</script>
After completing Ember's Getting Started Tutorial, i'm trying to make my first very basic app and am already blocked :)
I just want to do a simple Hello World:
my HTML contains a text input when a user can type his name
when the user presses enter, a <div> is updated with the text: "Hello user!"
Here is my template:
<script type="text/x-handlebars" data-template-name="user">
<form role="form">
<div class="form-group">
<label for="firstname">Firstname</label>
{{input type="text" class="form-control" id="new-user" value=newFirstname action="updateMessage"}}
</div>
</form>
<div class="well" id="new-greeting">
{{newGreeting}}
</div>
</script>
And here is my controller:
Teamtools.UserController = Ember.ArrayController.extend({
newGreeting: "Empty",
actions: {
updateMessage: function () {
var firstname = this.get('newFirstname');
this.newGreeting = "Hello " + firstname;
}
}
});
When loading the page, the input field and the "Empty" message appear. Great!
But when I type a name and then enter, I'm redirected to a blank /? page. I'm sure this is very basic stuff but if I could get help to understand what's going wrong here, I would really appreciate it.
ps: it it can help an explanation, I'm more of a Ruby on Rails world usually.
I believe the problem is with specifying an "action" for the input element - that's the URL you want to send the form data to, so you don't need that as you don't need to make a server request. Similarly you don't need an actions hash in your controller for this.
Ember's a lot smarter than you're giving it credit for. You can set it up so that you don't need to handle when anything changes, as it'll do it automatically. What you'd need to do is something like this:
Teamtools.UserController = Ember.ArrayController.extend({
newGreeting: function () {
var firstName = this.get("newFirstName");
var greeting = "Empty";
if (firstName.length !== 0)
{
greeting = "Hello " + firstName;
}
return greeting;
}.property("newFirstName")
});
The property("newFirstName") at the end of the newGreeting method is important: it tells Ember that newGreeting can be evaluated to give a property (a computed property) which can be displayed in the view. The "newFirstName" argument tells Ember that this value should be recalculated whenever newFirstName is changed.
Disclaimer: I haven't actually tested this code, but it should be something like what you're after...
Return false from your action so that it doesn't percolate. The navigation to index is happening farther up the chain of Controllers/Routes that can respond to the action.
I am trying to build my first web application. In my app I need to have a settings panel, but I have no idea how to do it. I've been searching the web and came across a HTML5 localStorage, which I believe might be the best way to do the things. But the problem is I have no idea how to use it.
<input type='text' name="server" id="saveServer"/>
How can I save data from input to localStorage when user clicks the button? Something like this?
<input type='text' name="server" id="saveServer"/>
<button onclick="save_data()" type="button">Save/button>
<script>
function saveData(){
localStorage.saveServer
}
</script>
The localStorage object has a setItem method which is used to store an item. It takes 2 arguments:
A key by which you can refer to the item
A value
var input = document.getElementById("saveServer");
localStorage.setItem("server", input.val());
The above code first gets a reference to the input element, and then stores an item ("server") in local storage with the value of the value of that input element.
You can retrieve the value by calling getItem:
var storedValue = localStorage.getItem("server");
This worked for me. For setting I placed .value behind the var and called the var in the setItem:
var input = document.getElementById('saveServer').value;
localStorage.setItem('server', input);
For getting the text back:
document.getElementById('saveServer').value = localStorage.getItem('server');