If I have the following factories:
.factory('User', function($resource) {
return $resource('/users/:id', {id: "#id"}, {
query: {method: 'GET', params: {}, isArray: false}
});
})
.factory('UserList', function(User, $q) {
var deferred = $q.defer();
User.query({}, function(response) {
deferred.resolve(response.data);
});
return deferred.promise;
})
I know have a UserList that I can inject into all my controllers that need it. But, if I later in my application create a new user, how can I make the 'UserList'-factory "refresh"? Is there another approach that is (even) more "The Angular Way"?
Related
I am trying to integrate Stripe using the elements workflow.
Below are the steps that a user does
Select the plan
Enter card details and click 'Subscribe'
When the user clicks "Subscribe", in the backend I
create a subscription and return the clientSecret
call confirmCardPayment by using the clientSecret in step 1
on success of step 2, pass the paymentIntentId to backend to fetch the card details and save it in the user record.
Below is part of the code
$(document).on('click', '#payment-btn', (e) => {
event.preventDefault();
let name = document.querySelector('#name_on_card').value;
$.ajax({
url: '/subscriptions',
method: 'POST',
beforeSend: function(request){
request.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
},
data: {
plan_id: plan_id
}
}).then((res) => {
stripe.confirmCardPayment(res.clientSecret, {
payment_method: {
card: card,
billing_details: {
name: name
}
}
}).then((result) => {
if(result.error) {
alert(result.error.message);
} else {
$.ajax({
url: '/user',
method: 'PATCH',
dataType: "json",
beforeSend: function(request){
request.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
},
data: {
stripe_customer_payment_method_id: result.paymentIntent.payment_method
}
}).then((result) => {
Turbolinks.visit('/videos?message=success');
})
}
});
});
});
Would this be a good way to execute the payments workflow or is there a more efficient way, may be i am missing something.
Thanks.
I have this code where i am trying to retrieve data from model.findall() and display in UI as table
model.js
define(['jquery', 'can'], function ($, can) {
var serviceModel = can.Model.extend({
findAll: function (params,servicename) {
return $.ajax({
type: 'POST',
dataType: 'JSON',
contentType: 'application/json',
url: 'data/+ servicename',
success: function (data) {
console.log("Success ");
},
error: function () {
console.log("Error");
}
});
}
}, {});
return serviceModel;
});
controller.js
serviceModel.findAll(params,"SP_table", function(data) {
if (data.status === "success") {
$('#idtable').dataTable().fnClearTable();
$('#idtable').dataTable().fnAddData(data.result);
}else{
alert("inside alert");
}
});
issue is in serviceModel.findAll() i am unable to get data inside serviceModel.findAll() because data is in the form of stored procedure or macro, which i am getting using "servicename" from function above
please let me know how to resolve this issue.
You can access the raw xhr data from the ajax call and convert it to an appropriate format by overriding the parseModels method:
https://canjs.com/docs/can.Model.parseModels.html
Overwriting parseModels If your service returns data like:
{ thingsToDo: [{name: "dishes", id: 5}] } You will want to overwrite
parseModels to pass the models what it expects like:
Task = can.Model.extend({ parseModels: function(data){ return
data.thingsToDo; } },{}); You could also do this like:
Task = can.Model.extend({ parseModels: "thingsToDo" },{});
can.Model.models passes each instance's data to can.Model.model to
create the individual instances.
In their example above, the response is a nested JSON: in yours, it is your procedure or macro. You have the opportunity here in parseModels to rewrite the response in the appropriate format.
Is there any jQuery.getJSON() equivalent in MooTools? I have a json file named data.json and I want to get its content by calling data.json file using MooTool. Is it possible? I tried Request.JSON() method but it didn't work for me. The below is my code,
var json_req = new Request.JSON({
url:'../public_html/data/data.json',
method: 'get',
secure: true,
data:{
json: true
},
onSuccess: function (res){
this.result = res;
},
onFailure: function(){
this.result = "failed";
}
}).send();
Also from the http://demos111.mootools.net/ I found an Ajax class named Ajax() which they are widely using through out their tutorial. But in MooTools documentation I didn't find this Ajax() class. I tried to use the Ajax() by replacing my Request.JSON(), but got an "Ajax not defined" error. What is this Ajax class and how can we use it in MooTools?
Here is a simple example of the functionality you are looking after. Basically wrapping a function around the Class... you could use the Class directly also.
function getJSON(url, callback) {
new Request.JSON({
url: url,
onSuccess: callback
}).send();
}
// and invoque it:
getJSON('/echo/json/', function(json) {
console.log(json);
});
you can check it live here: https://jsfiddle.net/w64vo2vm/
This one works for me
window.addEvent('domready', function() {
new Request.JSON({
url: url,
data: {'delay': 1},
method: 'post',
onSuccess: function(response) {
var myJSON = JSON.encode(response)
console.log(myJSON);
}
}).send();
})
You may see the result here
http://jsfiddle.net/chetabahana/qbx9b5pm/
I have a small function for this task. Here's the code
var configJson;
function klak_readJson(fileurl) {
var myRequest = new Request({
url: fileurl,
method: 'get',
onRequest: function(){
console.log('loading '+fileurl+'...');
},
onSuccess: function(responseText) {
console.log('received bytes '+responseText.length);
configJson=JSON.parse(myRequest.response.text);
}
});
myRequest.send();
}
Call the function to store the JSON object into configJson
klak_readJson('/js/test.json');
Hope it helps.
How can I retrieve json in Vuejs in vue.js in laravel 4?
I tried following but it didn't work:
new Vue({
el: '#guestbook',
data: {
comments: [],
text: '',
author: ''
},
ready: function() {
this.getMessages();
},
methods: {
getMessages: function() {
$.ajax({
context: this,
url: "/cms/Getweb_manager",
success: function (result) {
this.$set("comments", result)
}
})
}
}
})
Have you tried logging the response? Just use a console.log(result).
About your doubt, you probably have to do this.$set('comments', result.data');.
Don't forget the semicolon!
Have a look at the vue-resource package
https://github.com/vuejs/vue-resource
It should work like this
methods: {
getMessages: function() {
this.$http({
url: '/cms/Getweb_manager',
method: 'GET'
}).then(function (response) {
// success callback
this.$set('comments', response.result);
}, function (response) {
// error callback
});
}
}
Im experiencing a rather annoying bug (?) in Kendo UI Datasource.
My Update method on my transport is not getting called when I pass a custom function, but it does work if I just give it the URL.
This works:
...
transport: {
update: { url: "/My/Action" }
}
...
This does not
...
transport: {
update: function(options) {
var params = JSON.stringify({
pageId: pageId,
pageItem: options.data
});
alert("Update");
$.ajax({
url: "/My/Action",
data:params,
success:function(result) {
options.success($.isArray(result) ? result : [result]);
}
});
}
}
...
The function is not getting invoked, but an ajax request is made to the current page URL, and the model data is being posted, which is rather odd. Sounds like a bug to me.
The only reason I have a need for this, is because Kendo can't figure out that my update action returns only a single element, and not an array - so, since I dont want to bend my API just to satisfy Kendo, I though I'd do it the other way around.
Have anyone experienced this, and can point me in the right direction?
I also tried using the schema.parse, but that didn't get invoked when the Update method was being called.
I use myDs.sync() to sync my datasource.
Works as expected with the demo from the documentation:
var dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax( {
url: "http://demos.kendoui.com/service/products",
dataType: "jsonp",
success: function(result) {
options.success(result);
}
});
},
update: function(options) {
alert(1);
// make JSONP request to http://demos.kendoui.com/service/products/update
$.ajax( {
url: "http://demos.kendoui.com/service/products/update",
dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
// send the updated data items as the "models" service parameter encoded in JSON
data: {
models: kendo.stringify(options.data.models)
},
success: function(result) {
// notify the data source that the request succeeded
options.success(result);
},
error: function(result) {
// notify the data source that the request failed
options.error(result);
}
});
}
},
batch: true,
schema: {
model: { id: "ProductID" }
}
});
dataSource.fetch(function() {
var product = dataSource.at(0);
product.set("UnitPrice", product.UnitPrice + 1);
dataSource.sync();
});
Here is a live demo: http://jsbin.com/omomes/1/edit