I have two selects: one for country, other for regions. Country select is filled statically, but region select has to be filled dependent on current country through POST request.
I already made a server method which responds to country parameter with corresponding JSON, made a code for loading data into the select, but when I put this code into a watch it does not work properly:
.....................
]).factory('helperService', [
'$http', '$log', function($http, console) {
var checkDiscount, getRegions;
getRegions = function(countryCode) {
return $http({
method: 'POST',
url: '/api/regions/',
data: {
country_code: countryCode
}
});
};
.....................
]).controller('orderController', [
.....................
$scope.$watch('billing_country', function(value) {
helperService.getRegions($scope.country).success(function(result) {
$scope.regions = result;
return $scope.order.billing_state = $scope.regions[0];
});
return $scope.country = value;
});
Your call to factory must return an object, currently it isn't returning anything at all.
Change it to the following:
.factory('helperService', ['$http', '$log', function($http, console) {
var checkDiscount;
var service = {
getRegions: function(countryCode) {
return $http({ method: 'POST',
url: '/api/regions/',
data: { country_code: countryCode }
});
}
};
return service;
}])/****/
And then your call to helperService.getRegions will work.
Related
I have this ajax call that populate the fields to a related field.
YAHOO.util.Event.onDOMReady(function() {
YAHOO.util.Event.addListener(
"parent_module_another_module_ida",
"change",
ajaxReq
);
function ajaxReq() {
var propertyId = $("#parent_module_another_module_ida").val();
if (propertyId != "") {
$.ajax({
url: "/?entryPoint=ajaxEntryPoint&module=Parent_Module&id=" + propertyId,
success: function(result) {
var res = JSON.parse(result);
$("#price").val(res['price']);
}
});
}
}
});
The fields gets auto populated but the format becomes something like 1000.000000 ive tried to modify the precision in its vardefs to 0 but its still the same i want to format the number if possible to something like this 1,000.
You will need to use toFixed function of javascript to get the required results.
Following is the modified code:
YAHOO.util.Event.onDOMReady(function() {
YAHOO.util.Event.addListener(
"parent_module_another_module_ida",
"change",
ajaxReq
);
function ajaxReq() {
var propertyId = $("#parent_module_another_module_ida").val();
if (propertyId != "") {
$.ajax({
url: "/?entryPoint=ajaxEntryPoint&module=Parent_Module&id=" + propertyId,
success: function(result) {
var res = JSON.parse(result);
price_val = res['price'].toFixed(0);
$("#price").val(price_val);
}
});
}
}
});
I want to authenticate the user_name and password field. the user_name and password field is stored in database with php. how to get the data from the server in ionic project.
Thanks in advance.
You can create a service script that can send post data to PHP and receive a JSON response.
Post data should be sent as an object containing element name and values in the following format:
var myObj = {username: 'username', password:'password'};
Below is a service example:
yourApp.service('YourService', function ($q, $http) {
return {
login: function (data) {
var deferred = $q.defer(),
promise = deferred.promise;
$http({
url: 'http://www.example.com/yourPHPScript.php',
method: "POST",
data: data,
headers: {'Content-Type': 'application/json'}
})
.then(function (response) {
if (response.data.error.code === "000") {
deferred.resolve(response.data.appointments);
} else {
deferred.reject(response.data);
}
}, function (error) {
deferred.reject(error);
});
promise.success = function (fn) {
promise.then(fn);
return promise;
};
promise.error = function (fn) {
promise.then(null, fn);
return promise;
};
return promise;
}
};
});
From your login controller you call the following code to use the service (make sure you add the name of the service to your controller declaration)
YourService.login(loginData)
.then(function (data) {
// on success do sthg
}, function (data) {
//log in failed
// show error msg
});
I have successfully created one route in ember-cli-mirage, but am having trouble loading the related data.
The API should be returning JSON API compliant data.
I'm not really sure if there are any good methods or not for debugging mirage's request interception. Here is my config.js
export default function() {
this.urlPrefix = 'https://myserver/';
this.namespace = 'api/v1';
this.get('/machines', function(db, request) {
return {
data: db.machines.map(attrs => (
{
type: 'machines',
id: attrs.id,
attributes: attrs
}
))
};
});
this.get('/machines/:id', function(db, request){
let id = request.params.id;
debugger;
return {
data: {
type: 'machines',
id: id,
attributes: db.machines.find(id),
relationships:{
"service-orders": db["service-orders"].where({machineId: id})
}
}
};
});
this.get('/machines/:machine_id/service-orders', function(db, request){
debugger; // this never gets caught
});
}
Most of this is working fine (I think). I can create machines and service orders in the factory and see the db object being updated. However, where my application would normally make a call to the api for service-orders: //myserver/machines/:machine_id/service-orders, the request is not caught and nothing goes out to the API
EDIT:
This is the route that my Ember app is using for /machines/:machine_id/service-orders:
export default Ember.Route.extend(MachineFunctionalRouteMixin, {
model: function() {
var machine = this.modelFor('machines.show');
var serviceOrders = machine.get('serviceOrders');
return serviceOrders;
},
setupController: function(controller, model) {
this._super(controller, model);
}
});
And the model for machines/show:
export default Ember.Route.extend({
model: function(params) {
var machine = this.store.find('machine', params.machine_id);
return machine;
},
setupController: function(controller, model) {
this._super(controller, model);
var machinesController = this.controllerFor('machines');
machinesController.set('attrs.currentMachine', model);
}
});
Intuitively, I would think that machine.get('serviceOrders'); would make a call to the API that would be intercepted and handled by Mirage. Which does not seem to be the case
I am trying to make the request
....port/trimService/fragments/?fragment_name=:fragmentName
However if I try to make the "?fragment_name" a parameter, it breaks. As I am going to have more requests, my action with change so I cannot leave it in the url portion of the resource.
angular.module(foo).factory('FragmentService', ['$resource',
function ($resource)
{
var FragmentService = $resource('.../fragments/:action:fragmentName',
{},
{
'getFragments':
{
method: 'GET',
isArray: true,
params:
{
fragmentName: "#fragmentName",
action: "?fragment_name="
}
}
});
return FragmentService;
}
]);
As of right now, I have no idea what my URL is actually outputting.
EDIT: I changed my resource as /u/akonsu had mentioned below. I also added my controller as it is still not working correctly.
angular.module(foo).factory('FragmentService', ['$resource',
function ($resource)
{
var FragmentService = $resource('.../fragments/',
{},
{
'getFragments':
{
method: 'GET',
isArray: true,
params:
{
fragmentName: "#fragmentName",
}
}
});
return FragmentService;
}
]);
angular.module(foo).controller('FragmentController', ['$scope', 'FragmentService',
function ($scope, FragmentService)
{
$scope.fragmentQuery = {
fragmentName: 'a',
};
$scope.fragmentQuery.execute = function ()
{
if ($scope.fragmentQuery.fragmentName == '')
{
$scope.fragments = {};
}
else
{
$scope.fragments = FragmentService.getFragments(
{
fragmentName: $scope.fragmentQuery.fragmentName,
});
}
};
$scope.fragmentQuery.execute();
}
]);
Try omitting the query string altogether in the resource URL and just supply your fragmentName as a parameter to the action call. It should add it to the query string if it is not in the list of URL parameters.
$resource(".../port/trimService/fragments/").get({fragmentName: 'blah'})
Heres the jsfiddle, jsfiddle.net/kqreJ
So I was using .bind no problem for this function but then I loaded more updates to the page and found out that .bind doesn't work for content imported to the page but just for content already on the page! Great!
So I switched it up to .delegate which is pretty cool but now I can't figure out how to .bind .unbind my function the way it was???
Function using .bind which worked perfect... except didn't work on ajax content.. :(
$('.open').bind("mouseup",function(event) {
var $this = $(this), handler = arguments.callee;
$this.unbind('mouseup', handler);
var id = $(this).attr("id");
var create = 'nope';
var regex = /\d+$/,
statusId = $('#maindiv .open').toArray().map(function(e){
return parseInt(e.id.match(regex));
});
var divsToCreate = [ parseInt(id) ];
$.each(divsToCreate, function(i,e)
{
if ( $.inArray(e, statusId) == -1 ) {
create = 'yup';
}
});
if( create == 'yup' ) {
if(id) {
$.ajax({
type: "POST",
url: "../includes/open.php",
data: "post="+ id,
cache: false,
success: function(html) {
$('.open').html(html);
$this.click(handler);
}
});
}
}
});
New function using .delegate that is not binded and creates multiple instances?
$('#maindiv').delegate("span.open", "mouseup",function(event) {
var $this = $(this), handler = arguments.callee;
$this.unbind('mouseup', handler);
var id = $(this).attr("id");
var create = 'nope';
var regex = /\d+$/,
statusId = $('#maindiv .open').toArray().map(function(e){
return parseInt(e.id.match(regex));
});
var divsToCreate = [ parseInt(id) ];
$.each(divsToCreate, function(i,e)
{
if ( $.inArray(e, statusId) == -1 ) {
create = 'yup';
}
});
if( create == 'yup' ) {
if(id) {
$.ajax({
type: "POST",
url: "../includes/open.php",
data: "post="+ id,
cache: false,
success: function(html) {
$('.open').html(html);
$this.click(handler);
}
});
}
}
});
I've spent hours trying to figure this out because I like learning how to do it myself but I had to break down and ask for help... getting frustrated!
I also read that when your binding and unbinding .delegate you have to put it above the ajax content? I've tried using .die() and .undelegate()... Maybe I just don't know where to place it?
Take a look at undelegate
It does to delegate what unbind does to bind.
In your case, I think it'd be something like:
$('#maindiv').undelegate("span.open", "mouseup").delegate("span.open", "mouseup" ...
Then you can drop the $this.unbind('mouseup', handler); within the function.