Submitting form from a modal in Ember

Question

I am trying to make a registration page in ember which is opened when someone clicks the registration button. The registration page is opened in a modal. I used the modal implementation given on Ember websit http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/ Now the registration form opens on clicking the button but I am not able to catch the submit event of the registration form anywhere. You can refer to the code here: http://jsfiddle.net/jywPL/1/

<script type="text/x-handlebars">
{{outlet}}
{{outlet modal}}
</script>

<script type="text/x-handlebars" data-template-name="index">
<h4>Register</h5>
{{outlet}}
<button {{action 'openModal' 'modal' model}}>Register</button>
</script>

<script type="text/x-handlebars" data-template-name="modal">
{{#modal-dialog action="close"}}
<form class="form-horizontal"  {{action "register" on="submit"}}>
<br/>
<div  align="center" >
<table class="table-hover">
<tr>
    <td>
    <label>First Name</label>
    </td>

    <td>
    {{input value=firstName class="controls" type="text"}}
    </td>
</tr>

<tr>
    <td>
    <label>Last Name</label>
    </td>

    <td>
    {{input value=lastName class="controls" type="text"}}
    </td>
</tr>

<tr>
    <td>
    <label>Email</label>
    </td>

    <td>
    {{input value=email class="controls" type="text"}}
    </td>
</tr>

<tr>
    <td>
    <label>Company</label>
    </td>

    <td>
    {{input value=company class="controls" type="text"}}
    </td>
</tr>

<tr>
    <td>
    <label>Company Contact</label>
    </td>

    <td>
    {{input value=contact class="controls" type="text"}}
    </td>
</tr>

<tr>
    <td>
    <label>Reason for request</label>
    </td>

    <td>
    {{view Ember.TextArea valueBinding="reason" rows="10" cols="20"}}
    </td>
</tr>
</table>
<br/>
<button type="submit">Register</button>
<button {{action "close"}}>Done</button>
</div>
</form>

{{/modal-dialog}}
</script>

<script type="text/x-handlebars" id="components/modal-dialog">
 <div class="overlay" {{action "close"}}>
  <div class="modal" {{action bubbles=false}}>
    {{yield}}
  </div>
 </div>
</script>

var App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
actions: {
openModal: function(modalName, model) {
  this.controllerFor(modalName).set('model', model);
  return this.render(modalName, {
    into: 'application',
    outlet: 'modal'
  });
},

closeModal: function() {
  return this.disconnectOutlet({
    outlet: 'modal',
    parentView: 'application'
  });
},
register: function() {
    alert('hello');
}
}
});

App.IndexRoute = Ember.Route.extend({
model: function() {
return Em.Object.create({firstName: '',lastName: '',email:'',company:'',contact:'',reason:''});
},
action: {
register: function(){
    alert('Registering');
}
}
});

App.ModalController = Ember.ObjectController.extend({
actions: {
close: function() {
  return this.send('closeModal');
},
register: function(){
alert('hello1');
} 
}
});

App.ModalDialogComponent = Ember.Component.extend({
actions: {
close: function() {
  return this.sendAction();
},
register: function(){
alert('hello2');
}
}
});

.I have tried to trigger action helper called register on form submit but the register action is not triggered. From the modal implementation I see that the action bubbling has been disabled so the action wouldn't be triggered in any of the parent routes. But why is it not triggering in ModalDialogComponent actions tag.

Yman Yman · Accepted Answer · 2014-01-18T12:25:38

In your ~~ModalController~~ Route, add

action: {
    doRegister: function() {
       this.register(); //or whatever
    }

Then on the submit button

<button type="submit" {{action "doRegister"}}>Register</button>

If your ~~ModalController~~ Route is binding correctly, this should work.

Submitting form from a modal in Ember

1 Answers