I'm trying to figure out how to handle in a single place a "login" action, that must be activated from a button click and "enter" keypress;
in my template I've wrapped everything inside a "login-functions" component
//template home.hbs
{{#login-functions}}
<input id="email" type="email" class="validate">
<input id="password" type="password" class="validate">
<div id="login" {{action "login"}}>
{{/login-functions}}
//component components/login-functions.js
export default Ember.Component.extend({
actions: {
login: function() {
var email = $('#email').val();
var password = $('#password').val();
var self = this;
Utils.login(email, password).done(function(res) {
localStorage.setItem('Access-Token', res.data.token);
localStorage.setItem('userId', res.data.user_id);
self.transitionToRoute('feed');
})
.error(function(error) {
//handle error
});
}
},
keyPress: function(event) {
if (event.charCode === 13) {
console.log('login attempt');
this.send('login');
}
}
});
But this doesn't work because the action is not sent from the template button to the component's action and also because from the component I can't perform the transition.
Can someone tell the best way to handle this?
I think it's because your button is part of your home template. Maybe the form should be moved in your login-functions template and be called from your home template by doing {{login-functions}}.
And for the redirection, components can't do them, I'd suggest to call an action using this.sendAction('didLogin') and handle the redirection in your HomeController.
Move the keyPress functions out of the actions.
Updated --- Here is a working demo
Related
template
{{input type="email" value=email placeholder="email"}}
<button {{action "addUser"}} type="submit">Add</button>
controller
export default Controller.extend({
actions: {
addUser: function(){
//some codes here
$.ajax({
//some codes here
}).then(()=>{
alert("success");
});
}
}
});
When I call press the button and call the function addUser I need to disable the button until the whole function is finished execution
Please help..!
There are two ways of doing that.
First - maintain state manually
This means you should have a property on your controller and set it to true when task is running
export default Controller.extend({
actions: {
addUser: function(){
this.set('addUserRunning', true);
//some codes here
$.ajax({
//some codes here
}).then(()=>{
alert("success");
}).always(() => {
this.set('addUserRunning', false);
});
}
}
});
{{input type="email" value=email placeholder="email"}}
<button type="submit" disabled={{addUserRunning}} {{action "addUser"}}>Add</button>
Second (recommended by me) - use ember-concurrency
There is an addon called ember-concurrency. You need to look through the docs to understand how to use it. Instead of action you will use task and task has properties for it's state.
It will be something like this:
import { task } from 'ember-concurrency';
export default Controller.extend({
addUser: task(function* () {
//some codes here
yield $.ajax({
//some codes here
});
alert("success");
}).drop()
});
{{input type="email" value=email placeholder="email"}}
<button type="submit" disabled={{addUser.isRunning}} onclick={{perform addUser}}>Add</button>
Can anyone guide me how to load data from a database when I change the value in the select box? I tried the following code, but when I try to get the "value" and log it says "undefined."
My Component.js
actions:{
filterStudent(){
let filterInputValue = this.get('value');
console.log(filterInputValue);
let filterAction = this.get('filter');
console.log(filterAction);
}
}
My Controller
actions:
{
filterStudentResults(param)
{
if (param !== '')
{
return this.get('store').query('Students', { studentName: param });
}
else
{
return this.get('store').findAll('Students');
}
}
}
My Component.hbs
<select name="newType" onchange={{action "filterStudent" value="target.value"}} class="form-control">
<option value="" disabled selected>Please Select</option>
{{#each model.Students as |newStudents|}}
<option value="{{newStudents.studentId}}">{{newStudents.studentName}}</option>
{{/each}}
</select>
Am calling the component in the Specific template as
{{bind-dropdown model=model Filter=filterStudentResults}}
Am a newbie to EmberJS and appreciate any help. Thanks in Advance :)
In My-Component.js, does not having value as property, You mean to get it from onchange={{action "filterStudent" value="target.value"}} then your action should receive param,
actions:{
filterStudent(selectedValue){
console.log(selectedValue);
}
}
One more problem, I found upon sending action filterStudentResults to component.
The below one is wrong.
{{bind-dropdown model=model Filter=filterStudentResults}}
As you have defined filterStudentResults in controller, you can create closure action and send it to component, so it should be like,
{{bind-dropdown model=model filter=(action 'filterStudentResults')}}
And it should be invoked with selectedValue from component action,
actions:{
filterStudent(selectedValue){
this.sendAction('filter',selectedValue);//this will call controller method with param
}
}
First you need to check the model is ready and you can do so inside route's afterModel(model) hook.
<select name="newType" onchange={{action "filterStudent" value="target.value"}} class="form-control">
Should be re-write to,
<select name="newType" onchange={{action "filterStudent"}} value={{target.value}} class="form-control">
My controller is not getting invoked from the component the sendAction method is not working.
MyController.js
actions:
{
filterStudentResults(param)
{
if (param !== '')
{
return this.get('store').query('Students', { studentName: param });
}
else
{
return this.get('store').findAll('Students');
}
}
}
am calling the component from the template as follows
{{bind-dropdown model=model filter=(action 'filterStudentResults')}}
My Component js
actions:{
filterStudent(selectedValue){
this.sendAction('filterPartsResults',selectedValue)
}
My Componet file name is bind-dropdown and my contollers name is studentsController. The template name is list-studentDetails.
In a non Ember world I could put this in my document ready:
$("input").on("invalid", function(event) {
$(this).addClass('isDirty');
});
And then I would know that whenever a form is submitted, it would inturn fire the invalid event on invalid inputs and allow me to mark them as dirty for css purposes. I tried to do this in Ember in a component (in didInsertElement):
export default Ember.Component.extend({
didInsertElement: function() {
this.$('input, textarea').on('invalid', function() {
console.log('worked!');
Ember.$(this).addClass('isDirty');
});
},
actions: {
keyDownAction: function(value, event) {
// Mark input/textarea as dirty
Ember.run(() => {
this.$('input, textarea').addClass('isDirty');
})
if (this.get('keyDown')) {
this.sendAction('keyDown', value, event);
}
},
focusInAction: function(value, event) {
if (this.get('focusIn')) {
this.sendAction('focusIn', value, event);
}
},
focusOutAction: function(value, event) {
// Mark input/textarea as dirty
Ember.run(() => {
this.$('input, textarea').addClass('isDirty');
})
if (this.get('focusOut')) {
this.sendAction('focusOut', value, event);
}
}
}
})
hbs:
{{input type=type value=value id=inputId class=inputClass name=name tabindex=tabindex autofocus=autofocus required=required list=list
min=min max=max step=step
key-down="keyDownAction" focus-in="focusInAction" focus-out="focusOutAction"}}
<span class="bar"></span>
<label class="{{if value 'text-present'}}">{{placeholder}}</label>
But my event isn't firing. Can I attach the ember input helper to the html5 invalid event?
It works for me. You just need to make sure you wrap both component and submit button (for example, <button type='submit'>Submit</button>) in <form> element.
For example, template:
<form>
{{my-component type='text' required='true' placeholder='My field'}}
<button type='submit'>Submit</button>
</form>
Clicking submit button without <form> will do nothing. Clicking submit button when both elements are inside <form> will log worked! in console, add class isDirty to <input> and display native browser dialog to fill this field.
Working demo.
Full code behind demo.
It looks like you're doing things way too complicated. from what i understand is you're marking a textarea's validty depending on its value.
Lets say you have a text area
{{textarea value=textValue class="form-control"}}
And this input is supposed to have value for validity.
textAreIsValid: function() {
return !Ember.isEmpty(this.get('textValue'); // meaning the text can't be empty.
}.property('textValue')
To show its validity you to user, i would wrap the text area like this
<div class="control-group {{if textAreIsValid 'valid-class' 'has-error'}}">
XX text area XX
</div>
Also instead of keyPres and up you could be observing the value
areaValueChanged: function() {
}.observes('textValue'),
It turns out that adding an Ember action to the submit button, such as:
<button type="submit" {{action 'testAction'}}>Go</button>
And returning false from the action, was not enough.
I did try adding preventDefault=false to the button, which worked in that the invalid event fired, but didnt work in that the whole page then submited rather than Ember handling things
The best solution therefore was to call this.$('form')[0].checkValidity(); just before returning false in the action, i.e.
if (formIsInvalid) {
this.$('form')[0].checkValidity();
return false;
}
Example twiddle now working: https://ember-twiddle.com/13af9d78ff5007626960
I want to display an input field, and immediately autofocus it upon clicking a button. Im still new to Ember so i am not sure this is the correct approach, but I tried to wrap as an ember component
template
{{#if showCalendarForm}}
{{new-calendar focus-out='hideNewCalendar' insert-newline='createCalendar'}}
{{else}}
<button class="btn btn-sm btn-primary" {{action "showNewCalendar"}}>New</button>
{{/if}}
new-calendar component handlebars:
<div class="input-group">
{{input
class = 'form-control'
id = 'newCalendar'
type = 'text'
placeholder = 'New calendar'
value = calendarName
action = 'createCalendar'
}}
</div>
new-calendar component js
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement: function() {
this.$().focus();
}
});
When I click the button, the text field is displayed, but autofocus and hitting enter doesnt work
The way the jQuery is written, you are trying to set focus on the <div class="input-group">, try this instead:
didInsertElement: function() {
this.$('input').focus();
}
Another way to do this would be to extend the Ember.TextField:
export default Ember.TextField.extend({
becomeFocused: function() {
this.$().focus();
}.on('didInsertElement')
});
Then, in your new-calendar template, use this component:
{{focus-input
class = 'form-control'
id = 'newCalendar'
type = 'text'
placeholder = 'New calendar'
value = calendarName
action = 'createCalendar'
}}
This way you can reuse the focus-input component wherever you need to.
As for hitting enter to create the calendar, I think you want to listen for the keyPress event, check to see if it's the enter key, and then send the action rather than trying to use insert-newline='createCalendar'.
//in FocusInputComponent
keyPress: function(e) {
// Return key.
if (e.keyCode === 13) {
this.sendAction();
}
}
Try wrapping your focus call in an Ember.run and schedule it to be run in the after render queue like this:
didInsertElement: function()
{
Ember.run.scheduleOnce('afterRender', this, function() {
this.$().focus();
});
}
this blog post has helped me a lot in understanding ember's lifecycle hooks:
http://madhatted.com/2013/6/8/lifecycle-hooks-in-ember-js-views
I am trying to integrate zurb reveal with form into react component. So far next code properly displays modal form:
ModalForm = React.createClass({
handleSubmit: function(attrs) {
this.props.onSubmit(attrs);
return false;
},
render: function(){
return(
<div>
Add new
<div id="formModal" className="reveal-modal" data-reveal>
<h4>Add something new</h4>
<Form onSubmit={this.handleSubmit} />
<a className="close-reveal-modal">×</a>
</div>
</div>
);
}
});
The Form component is pretty standard:
Form = React.createClass({
handleSubmit: function() {
var body = this.refs.body.getDOMNode().value.trim();
if (!body) {
return false;
}
this.props.onSubmit({body: body});
this.refs.body.getDOMNode().value = '';
return false;
},
render: function(){
return(
<form onSubmit={this.handleSubmit}>
<textarea name="body" placeholder="Say something..." ref="body" />
<input type="submit" value="Send" className="button" />
</form>
);
}
});
Problem: When I render form component within modal form component and enter something into form input then I see in console exception Uncaught object. This is a stack:
Uncaught object
invariant
ReactMount.findComponentRoot
ReactMount.findReactNodeByID
getNode
...
If I just render form component directly in the parent component then everything works. Could anybody help please?
In short, you're doing this wrong and this is not a bug in react.
If you use any kind of plugin that modifies the react component's dom nodes then it's going to break things in one way or another.
What you should be doing instead is using react itself, and complementary css, to position the component in the way you'd like for your modal dialog.
I would suggest creating a component that uses react's statics component property to define a couple of functions wrapping renderComponent to give you a nice clean function call to show or hide a react dialog. Here's a cut down example of something I've used in the past. NB: It does use jQuery but you could replace the jQ with standard js api calls to things like elementById and etc if you don't want the jQuery code.
window.MyDialog = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
content: React.PropTypes.string.isRequired
},
statics: {
// open a dialog with props object as props
open: function(props) {
var $anchor = $('#dialog-anchor');
if (!$anchor.length) {
$anchor = $('<div></div>')
.prop('id', 'dialog-anchor');
.appendTo('body');
}
return React.renderComponent(
MyDialog(props),
$anchor.get(0)
);
},
// close a dialog
close: function() {
React.unmountComponentAtNode($('#dialog-anchor').get(0));
}
},
// when dialog opens, add a keyup event handler to body
componentDidMount: function() {
$('body').on('keyup.myDialog', this.globalKeyupHandler);
},
// when dialog closes, clean up the bound keyup event handler on body
componentWillUnmount: function() {
$('body').off('keyup.myDialog');
},
// handles keyup events on body
globalKeyupHandler: function(e) {
if (e.keyCode == 27) { // ESC key
// close the dialog
this.statics.close();
}
},
// Extremely basic dialog dom layout - use your own
render: function() {
<div className="dialog">
<div className="title-bar">
<div className="title">{this.props.title}</div>
<a href="#" className="close" onClick={this.closeHandler}>
</div>
</div>
<div className="content">
{this.props.content}
</div>
</div>
}
});
You then open a dialog by calling:
MyDialog.open({title: 'Dialog Title', content: 'My dialog content'});
And close it with
MyDialog.close()
The dialog always attaches to a new dom node directly under body with id 'dialog-anchor'. If you open a dialog when one is already open, it will simply update the dom based on new props (or not if they're the same).
Of course passing the content of the dialog as a props argument isn't particularly useful. I usually extend below to either parse markdown -> html for the content or get some html via an ajax request inside the component when supplying a url as a prop instead.
I know the above code isn't exactly what you were looking for but I don't think there's a good way to make a dom-modifying plugin work with react. You can never assume that the dom representation of the react component is static and therefore it can't be manipulated by a 3rd party plugin successfully. I honestly think if you want to use react in this way you should re-evaluate why you're using the framework.
That said, I think the code above is a great starting point for a dialog in which all manipulation occurs inside the component, which afterall is what reactjs is all about!
NB: code was written very quickly from memory and not actually tested in it's current form so sorry if there are some minor syntax errors or something.
Here is how to do what Mike did, but using a zf reveal modal:
var Dialog = React.createClass({
statics: {
open: function(){
this.$dialog = $('#my-dialog');
if (!this.$dialog.length) {
this.$dialog = $('<div id="my-dialog" class="reveal-modal" data-reveal role="dialog"></div>')
.appendTo('body');
}
this.$dialog.foundation('reveal', 'open');
return React.render(
<Dialog close={this.close.bind(this)}/>,
this.$dialog[0]
);
},
close: function(){
if(!this.$dialog || !this.$dialog.length) {
return;
}
React.unmountComponentAtNode(this.$dialog[0]);
this.$dialog.foundation('reveal', 'close');
},
},
render : function() {
return (
<div>
<h1>This gets rendered into the modal</h1>
<a href="#" className="button" onClick={this.props.close}>Close</a>
</div>
);
}
});