Emberjs: Resolve form data from child views - javascript

I have a OutputsFormView which should have a save and cancel handler for click events on the buttons. When the save button is clicked it should collect all values from the child views and send it to the controller which then persists it.
outputs.js
App.OutputsCreateRoute = Ember.Route.extend({
model: function() {
return App.Output.createRecord();
},
renderTemplate: function() {
return this.render('outputs/form', {
controller: 'outputsCreate'
});
}
});
App.OutputsCreateController = Ember.Controller.extend({
save: function(model) {
// outputs empty values for title, receiver, value
console.log(model);
}
});
App.OutputsFormView = Ember.View.extend({
tagName: 'form',
classNames: ['form', 'form-horizontal'],
save: function(e) {
this.get('controller').send('save', {
title: this.get('title'),
receiver: this.get('receiver'),
value: this.get('value')
});
},
cancel: function(e) {
console.log('canceling');
}
});
template
<script type="text/x-handlebars" data-template-name="outputs/form">
{{#view App.OutputsFormView}}
<legend class="text-right">create a new output</legend>
<fieldset>
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
{{view Ember.TextField valueBinding="view.title" placeholder="Lovely Afternoon Pizza"}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="receiver">Receiver</label>
<div class="controls">
{{view Ember.TextField valueBinding="view.receiver" placeholder="The Goverment"}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="value">Receiver</label>
<div class="controls">
{{view App.ValueView valueBinding="view.value"}}
</div>
</div>
<div class="control-group pull-right">
<div class="controls">
<button type="button" {{action "save"}} class="btn">save</button>
<button type="button" {{action "cancel"}} class="btn btn-red">cancel</button>
</div>
</div>
</fieldset>
{{/view}}
</script>
For some reason I cannot get the values of the child form views and unfortunately I have no idea what I have forgotten...
Bodo

The solution is that each a valueBinding is available in the controller:
App.OutputsCreateController = Ember.Controller.extend({
save: function(model) {
var output = this.get('model');
output.set('title', this.get('title'));
output.set('receiver', this.get('receiver'));
output.set('value', this.get('value'));
output.save();
}
});
This is better than resolving the values out of the view directly. But if you want to do this you can give your view a name:
{{view viewName="blabla"}}
and then access it through the parent view with:
this.get('blabla');
However I think the value binding method should be preferred

Related

Page get reloaded on form submit with backbone js

I am trying to do a form submit with backbone.js, and when I click submit, it refreshes form. I have added my js code here. Is there any source from where i can get some detailed example with backbone js and have proper explained backbone js. I am new to backbone js and trying to learn it.
$(document).ready(function () {
Models.morderfaq = Backbone.Model.extend({
action: "ae-morder_faq-sync",
defaults: {
}
});
Collections.morderfaqs = Backbone.Collection.extend({
model: morderfaq,
el: '#save_faq_form',
action: 'ae-fetch-morder_faq',
initialize: function () {
}
});
Views.morderfaq_view = Backbone.View.extend({
el: '#save_faq_form',
events: {
"submit #save_faq_form": "syncChange"
},
initialize: function (options) {
_.bindAll(this, 'syncChange');
this.model = new morderfaq();
},
syncChange: function (event) {
event.preventDefault();
var self = this;
console.log('clicked');
self.$el.find('input,textarea,select').each(function () {
self.model.set($(this).attr('name'), $(this).val());
});
}
});
new Views.morderfaq_view();
});
Html code
<form class="post et-form" id="save_faq_form" novalidate="novalidate">
<div class="form-group clearfix">
<div class="input-group">
<label for="" class="input-label">1. send me
</label>
<textarea name="morder_faq_491" class="input-item input-full" id="morder_faq_491" value="" placeholder="Enter Text...">
</textarea>
</div>
</div>
<div class="form-group">
<button class="btn-save btn-submit" type="submit">SEND</button>
<input type="hidden" class="input-item save_faq_nonce" name="_wpnonce" value="fd75e383ec">
</div>
</form>

AngularJS 1.6.8: Unable to submit form and display success message

I have a simple query submission form with name, email and query fields and a component with a controller function having the submit function to submit the form.
I am using ng-submit directive in the <form></form> tag to submit the user input and display a success message on submission.
below is the code for the respective files.
contact.html
<div ngController="contactController as vm">
<div class="heading text-center">
<h1>Contact Us</h1>
</div>
<div>
<form class="needs-validation" id="contactForm" novalidate method="post" name="vm.contactForm" ng-submit="saveform()">
<div class="form-group row">
<label for="validationTooltip01" class="col-sm-2 col-form-label">Name</label>
<div class="input-group">
<input type="text" class="form-control" id="validationTooltipName" placeholder="Name" ng-model="vm.name" required>
<div class="invalid-tooltip">
Please enter your full name.
</div>
</div>
</div>
<div class="form-group row">
<label for="validationTooltipEmail" class="col-sm-2 col-form-label">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="validationTooltipUsernamePrepend">#</span>
</div>
<input type="email" class="form-control" id="validationTooltipEmail" placeholder="Email"
aria-describedby="validationTooltipUsernamePrepend" ng-model="vm.email" required>
<div class="invalid-tooltip">
Please choose a valid email.
</div>
</div>
</div>
<div class="form-group row">
<label for="validationTooltip03" class="col-sm-2 col-form-label">Query</label>
<div class="input-group">
<input type="text" class="form-control" id="validationTooltipQuery" ng-model="vm.query" placeholder="Query" required>
<div class="invalid-tooltip">
Please write your Query.
</div>
</div>
</div>
<div class="btn-group offset-md-5">
<button class="btn btn-primary" type="submit">Submit</button>
<button class="btn btn-default" type="button" id="homebtn" ng-click="navigate ('home')">Home</button>
</div>
</form>
<span data-ng-bind="Message" ng-hide="hideMessage" class="sucessMsg"></span>
</div>
</div>
contact.component.js
angular.module('myApp')
.component('contactComponent', {
restrict: 'E',
$scope:{},
templateUrl:'contact/contact.html',
controller: contactController,
controllerAs: 'vm',
factory:'userService',
$rootscope:{}
});
function contactController($scope, $state,userService,$rootScope) {
var vm = this;
$scope.navigate = function(home){
$state.go(home)
};
$scope.saveform = function(){
$scope.name= vm.name;
$scope.email= vm.email;
$scope.query= vm.email;
$scope.hideMessage = false;
$scope.Message = "Your query has been successfully submitted."
};
$scope.user = userService;
};
//localStorage code
function userService($rootScope) {
var service = {
model: {
name: '',
email: '',
query:''
},
SaveState: function () {
sessionStorage.userService = angular.toJson(service.model);
},
RestoreState: function () {
service.model = angular.fromJson(sessionStorage.userService);
}
}
$rootScope.$on("savestate", service.SaveState);
$rootScope.$on("restorestate", service.RestoreState);
return service;
$rootScope.$on("$routeChangeStart", function (event, next, current) {
if (sessionStorage.restorestate == "true") {
$rootScope.$broadcast('restorestate'); //let everything know we need to restore state
sessionStorage.restorestate = false;
}
});
//let everthing know that we need to save state now.
window.onbeforeunload = function (event) {
$rootScope.$broadcast('savestate');
};
};
UPDATE: On Submit, When I check the response in network tab in dev tools, I do not see the submitted values. All I see is the markup.
In your template, the name of the method is saveform:
ng-submit="saveform()"
But in your controller, it's save:
$scope.save = function() { ... }
Rename it to saveform:
$scope.saveform = function() { ... }

Controller on Modal not working on AngularJS

I have a main users page with users, if you select a user, a modal is opened and should show the user information.
The problem is that the $scope doesn't seem to be working, as it doesn't show the user data on the modal. But if I show that user data anywhere on the main users page, it works fine.
I have this controller:
function userController($scope, $modal, $http, $rootScope) {
var usrCtrl = this;
$scope.users = null;
$scope.openUserForm = function () {
var modalInstance = $modal.open({
templateUrl: 'views/modal_user_form.html',
controller: userController,
windowClass: "animated flipInY"
});
};
var session = JSON.parse(localStorage.session);
$http({
method: 'GET',
url: $rootScope.apiURL+'getAllClientUsers/'+session,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(response){
if(response.ErrorMessage === null && response.Result !== null){
$scope.users = response.Result;
}
});
//**This is the code that opens the modal
$scope.editViewUser = function(user){
for (var key in $scope.users) {
if($scope.users[key].SecUserId === user){
$scope.selectedUser = $scope.users[key];
}
}
$scope.openUserForm();
};
};
And this modal:
<div ng-controller="userController">
<div class="inmodal">
<div class="modal-header">
<h4 class="modal-title">Create or Edit User</h4>
<small class="font-bold">Use this modal to create or edit a user</small>
</div>
<div class="modal-body">
<form method="get" class="form-horizontal">
<div class="form-group"><label class="col-sm-2 control-label">Nombre</label>
<div class="col-sm-10"><input ng-model="selectedUser.FirstName" type="text" class="form-control"></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label">Apellido</label>
<div class="col-sm-10"><input ng-model="selectedUser.LastName" type="text" class="form-control"></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label">Usuario</label>
<div class="col-sm-10"><input ng-model="selectedUser.UserName" type="text" class="form-control"></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10"><input ng-model="selectedUser.Email" type="email" class="form-control"></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label">Activo</label>
<div class="col-sm-10">
<div><label> <input ng-model="selectedUser.FirstName" type="checkbox" value=""></label></div>
</div>
</div>
<div class="form-group"><label class="col-sm-2 control-label">Email Verificado</label>
<div class="col-sm-10">
<div><label> <input ng-model="selectedUser.FirstName" type="checkbox" value=""></label></div>
</div>
</div>
<div class="form-group"><label class="col-sm-2 control-label">Privilegios</label>
<div class="col-sm-10">
<select class="form-control m-b" name="account">
<option ng-repeat="priv in selectedUser.EffectivePrivileges">{{ priv }}</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" ng-click="cancel()">Close</button>
<button type="button" class="btn btn-primary" ng-click="ok()">Save changes</button>
</div>
</div>
</div>
I tried injecting the controller and also using the ng-controller, and scope property for modal.
What am I missing?
The problem is that modal template is compiled in the scope which doesn't inherit from your $scope. To make a connection between them you can tell modal to create a new child scope of your scope:
$scope.openUserForm = function () {
var modalInstance = $modal.open({
scope: $scope, // <----- add this instruction
templateUrl: 'views/modal_user_form.html',
controller: userController,
windowClass: "animated flipInY"
});
};
Generally, the modal would have its own controller rather than point to the controller that its called from. You would inject the model (selectedUser) into the modal controller, work on it, then pass it back to parent. Also, you can give user option to cancel in which case no changes are made to parent controller model.
Modal controller:
app.controller('UserModalController', [
'$scope',
'$modalInstance',
'selectedUser',
function ($scope, $modalInstance, selectedUser) {
$scope.selectedUser = selectedUser;
$scope.cancel= function () {
// user cancelled, return to parent controller
$modalInstance.dismiss('cancel');
};
$scope.save = function () {
// close modal, return model to parent controller
$modalInstance.close($scope.selectedUser);
};
]);
Changes to main controller:
var modalInstance = $modal.open({
templateUrl: 'views/modal_user_form.html',
controller: 'UserModalController',
windowClass: "animated flipInY",
resolve: {
selectedUser: function() {
return $scope.selectedUser;
}
}
});
modalInstance.result.then(function(updatedUser) {
// deal with updated user
}, function() {
// modal cancelled
});

how to pass data from modal to function

I have a modal form that has several inputs text form control. How do I pass the data to post to the database so that ng-grid gets updated?
do I call my ajax create function within the $scope.open controller section? or resolve?
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
}]);
the create function
$scope.createMedicalServices = function(){
var providerMedicalServiceAttributes = {};
providerMedicalServiceAttributes.cash_price = $scope.cash_price
providerMedicalServiceAttributes.average_price = $scope.average_price
providerMedicalServiceAttributes.service = $scope.service
var medicalServicesAttributes = {};
medicalServicesAttributes.description = $scope.description
medicalServicesAttributes.service = $scope.service
var newMedicalService = ProviderMedicalService.create(providerMedicalServiceAttributes);
$scope.provider_medical_services.push(newMedicalService);
ProviderMedicalService.update(providerMedicalServiceAttributes, '/providers/services');
};
create function from factory (factory does delete, querying and create)
ProviderMedicalService.prototype.create = function(attr){
return this.service.save(attr);
}
the html for the modal form
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="header-modal">
<h3>Add Service</h3>
</div>
<div class="modal-body">
<form name="myForm" novalidate ng-submit="submit()">
<div class="row well-text-padding">
<div class="col-md-3 modal-form-tag">CPT Code</div>
<div class="col-md-6">
<input type="text" class="form-control form-control-modal" ng-model="CPT_code" placeholder="CPT Code">
</div>
</div>
<label class="checkbox modal-check-box">
<input type="checkbox" ng-model="No_CPT_code">Service does not have a associated CPT Code
</label>
<div class="row well-text-padding">
<div class="col-md-3 modal-form-tag">Description</div>
<div class="col-md-6">
<textarea class="form-control form-control-modal" rows="3" ng-model="Description" placeholder="Add a Description"></textarea>
</div>
</div>
<div class="row well-text-padding">
<div class="col-md-3 modal-form-tag">Average Cost</div>
<div class="col-md-6">
<input type="text" class="form-control form-control-modal" ng-model="Average_cost" placeholder="$">
</div>
</div>
<div class="row well-text-padding">
<div class="col-md-3 modal-form-tag">Offered Price</div>
<div class="col-md-6">
<input type="text" class="form-control form-control-modal" ng-model="Offered_price" placeholder="$">
</div>
</div>
<div class="btn-row2 modal-button-row">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" type="submit">Add Service</button>
</div>
</script>
You can make the POST request to server when clicked Add Service, or you can pass your data from modal to your main controller through $scope.$close().
Example as below:
In modal controller
var data = {
CPT_code: $scope.CPT_code,
No_CPT_code: $scope.No_CPT_code,
Description: $scope.Description,
Average_cost: $scope.Average_cost,
Offered_price: $scope.Offered_price
};
$scope.$close(data); // pass the data through modal close event
Then in your main controller by using the promise to get the data
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
}).result.then(function (response) {
var data = response; // here is your data from your modal
});
};
Hope this helps.

