I have this rather simple form which has a email and a password input field. For my webpage Google Chrome's autofill/save password has activated. Now whenever I load my webpage, Chrome autofills the email and password field (which is nice).
Problem is EmberJS doesn't seem to "see" these auto filled values. If I use this.get('userName') for example in the controller, ember returns me blank values.
In order to have ember "see" these autofilled values, I have to click on each {{input}} or tab through them and then ember begins to see it.
It's a very simple form really:
<div>
<form class="form-signin form-vertical" id="login-form" {{action "login" on="submit"}}>
<h3 class="form-signin-heading text-center sf-primary-color">Please Login</h3>
{{input class="form-control" name="email" placeholder="Email address" value=userName type="text" tabindex=1}}
{{input class="form-control" name="password" placeholder="Password" value=password type="password" tabindex=2}}
{{#if errorMessage}}
<div class="alert alert-danger text-center sf-fade-in">{{errorMessage}}</div>
{{/if}}
<div class="well">
You may login with <kbd>demo</kbd>/<kbd>demo</kbd>.
</div>
{{input type="submit" value="Log In" tabindex=3}}
</form>
</div>
I have created a fiddle as well. The problem is not reproducible in the fiddle, because no matter how many times I've run it. The browser does not offer to save the password.
It does sound like Ember's data binding is not detecting a browser autofilled {{input}}
As an aside, I had to use the trick outlined here in order to get these input fields to offer auto complete.
EDIT: I defined an observer like below and it is not fired when the site is first loaded and auto fill has done it's job.
userNameChanged: function() {
console.log('User Name Changed');
}.observes('userName'),
Version Info follows:
DEBUG: ------------------------------- ember.js:3461
DEBUG: Ember : 1.4.0 ember.js:3461
DEBUG: Ember Data : 1.0.0-beta.4 ember.js:3461
DEBUG: Handlebars : 1.3.0 ember.js:3461
DEBUG: jQuery : 1.10.2 ember.js:3461
DEBUG: -------------------------------
This is what I'm using ATM.
Ember.TextField.reopen({
triggerEvents: function () {
Ember.run.next(this, function () {
this.$().trigger("change");
});
}.on("didInsertElement")
});
Modification of the solution found in the linked github issue thread.
(Updated according to #briangonzalez's suggestion)
Not perfect but functional solution:
Ember.TextField.reopen({
fetchAutofilledValue: function() {
var $textField = this.$();
setTimeout( function(){
$textField.trigger("change")
}, 250);
}.on('didInsertElement')
});
I don't have an answer, but I do have the same problem, and I found this Github issue:
https://github.com/emberjs/ember.js/issues/2968
Also, this is a nice summary about which events are dispatched by different browsers on autofill:
http://avernet.blogspot.in/2010/11/autocomplete-and-javascript-change.html
Related
I'm new to ember.js and I find it pretty confusing to figure out which is a good way for authentication (version 2.x) since most of the examples on the web seem to be outdated. Also the documentation often doesn't come with easy to understand beginner examples.
Right now I'm following this tutorial. The initializer works apparently, I can also trigger the action login but then it gets stuck on the controller.get bit. The console spits out a TypeError: controller.get(...) is undefinedTypeError: controller.get(...) is undefined.
app/components/login-form
...
actions: {
login: function() {
var controller = this;
controller.get("session").login().then(function(admin) {
// Persist your users details.
}, function() {
// User rejected authentication request
});
}
}
...
app/templates/components/login-form
<form {{action 'login' on='submit'}}>
<div class="form-group">
<label for="email">Login</label>
{{input value=email placeholder='Enter Login' class='form-control'}}
</div>
<div class="form-group">
<label for="password">Password</label>
{{input value=password placeholder='Enter Password' class='form-control' type='password'}}
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
app/templates/admin.hbs
<div class="page-header">
<h1>Login</h1>
</div>
{{login-form}}
I hope somebody can point me into the right direction to get this working. I'd also appreciate any general advice where to find good examples or explanations concerning the ember 2.x way of authentication.
Edit: I need to have this working with Firebase.
http://ember-simple-auth.com/
looks like your best bet. They have a good video on setting it up too.
For connection to firebase you could create backend to authenticated with and have that check firebase. I'm using express and jwt in node.js to communicate with my mongoDB database.
I'm having trouble trying to get ember and sails playing nice together when it comes to relationships with belongsTo/hasMany.
I have a simple form:
<form {{action 'addMessage' on='submit'}}>
<div class="form-group">
<label for='name'>Title</label>
{{input value=title class="form-control" required="required"}}
</div>
<div class="form-group">
<label for='location'>User</label>
{{input value=user class="form-control" required="required" value=1}}</div>
<p>
<button class="btn btn-primary btn-block" type="submit">Create Message</button>
</p>
And a controller with the action
actions: {
addMessage: function() {
var newMessage = this.store.createRecord('message', {
title: this.get('title'),
user: this.get('user')
});
newMessage.save().then(function() {
}, function(error) {
console.warn('Save Failed.', error);
});
},
I'm just passing a string, and a value which matches a user id. When I look at what's being passed the title is fine, but the user id is null.
I'm using sails ember blueprints so it should work, but think I might be doing something wrong.
I've uploaded the sample code here if someone can take a look https://github.com/jimmyjamieson/ember-sails-example
On your user input is says value=1 which I think is changing what the controller is writing that property as.
so instead of
{{input value=user class="form-control" required="required" value=1}}
try
{{input value=user class="form-control" required="required"}}
Ok, fixed. I've added a repo for others to look at. It works with ember and ember-data 2.0 https://github.com/jimmyjamieson/ember-sails-relationships-hasmany-belongsto-example
I'm running into a weird issue with Ember.js.
I built out a basic search form like so, with an Ember input field that submits to a form action 'submitSearch':
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
submitSearch: function() {
var searchItem = this.get('searchItem');
this.transitionTo({queryParams: {'q':searchItem}});
}
}
});
<div class="search">
<form {{action "submitSearch" on="submit"}}>
<fieldset>
{{input type="text" class="form-control" value=searchItem}}
<input type="submit" name="submit" id="submit-search" class="btn btn-default" value="Search" />
</fieldset>
</form>
</div>
Any reason why I would be getting a value of 'undefined' when logging out searchItem? I've tried just about everything including creating a model, but I can't get the input to save.
The searchTerm value in your template is referring to your controller's searchTerm property, not a property of your route (by default when referring to a property in your template, it is referring to a property of the corresponding controller).
To get the value in the route, simply do this.get('controller.searchTerm').
What I want to do should be fairly simple.
I want to pass variables to partials for reusability.
I want to do something like this :
<form {{action login content on="submit"}}>
<fieldset>
{{partial 'components/field-email' label="Email" fieldname="email" size="full"}}
[...]
</fieldset>
</form>
Instead of doing this :
<form {{action login content on="submit"}}>
<fieldset>
<div {{bind-attr class=":field :email size"}}>
<label {{bind-attr for=fieldname}}>{{label}}</label>
{{input type="email" id=fieldname name=fieldname valueBinding="email" placeholder=label}}
</div>
[...]
</fieldset>
</form>
coming from Rails, I expected this to just work, but it seems I can't (don't know how to) pass variables to a partial. I looked at all the ways to "include a template part":
partial
view
render
The thing that worked for me is using a View. But I thinks it's overkill. I just want separate sub-templates for reusability and readability, no context change or specifying a controller needed here.
Edit:
I also tried to use this partial as a component :
{{field-email type="email" id="email" name="email" valueBinding="email" placeholder=label size="full"}}
Which works for everything except the valueBinding.
I guess it's also worth mentioning that I have a route setup with an action that calls login on my AuthController :
App.LoginRoute = Ember.Route.extend
model: -> Ember.Object.create()
setupController: (controller, model) ->
controller.set 'content', model
controller.set "errorMsg", ""
actions:
login: ->
log.info "Logging in..."
#controllerFor("auth").login #
This whole thing works if all the markup is in the login template but fails if I try to break it up with partials, components and such.
There has to be something that I didn't see...
You should use a component in this case.
If you setup your template correctly (components/field-email), you can use on this way:
{{field-email label="Email" fieldname="email" size="full"}}
You could setup the html component properties, if you define the component. Based on your example, it could be:
App.FieldEmailComponent = Ember.Component.extend({
classNames: ['size'],
classNameBindings: ['email', 'field'],
field: null,
email: null
});
Example: http://emberjs.jsbin.com/hisug/1/edit
Got it working, I had to use a component. I had messed up the "value" part.
components/field-email.hbs :
<div {{bind-attr class=":field :email size"}}>
<label {{bind-attr for=fieldname}}>{{label}}</label>
{{input type="email" name=fieldname value=value placeholder=label}}
</div>
login.hbs :
<form {{action login content on="submit"}}>
<fieldset>
{{field-email label="Email" fieldname="email" value=email size="full"}}
[...]
</fieldset>
</form>
What I get from this is that in order for attributes to be used in a component they have to be explicitly set when using the component. Once they are set, they are bound.
In my case, when the input value changes, the associated route property is updated as well which is pretty cool.
There are bunch of answer on how to jQuery upload. That's not what I want. I want to simply bind the "file" input so that it's send with my object when I submit the form.
App.Document = DS.Model.extend({
document_name: DS.attr(),
document_file: DS.attr()
});
<form role="form" {{action save on="submit"}}>
<div class="thumbnail" {{action 'start'}}>
<img {{bindAttr src=src}} class="preview"/>
<img class="shadow hide"/>
<canvas class="hide"></canvas>
</div>
{{input type="file" valueBinding="document_file" name="document_file" }}
{{input type="text" valueBinding="document_name" name="document_name"}}
<div>
<button class="btn btn-primary" {{action 'save'}}>Save</button>
</div>
</form>
I haven't found a single tutorial on simple upload. It can't be too hard to send a file right?
It is actually pretty simple to do it althougt it is not functionality out of the box. See my question here with working example: Ember.js value binding with HTML5 file upload
Ember Data doesn't support it out of the box, you'll need to override the adapter and implement your own version of the createRecord/updateRecord which modifies the ajax call. It's probably easier to just use jquery.