Set model from action and reload template in ember js - javascript

I have redirected from another action controller to one controller.
this.get('controllers.searchResult').send('searchDoc', query);
Here I obtain array object using AJAX request
App.SearchResultController = Ember.ArrayController.extend({
serverURL: 'someURL',
actions: {
searchDoc: function(query) {
$.ajax({
type: "GET",
url: serverURL + request,
data : 'q=' + query,
dataType : "JSON",
context : this, // to increase the scope of
statusCode : {
200 : function(response) {
var docs = [];
response.docs.forEach(function(doc) {
docs.push(App.Doc.create(doc));
});
// do something here so that
// docs get save in the model
// and result page get reload
},
400 : function() {
console.log('status 400 something went wrong');
}
}
});
}
}
});
I am new for Ember JS. I am willing to store/save/add this docs object in the model and reload my route searchResult.

You should keep a reference to the controller and use it to set the content when you get the results back.
Example:
App.SearchResultController = Ember.ArrayController.extend({
serverURL: 'someURL',
actions: {
searchDoc: function(query) {
var self = this; // keep a reference to the controller
$.ajax({
type: "GET",
url: serverURL + request,
data : 'q=' + query,
dataType : "JSON",
statusCode : {
200 : function(response) {
var docs = Ember.A();
response.docs.forEach(function(doc) {
docs.pushObject(App.Doc.create(doc));
});
self.set('content', docs); // use the controller reference to set the content
},
400 : function() {
console.log('status 400 something went wrong');
}
}
});
}
}
});
I also added the usage of an Ember array in the example.
Setting the content should trigger an update of your view.
You can transition to searchResult using the following:
this.get('controllers.searchResult').send('searchDoc', query);
this.transitionToRoute('searchResult');

Related

Passing A Single Objects Into An MVC Controller Method Using jQuery Ajax

I'm trying to post a single object data to an MVC Controler using JQuery, Below are my codes.
//declare of type Object of GroupData
var GroupData = {};
//pass each data into the object
GroupData.groupName = $('#groupName').val();
GroupData.narration = $('#narration').val();
GroupData.investmentCode = $('#investmentCode').val();
GroupData.isNew = isNewItem;
//send to server
$.ajax({
url: "/Admin/SaveContributionInvestGroup",
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
data: JSON.stringify({ GroupData: JSON.stringify(GroupData) }),
success: function (res) {
alertSuccess("Success", res.Message);
//hide modal
$('#product-options').modal('hide');
hide_waiting();
},
error: function (res) {
alertError("Error", res.Message);
}
});
Below is my controller.
[HttpPost]
public JsonResult SaveContributionInvestGroup(ContributionInvestmentGroup GroupData)
{
ClsResponse response = new ClsResponse();
ClsContributionInvestmentGroup clsClsContributionInvestmentGroup = new ClsContributionInvestmentGroup();
var userID = (int)Session["userID"];
var sessionID = (Session["sessionID"]).ToString();
if (contributionGroupData != null)
{
//get the data from the cient that was passed
ContributionInvestmentGroup objData = new ContributionInvestmentGroup()
{
contributionInvestmentGroupID = 0,
groupName = GroupData.groupName,
narration = GroupData.narration,
investmentCode = GroupData.investmentCode,
isNew = GroupData.isNew
};
response = clsClsContributionInvestmentGroup.initiateNewContributionInvestmentGroup(sessionID, objData);
}
else
{
response.IsException = true;
response.IsSucess = false;
response.Message = "A system exception occurred kindly contact your Administrator.";
}
return Json(new
{
response.IsSucess,
response.Message
});
}
The issue is, the data is not been posted to the controller, the controller receives a null object.
Kindly assist, would really appreciate your effort, thanks.
Try Like this:
//send to server
$.ajax({
type: "POST",
url: "/Admin/SaveContributionInvestGroup",
dataType: "json",
data: GroupData,
success: function (res) {
alertSuccess("Success", res.Message);
//hide modal
$('#product-options').modal('hide');
hide_waiting();
},
error: function (res) {
alertError("Error", res.Message);
}
});
in your controller your dont have custom binding to bind JSON to your model thats why you get null in you parameter.
instead just post it as query, try simply changes your ajax option like so:
{
...
contentType: "application/x-www-form-urlencoded", //default:
...,
data: $.param(GroupData),
...
}
and perhaps property names are case sensitive so you will need to change your javascript model's name

Update multiple views

I am trying to update views on multiple components. For that reason I am using broadcast. If I use my code without the $apply() the views are not updating. If I use apply on multiple views I am getting '[$rootScope:inprog] $apply already in progress' error.
Changed code
service.prototype.setNewTopic = function (topic) {
var self = this;
var promise = $http(
{
method: 'POST',
url: self.baseUrl + 'Admin/setNewTopic',
contentType: 'application/json',
data: {
topicName: topic
}
});
return promise;
}
I changed to how your $on method behaves, it should recive the data from the $broadcast and I guess set it appropriately in the component.
// controller - I assume the $scope property in the controller is called $scope.newTopic
service.setNewTopic($scope.newTopic).then( function(data) {
$rootScope.$emit('testMonitor',$scope.newTopic)
})
// one of these per listening component
$rootScope.$on('testMonitor', function(data) {
$scope.newTopic = data;
});
I changed the service to only do http work
// service
service.prototype.setNewTopic = function (topic) {
return $http(
{
method: 'POST',
url: self.baseUrl + 'Admin/setNewTopic',
contentType: 'application/json',
data: {
topicName: topic
}
});
}

