CODEWITHSUNDEEP
ember.jsember-cli
bharathwaj ravi
bharathwaj ravi

Reputation: 63

Handling enter key event in ember

I have a component in my application.It have a form with text fields.It will have a submit button.When submit is pressed it will send a post request to the server.I also handled a keyboard event in components js file.When enter is pressed it will send a post request to the server.When the enter key is pressed two times continuously it is making two post request to the server with first request success and second request failed. I want to make my app in such away even if the user presses the enter key two times continuously it should send only one post request to the server.Can any one help me solve this issue.Thanks in advance.

components js file:

export default Component.extend({
  keyDown:function(event){
            let self = this;
            if(event.keyCode === 13){
              self.send('submitform'); 
              return false;
  }
  actions: {
             submitform(){
             //logic to handle the post request to the server    
  }   
}

Upvotes: 1

Views: 2027

Answers (2)

Jan Werkhoven
Jan Werkhoven

Reputation: 2954

You will want to disable submitForm() until your POST request is complete. You can do this by setting a property submitting on the component and turning it on before the POST and off once the promise is resolved. Perhaps try something like:

export default Ember.Component.extend({
  submitting: false,
  keyDown: function(event) {
    if (event.keyCode === 13) {
      this.submitform();
    }
  },
  submitform() {
    // Run only if not currently submitting
    if (!this.get('submitting')) {
      // What to do when submit succeeds
      const success = () => {
        this.set('submitting', false);
      }
      // What to do when submit fails
      const fail = () => {
        this.set('submitting', false);
      }
      // Do the POST request
      this.set('submitting', true);
      this.get('someModel').save().then(success).catch(fail);
    };
  }
});

And, unrelated, this allows you to do fun things with your template such as disabling and styling the submit button for as long as the POST promise is not resolved yet:

<button {{action 'submitForm'}} disabled={{submitting}} class="{{if submitting 'loading'}}">
  {{#if submitting}}
    Submitting ...
  {{else}}
    Submit
  {{/if}}
</button>

Oh and lastly, no need to use let self = this; anymore. Use ES6 arrow functions () => { ... } instead so you can keep using this inside.

Upvotes: 0

Ember Freak
Ember Freak

Reputation: 12872

Try usig Ember.run.debounce,

export default Ember.Component.extend({
    keyDown: function(event) {
        let self = this;
        if (event.keyCode === 13) {
            // self.send('submitform');
            Ember.run.debounce(self,self.get('submitform'),400);
            return false;
        }
    },
    submitform(){
        //handle submit form logic
    }
});

You can play with twiddle here

Upvotes: 1

Related Questions