What is the right approach to reload the model for a non-dynamic route with ember.js?

I'm having a simple array of models which I display in a list (path: /things). The models get loaded from a REST-API.
In a nested route I have the functionality to add a new model. (path: /things/add). The new model is persisted over a REST-API.
After adding the new model, I do a transitionTo('things') to get back to the list.
Following the ember documentation, by using "transitionTo" neither the model hook nor the setupController-Hook are called for non dynamic routes.
What is the right approach to refresh the model on a non-dynamic route, when using transitionTo? Or: what is the best way to reload a model on a non-dynamic route without using transitionTo?
app.js
// App Init
App = Ember.Application.create();
// Routes
App.Router.map(function() {
this.resource('things', function() {
this.route('add');
})
});
App.IndexRoute = Ember.Route.extend({
redirect : function() {
this.transitionTo('things');
}
});
App.ThingsRoute = Ember.Route.extend({
model : function(param) {
return App.Thing.findAll();
},
});
App.ThingsAddRoute = Em.Route.extend({
setupController : function(controller) {
controller.set('content', App.Thing.create());
}
});
// Models
App.Thing = Ember.Object.extend({
name : null,
description : null
});
App.Thing.reopenClass({
findAll : function() {
var result;
$.ajax({
url : 'http://path/app_dev.php/api/things',
dataType : 'json',
async : false,
success : function(data) {
result = data.things;
}
});
return result;
},
save : function(content) {
console.log(content);
$.ajax({
type : 'post',
url : 'http://path/app_dev.php/api/things',
data : {
name : content.name,
description : content.description
},
async : false
});
}
});
// Controller
App.ThingsAddController = Em.ObjectController.extend({
add : function() {
App.Thing.save(this.content);
this.transitionToRoute('things');
},
cancelAdding : function() {
this.transitionToRoute('things');
}
});
index.html
<script type="text/x-handlebars">
<div class="container">
<div class="row">
<div class="span12">
<h1>List of things</h1>
</div>
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="things/add">
<div class="span12">
<form class="form-horizontal">
<fieldset>
<div id="legend">
<legend class="">Add new thing</legend>
</div>
<!-- Name -->
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
{{view Ember.TextField id="name" placeholder="Enter Name" valueBinding="name"}}
</div>
</div>
<!-- Description -->
<div class="control-group">
<label class="control-label" for="description">Description</label>
<div class="controls">
{{view Ember.TextArea id="description" placeholder="Enter description" valueBinding="description"}}
</div>
</div>
<!-- Submit -->
<div class="control-group">
<div class="controls">
<button class="btn btn-success" {{action add}}>Save</button>
<button class="btn" {{action cancelAdding}}>Cancel</button>
</div>
</div>
</fieldset>
</form>
</div>
</script>
<script type="text/x-handlebars" data-template-name="things">
<div class="span12">
<div class="btn-toolbar">
<div class="btn-group">
{{#linkTo things.add}}<i class="icon-plus"></i> add new thing{{/linkTo}}
</div>
</div>
</div>
{{outlet}}
<div class="span12">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped ">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{{#each item in model}}
<tr>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</script>
So if you were using ember-data, a side effect of saving the record would be that the results of findAll() get updated. You can accomplish the same by either manually updating the array or triggering a refresh when a new record is added. In either case, suggest doing that from ThingsAddController's add fx. For example:
App.ThingsAddController = Em.ObjectController.extend({
needs: [things],
add : function() {
newThing = App.Thing.save(this.content);
this.get('controllers.things').pushObject(newThing);
this.transitionToRoute('things');
},
});

Categories