Javascript MVC - How to retain initial values

I need to retain the original values from data returned from a model instance. It seems like there should be a method for returning the unmodified data from the model but I can't find it anywhere. I tried using backup.js but this only works for static string attributes.
$.Model('My.Example.Models.Thing',
/* #Static */
{
},
/* #Prototype */
{
getMyStuff : function(args) {
$.ajax({
url : '/path/to/my/service,
type : 'get',
contentType : 'application/json',
dataType : 'json',
success : args.success,
error : args.error,
cache : false
});
}
...
init: {
env = this;
}
show: function(){
thing = new My.Example.Models.Thing();
thing.getMyStuff({
params:params,
success: function(data){
// How do you store the original data for later,
// Without it getting updated when data is modified?
thing.myStuff = data;
env.options.thing = thing;
env.processMyStuff(thing);
},
error: function(){
console.log('error');
}
});
},
try $.extend({}, data), or $.extend(true, {}, data) for deep copy if you are using jquery > 1.1.4

setup $http url from .properties file in angularjs

I have some services in my App.
loginApp.factory('urlService', function() {
return {
baseUrl : function(){
return 'http://localhost:8080/myAppName'
}
}
});
consume this service by one another services.
loginApp.factory('loginServices', function($http,urlService) {
return {
loginAuth : function(aut,resp){
return $http({
method: 'GET',
url: urlService.baseUrl()+'auth',
}).success(function(result) {
return result;
});
}
}
});
I want configure http://localhost:8080/myAppName from a .properties file which is present on application root.
You can do some thing like this
angular.module('app.properties', []).provider('properties', function() {
var resource;
$.ajax({
url: 'properties.json',
dataType: 'json',
async: false,
success: function(data) {
resource = data;
}
});
this.properties= resource;
this.$get = function() {
return this.properties;
};
});
Then use this provider in you controller/services to access the properties
angular.module('loginApp', ['app.properties']).factory('urlService', function(properties) {
return {
baseUrl : function(){
return properties.baseUrl;
}
}
});
And your properties.json should be like
{
"baseUrl" :"http://localhost:8080/myAppName"
}
NB : I have used jquery ajax to load the properties.json because it should not be an async call, so I set async: false
$.ajax({
url: 'properties.json',
dataType: 'json',
**async: false**,
success: function(data) {
resource = data;
}
});
I think the best option in that case would be to create a service that then can be injected and in that service pull the config file and assign content to a returned variable (hope it makes sense so far)
Although that will leave you with possible race issues when i.e. your loginService will be called before config was loaded but if you make a good use of promises all this will be trivial for you

setting a jquery ajax request to async = false doesn't work

I'm attempting to get started with google wallet and am generating a jwt token via an ajax request.
When a user hits the purchase button it fires the purchase() function which in turn sends off some data to get the jwt using the get_jwt_token_for_user() function. I've set the ajax request to not be asynchronous to ensure that the jwt is sent to the google payments handler.
However the purchase() function seems to continue before the jwt is returned by the get_jwt_token_for_user() function. The log output shows that the numbers 1 and 2 are printed to console before the jwt is printed to the console from the get_jwt_token_for_user() function.
function get_jwt_token_for_user(the_key)
{
var JwtTokenURL = "/get_jwt_token";
var the_user_name = $('#user_name').val();
var the_user_email = $('#user_email').val();
var the_user_number = $('#user_number').val();
$.ajax({
type: "Get",
url: JwtTokenURL,
data: {user_number : the_user_number, user_name : the_user_name, user_email : the_user_email, the_d_key : the_key},
async: false,
success: function(result) {
var myObject = JSON.parse(result);
console.log(myObject.jwt_token);
return myObject.jwt_token
},
failure: function(fail){ alert(fail); }
});
}
function purchase(the_key)
{
console.log("1");
var jwt_token = get_jwt_token_for_user(the_key);
console.log("2");
if (jwt_token !== "")
{
console.log(jwt_token);
goog.payments.inapp.buy({
parameters: {},
'jwt' : jwt_token,
'success' : successHandler,
'failure' : failureHandler
});
}
}
Any idea what I can do to ensure that the ajax request has returned the data before the purchase() function marches on without the jwt value?
Your get_jwt_token_for_user function doesn't return anything, you need something more like this:
function get_jwt_token_for_user(the_key) {
//...
var myObject;
$.ajax({
//...
success: function(result) {
myObject = JSON.parse(result);
},
//...
});
return myObject ? myObject.jwt_token : '';
}
Returning something from your success callback doesn't cause that value to be returned by $.ajax and JavaScript functions do not return the value of their last expressions, you must include an explicit return if you want your function to return something.
You should also stop using async:false as soon as possible, it is rather user-hostile and it is going away. Your code should look more like this:
function get_jwt_token_for_user(the_key, callback) {
//...
$.ajax({
type: "Get",
url: JwtTokenURL,
data: {user_number : the_user_number, user_name : the_user_name, user_email : the_user_email, the_d_key : the_key},
success: function(result) {
var myObject = JSON.parse(result);
callback(myObject.jwt_token);
},
failure: function(fail){ alert(fail); }
});
}
function purchase(the_key) {
get_jwt_token_for_user(the_key, function(jwt_token) {
if (jwt_token !== "") {
//...
}
});
}

Categories