CODEWITHSUNDEEP
javascriptajaxember.js
user1601973
user1601973

Reputation: 572

KeyPress event not working as expected in Ember

What I want to do is, make an ajax call whenever user stops entering something in the 'projectname' field & check it against database & show an kind of error message saying, "It exists". But the keypress event is not working as expected, first of all it omits the first letter entered & as a result word is not sent to database completely.

Here's my Controller:

App.ProjectController = Ember.ArrayController.extend({
    actions : {
        createNew : function() {
            data = {
                projectname : this.get('projectname'),
                projectdesc : this.get('projectdesc'),
                projectbudget : this.get('projectbudget'),
            };
            console.log(JSON.stringify(data));
            //console.log(id);
            $.ajax({
                type : "POST",
                url : "http://ankur.local/users/createNewProject",
                data : data,
                dataType : "json",
                success : function(data) {
                    console.log('success');
                    //alert('');
                }
            });
            alertify.success("Project Created");
            this.set('projectname', "");
            this.set('projectdesc', "");
            this.set('projectbudget', "")
            return false;
        },
        checkName: function(){
            data = {
                projectname : this.get('projectname'),
            };
            var checkedName = $.ajax({
                type : "POST",
                url : "http://ankur.local/users/checkProjectName",
                data : data,
                dataType : "json",
                success : function(data) {
                    console.log('Yes it');
                }
            });
            console.log(data);
            console.log(checkedName);
        }
    }


});

and Here's the HTML,

<script type="text/x-handlebars" id="project">
<div class="row" style="padding-left: 30px">

        <div class="span12" id="form-container">
            <div class="well well-small">
                <p style="text-align: center">
                    You can create a new Project by filling this simple form.
                </p>

                <p style="text-align: center"> Project Name should be minimum 10 characters &amp; maximum 50 characters.
                    Project Description
                    10 to 300 characters.
                </p>
            </div>
            <div class="row" id="test">
                <div class="offset3 span8">
                    <form class="form-horizontal" id="projectform">
                        <div class="control-group">
                            <label class="control-label" for="projectname">Project Name: </label>

                            <div class="controls">
                                {{view Ember.TextField valueBinding='projectname' style="max-width: 100%" onEvent="keyUp" action=checkName}}
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="projectdesc">Project Description:</label>

                            <div class="controls">
                                {{view Ember.TextArea valueBinding='projectdesc' style="max-width: 100%"}}
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="projectbudget">Project Budget($)</label>


                            <div class="controls">
                               {{view Ember.TextField valueBinding='projectbudget' id="budget" style="max-width: 100%"}}
                            </div>

                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <button class="btn"
                                {{action 'createNew' }}>Add Project</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </div>

What improvements I can make to achieve the desired result?

Upvotes: 2

Views: 2029

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

Key press is working as expected, key press happens before the textbox value has changed.

It looks like key up isn't supported in the manner that you want tho. Fortunately it's really easy to override:

App.KeyUpTextField = Em.TextField.extend({
  keyUp:function(event){
    this.sendAction('upKeyAction', event); 
  }
});


{{view App.KeyUpTextField value=projectname upKeyAction='checkName'}}

BTW I'd do debounce or something like that in your keyUp function, it seems like it'd get a bit chatty to send the request on every keyup event.

Upvotes: 5

Related Questions