Hi i am very new to ember js. i wrote a form for new employee entry.and send data through route.Data saved successfully. But the problem is after form submission my form data not cleared.

The code as follows:

app.js:

App.Router.map(function() {
    this.resource('saveprofile', { path: '/saveprofile/:profiledata'});
});

App.NewprofileController = Ember.ObjectController.extend({
    id:'',
    name: '',
    designation: '',

    saveProfileAction: function () {

        profiledata = [{ "id": this.get("id")}, 
        {"name": this.get("name")}, 
        {"designation": this.get("designation")}]

        pdata = $.ajax({
            type: "POST",
            dataType: "json",
            url: "/saveprofile?profiledata=" +profiledata,
            data: JSON.stringify(profiledata),
            dataType: "json",
            async: false}).done(function() {
                $.bootstrapGrowl("Employee added successfully", {
                    type: 'success',
                    align: 'center',
                    width: '1000',
                    allow_dismiss: false
                }).responseJSON
            })
        });

    console.log(pdata)
}
});

App.SaveProfileRoute = Ember.Route.extend({
    model: function(params) {
        console.log(params);
        return Ember.$.getJSON( "/saveprofile?profiledata=" + params.profiledata);
    },
})

index.html:

     <script type="text/x-handlebars"  data-template-name="newprofile">
      <div class="panel panel-primary">
       <div class="panel-heading">
           <h3 class="panel-title">New Profile</h3>
       </div>
       <div class="panel-body">
         <form class="form-horizontal" role="form" id="form">
         <br/><br/>
       <div class="control-group">
        <label class="control-label" for="value">Employee Id:</label>
       <div class="controls"> 
            {{input type="text" class="input-medium" value=id required="true"}}
       </div>
       </div>
       <div class="control-group">
        <label class="control-label" for="value">Employee Name:</label>
       <div class="controls"> 
            {{input type="text" class="input-medium"  value=name}}
       </div>
       </div>
       <div class="control-group">
        <label class="control-label" for="value">Designation:</label>
       <div class="controls"> 
            {{input type="text" class="input-medium" value=designation}}
       </div>
       </div>      
       <div class="control-group pull-left">
        <div class="controls">
         <button type="button" class="btn btn-primary" {{action "saveProfileAction" }} id="button">Save</button>
          <button type="button" class="btn btn-primary" {{action "cancel"}} id="button">Reset</button>
        </div>
       </div>
         </form>
      </div>
     </div>
  </script>

I searched for this in stackoverflow i find some solutions but they use save and exit functions.but i did not use save method in ember.i directly save at server side.

what is my mistake. Give me some advise to clear the form data after form submission.

Hi i am very new to ember js. i wrote a form for new employee entry.and send data through route.Data saved successfully. But the problem is after form submission my form data not cleared.

The code as follows:

app.js:

App.Router.map(function() {
    this.resource('saveprofile', { path: '/saveprofile/:profiledata'});
});

App.NewprofileController = Ember.ObjectController.extend({
    id:'',
    name: '',
    designation: '',

    saveProfileAction: function () {

        profiledata = [{ "id": this.get("id")}, 
        {"name": this.get("name")}, 
        {"designation": this.get("designation")}]

        pdata = $.ajax({
            type: "POST",
            dataType: "json",
            url: "/saveprofile?profiledata=" +profiledata,
            data: JSON.stringify(profiledata),
            dataType: "json",
            async: false}).done(function() {
                $.bootstrapGrowl("Employee added successfully", {
                    type: 'success',
                    align: 'center',
                    width: '1000',
                    allow_dismiss: false
                }).responseJSON
            })
        });

    console.log(pdata)
}
});

App.SaveProfileRoute = Ember.Route.extend({
    model: function(params) {
        console.log(params);
        return Ember.$.getJSON( "/saveprofile?profiledata=" + params.profiledata);
    },
})

index.html:

     <script type="text/x-handlebars"  data-template-name="newprofile">
      <div class="panel panel-primary">
       <div class="panel-heading">
           <h3 class="panel-title">New Profile</h3>
       </div>
       <div class="panel-body">
         <form class="form-horizontal" role="form" id="form">
         <br/><br/>
       <div class="control-group">
        <label class="control-label" for="value">Employee Id:</label>
       <div class="controls"> 
            {{input type="text" class="input-medium" value=id required="true"}}
       </div>
       </div>
       <div class="control-group">
        <label class="control-label" for="value">Employee Name:</label>
       <div class="controls"> 
            {{input type="text" class="input-medium"  value=name}}
       </div>
       </div>
       <div class="control-group">
        <label class="control-label" for="value">Designation:</label>
       <div class="controls"> 
            {{input type="text" class="input-medium" value=designation}}
       </div>
       </div>      
       <div class="control-group pull-left">
        <div class="controls">
         <button type="button" class="btn btn-primary" {{action "saveProfileAction" }} id="button">Save</button>
          <button type="button" class="btn btn-primary" {{action "cancel"}} id="button">Reset</button>
        </div>
       </div>
         </form>
      </div>
     </div>
  </script>

I searched for this in stackoverflow i find some solutions but they use save and exit functions.but i did not use save method in ember.i directly save at server side.

what is my mistake. Give me some advise to clear the form data after form submission.

• javascript
• jquery
• ember.js

• Can show us how you have implemented your form? – Selvaraj M A Commented Apr 23, 2014 at 8:41
• I add my form code and update – vinay kallepalli Commented Apr 23, 2014 at 8:49
• How this is even work? I do not see any route defined which use your NewprofileController. Usually, you need to 'manually' setup the data in your controller, because controllers are 'static'. So each time Ember needs a controller, he will get the same one. This is the reason why there is a method called setupController in the route to reset data in the controller. – Florian Parain Commented Apr 23, 2014 at 8:59

1 Answer 1

You have to do it inside the controller like this:

var controller = this;

//After saving the form to the server:
...then(function(){
 controller.set('YourFormData', '');
});

Your Form Data has to be a property with binding in the controller like your id,name and designation.